feat(graphql): enchance codegen (presets)

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

Author: azinit

examples/graphql/codegen.yml

@@ -1,11 +1,16 @@
+# FIXME: don't work globlally
 overwrite: true
 schema: https://graphqlzero.almansi.me/api
 documents: src/**/*.gql
 generates:
-  src/gen/graphql.tsx:
+  src/types.ts:
+    - typescript
+  src/:
+    preset: near-operation-file
+    presetConfig:
+      extension: .gen.ts
+      baseTypesPath: types.ts
     config:
-      # FIXME: SPECIFY (noNamespaces: false)
-      # TODO: avoidTypeName
       skipTypename: true
       withHooks: true
       immutableTypes: true
@@ -14,6 +19,5 @@ generates:
       preResolveTypes: true
       # onlyOperationTypes: true
     plugins:
-      - typescript
       - typescript-operations
       - typescript-react-apollo

examples/graphql/package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.17.10",
+    "@graphql-codegen/near-operation-file-preset": "^1.17.11",
     "@graphql-codegen/typescript": "^1.17.10",
     "@graphql-codegen/typescript-operations": "^1.17.8",
     "@graphql-codegen/typescript-react-apollo": "^2.0.7",

examples/graphql/src/pages/tasks-list/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react'
 import { Spin, Alert } from "antd";
 import { useFetch } from "shared/hooks";
 import { TaskItem } from "shared/components";
-import { useGetTodosListQuery } from "gen/graphql";
+import { useGetTodosListQuery } from "./query.gen";
+
+type Foo = import("types").Album;
 
 const TasksList = () => {
     const { data, error, loading } = useFetch<Task[]>("todos");

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

@@ -0,0 +1,48 @@
+import * as Types from '../../types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type GetTodosListQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type GetTodosListQuery = { readonly todos: Types.Maybe<{ readonly data: Types.Maybe<ReadonlyArray<Types.Maybe<{ readonly id: Types.Maybe<string>, readonly title: Types.Maybe<string>, readonly user: Types.Maybe<{ readonly name: Types.Maybe<string> }> }>>> }> };
+
+
+export const GetTodosListDocument = gql`
+    query getTodosList {
+  todos {
+    data {
+      id
+      title
+      user {
+        name
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetTodosListQuery__
+ *
+ * To run a query within a React component, call `useGetTodosListQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetTodosListQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetTodosListQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetTodosListQuery(baseOptions?: Apollo.QueryHookOptions<GetTodosListQuery, GetTodosListQueryVariables>) {
+        return Apollo.useQuery<GetTodosListQuery, GetTodosListQueryVariables>(GetTodosListDocument, baseOptions);
+      }
+export function useGetTodosListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTodosListQuery, GetTodosListQueryVariables>) {
+          return Apollo.useLazyQuery<GetTodosListQuery, GetTodosListQueryVariables>(GetTodosListDocument, baseOptions);
+        }
+export type GetTodosListQueryHookResult = ReturnType<typeof useGetTodosListQuery>;
+export type GetTodosListLazyQueryHookResult = ReturnType<typeof useGetTodosListLazyQuery>;
+export type GetTodosListQueryResult = Apollo.QueryResult<GetTodosListQuery, GetTodosListQueryVariables>;