feat(graphql): enchance codegen (refactor, doc, env, watch, global config)

https://github.com/martis-git/learn-frontend/issues/279

Author: azinit

examples/graphql/.env

@@ -0,0 +1,5 @@
+API_DOMAIN=https://graphqlzero.almansi.me/api
+API_GENCOMMENT=/** @generated THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+# Если нужно больше информации при кодогенерации
+# DEBUG=1
+# VERBOSE=1

examples/graphql/codegen.yml

@@ -1,23 +1,32 @@
-# FIXME: don't work globlally
-overwrite: true
-schema: https://graphqlzero.almansi.me/api
+# Конфигурация для кодогенерации схемы и запросов GraphQL для TypeScript
+# @remark Конфигурацию объявляем глобально, т.к. плагины должны использоваться одинаково для нескольких файлов
+schema: ${API_DOMAIN}
 documents: src/**/*.gql
+config:
+  # Сгенерированные файлы напрямую менять нельзя (!), только через обертки / доп. файлы
+  content: ${API_GENCOMMENT}
+  # Работа с запросами ведется через react-hooks
+  withHooks: true
+  # Из типов для схемы исключается служебное поле __typename
+  skipTypename: true
+  # Все типы из схемы и запросов - иммутабельны
+  immutableTypes: true
+  # @experimental Опциональность полей - пока что отключена
+  avoidOptionals: true
+  # Типы генерируются на лету, без Pick - для чистоты информации по типу
+  preResolveTypes: true
 generates:
   src/types.ts:
-    - typescript
+    plugins:
+      - add
+      - typescript
   src/:
     preset: near-operation-file
+    # Типы схемы и запросы - разделены
     presetConfig:
       extension: .gen.ts
       baseTypesPath: types.ts
-    config:
-      skipTypename: true
-      withHooks: true
-      immutableTypes: true
-      avoidOptionals: true
-      # Чтобы работал intelissense
-      preResolveTypes: true
-      # onlyOperationTypes: true
     plugins:
+      - add
       - typescript-operations
-      - typescript-react-apollo
+      - typescript-react-apollo

examples/graphql/package.json

@@ -31,7 +31,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "api:gen": "graphql-codegen"
+    "api:gen": "graphql-codegen -r dotenv/config",
+    "api:gen--watch": "graphql-codegen -r dotenv/config -w"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -49,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@graphql-codegen/add": "^2.0.1",
     "@graphql-codegen/cli": "^1.17.10",
     "@graphql-codegen/near-operation-file-preset": "^1.17.11",
     "@graphql-codegen/typescript": "^1.17.10",

examples/graphql/src/pages/tasks-list/query.gen.ts

@@ -1,3 +1,4 @@
+/** @generated THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
 import * as Types from '../../types';
 
 import { gql } from '@apollo/client';