chore

codegen.ts

@@ -1,7 +1,7 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
-  schema: process.env.GRAPHQL_ENDPOINT,
+  schema: "http://172.16.6.246:8055/graphql?access_token=WkVWFMiFcrjsXRZqsL30Cd4Sboe0DRk-",
   // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
   documents: ['src/**/*.{ts,tsx}'],
   generates: {

graphql.config.ts

@@ -1,22 +1,15 @@
-import dotenv from 'dotenv';
-dotenv.config();
 
 // .graphqlrc.ts or graphql.config.ts
 export default {
   projects: {
     directus: {
-      schema: process.env.GRAPHQL_ENDPOINT_WITH_TOKEN,
-      documents: ['src/**/*.{graphql,js,ts,jsx,tsx}'],
+      schema: "http://172.16.6.246:8055/graphql?access_token=WkVWFMiFcrjsXRZqsL30Cd4Sboe0DRk-",
+      documents: '**/*.{graphql,js,ts,jsx,tsx}',
       extensions: {
-        endpoints: {
-          default: {
-            url: process.env.GRAPHQL_ENDPOINT,
-            headers: {
-              Authorization: `Bearer ${process.env.API_TOKEN}`,
-            },
-          },
-        },
-      },
+        languageService: {
+          cacheSchemaFileForLookup: true
+        }
+      }
     },
   },
 };

package.json

@@ -2,6 +2,7 @@
   "name": "graphql-demo",
   "scripts": {
     "dev": "bun run --watch src/index.ts",
+    "dev-apollo": "bun run --watch src/index.apollo.ts",
     "compile": "graphql-codegen",
     "watch": "graphql-codegen -w"
   },
@@ -20,6 +21,7 @@
     "@apollo/client": "^3.13.1",
     "axios": "^1.7.9",
     "graphql": "^16.10.0",
+    "graphql-tag": "^2.12.6",
     "ofetch": "^1.4.1"
   }
 }

src/__generated__/fragment-masking.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | undefined
+): TType | undefined;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null
+): TType | null;
+// return nullable if `fragmentType` is nullable or undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
+): Array<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): Array<TType> | null | undefined;
+// return readonly array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return readonly array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

src/__generated__/gql.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
+ */
+type Documents = {
+    "\n    query get {\n        demo_projects {\n            id\n        }\n    }": typeof types.GetDocument,
+};
+const documents: Documents = {
+    "\n    query get {\n        demo_projects {\n            id\n        }\n    }": types.GetDocument,
+};
+
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function gql(source: string): unknown;
+
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n    query get {\n        demo_projects {\n            id\n        }\n    }"): (typeof documents)["\n    query get {\n        demo_projects {\n            id\n        }\n    }"];
+
+export function gql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;

src/__generated__/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

src/index.apollo.ts

@@ -1,32 +1,39 @@
 import { ofetch } from 'ofetch';
+// import { gql } from './__generated__';
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
 
-const gqlText = `
-query QueryAllUserProjects {
-    demo_users{
+const gqlText = gql(
+    `
+        query get {
+            demo_projects {
                 id
-        name
-        projects{
-            id
-            demo_projects_id{
-                id
-                name
             }
-        }
-    }
-    }
-`;
+        }`
+);
+
+const client = new ApolloClient({
+    uri: process.env.GRAPHQL_ENDPOINT_WITH_TOKEN, // 你的 GraphQL 服务器地址
+    cache: new InMemoryCache(), // 内置的内存缓存
+    // 可以添加更多选项，比如 headers、fetchPolicy 等
+  });
 
 (async () => {
-    const result = await ofetch("http://172.16.6.246:8055/graphql", {
-        method: 'POST',
-        headers: {
-            'Authorization': 'Bearer WkVWFMiFcrjsXRZqsL30Cd4Sboe0DRk-',
-            'Content-Type': 'application/json',
-        },
-        body: {
-            query: gqlText,
-            variables: {}
-        },
+    const result = await client.query({
+        query: gqlText
     })
-    console.log(JSON.stringify(result, null, 2));
-})();
+})
+
+// (async () => {
+//     const result = await ofetch("http://172.16.6.246:8055/graphql", {
+//         method: 'POST',
+//         headers: {
+//             'Authorization': 'Bearer WkVWFMiFcrjsXRZqsL30Cd4Sboe0DRk-',
+//             'Content-Type': 'application/json',
+//         },
+//         body: {
+//             query: gqlText,
+//             variables: {}
+//         },
+//     })
+//     console.log(JSON.stringify(result, null, 2));
+// })();

src/index.ts

@@ -1,20 +1,21 @@
 import { ofetch } from 'ofetch';
+import gql from 'graphql-tag'
+import { print } from 'graphql';
 
-const gqlText = `
-query QueryAllUserProjects {
-    demo_users{
+/** GraphQL */
+
+const gqlText = print(gql(`
+    query get {
+        demo_projects {
             id
-        name
-        projects{
-            id
-            demo_projects_id{
-                id
-                name
         }
-        }
-    }
-    }
-`;
+    }`
+));
+
+console.log(gqlText);
+
+// const gqlText = gql(
+//     `query {w
 
 
 (async () => {