Декларируем типы из graphql файлов

Нужно быстро и не сильно вникая выжать всё самое полезное из graphql файлов. Нам поможет "graphql-codegen", он получит схему с сервера, и опишет типы для наших запросов.

настроим для него конфиг

# codegen.yml

generates:
  # адрес сервера с graphql
  schema: "${ENV_GRAPHQL_ENDPOINT}"
  # путь генерируемого файла с типами из схемы
  src/types/graphql.schema.ts:
    plugins:
      - typescript # плагин "@graphql-codegen/typescript"

  #папка где искать наши graphql файлы
  src/:
    # плагин "@graphql-codegen/near-operation-file-preset" положит файл с типами рядом с graphql файлами
    preset: near-operation-file
    # шаблон поиска graphql файлов
    documents: "src/**/*.graphql"
    presetConfig:
      # расширения для генерируемых файлов, ".graphql" - расширение документов graphql
      # ".d" - обозначает что этот файл декларирует типы для одноимённых файлов
      extension: .graphql.d.ts
      # относительный путь до файла со всеми типами
      baseTypesPath: types/graphql.schema.ts
      # Пространство имён для типов из файла указанного 'baseTypesPath'
      importTypesNamespace: SchemaTypes
    plugins:
      - typescript-operations # плагин "@graphql-codegen/typescript-operations" добавит типизацию самих документов
    config:
      nonOptionalTypename : true # добавит __typename в типы
      avoidOptionals: true # уберёт рациональность у свойств (?), заменить на Maybe
      addOperationExport: true # добавит именованный экспорт операций

Запускаем генерацию graphql-codegen --config codegen.yml

Получаем возможность импортировать типы и документы прямиком из graphql файлов

import {
  productSubcategory,
  productSubcategoryUpdated,
  
  ProductSubcategoryQuery,
  ProductSubcategoryQueryVariables,
  ProductSubcategoryUpdatedSubscription,
  ProductSubcategoryUpdatedSubscriptionVariables,
  SubcategoryFragment
} from '@/graphql/default/category.graphql'

jinnyMcKindy/ts-from-graphql.md

Декларируем типы из graphql файлов