$ npm create vite@latest
Select a framework: › React
Select a variant: › TypeScript + SWC

$ npm i graphql
$ npm i -D @graphql-codegen/cli

$ npx graphql-codegen init
 What type of application are you building?: Application built with React
? Where is your schema?: http://localhost:4000/graphql
? Where are your operations and fragments?: src/**/*.graphql
? Where to write the output: src/gql/
? Do you want to generate an introspection file?: Yes
? How to name the config file?: codegen.ts
? What script in package.json should run the codegen?: codegen
etching latest versions of selected plugins...
    Config file generated at codegen.ts
      $ npm install
    To install the plugins.
      $ npm run codegen
    To run GraphQL Code Generator.
# 必要なパッケージをインストール
$ npm install

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "http://localhost:4000/graphql",
  documents: "src/**/*.graphql",
  generates: {
    "src/gql/": {
      preset: "client",
      plugins: []
    },
    "./graphql.schema.json": {
      plugins: ["introspection"]
    }
  }
};

export default config;

const config: CodegenConfig = {
  overwrite: true,
- schema: 'http://localhost:4000/graphql',
+ schema: [
+   {
+     'http://localhost:4000/v1/graphql': {
+       headers: {
+         'x-hasura-admin-secret': 'admin_secret'
+       }
+     }
+   }
+ ], 
  documents: 'src/**/*.graphql',
  // …
}

HASURA_URL=https://hasura.XXXXX.dev/v1/graphql
HASURA_GRAPHQL_ADMIN_SECRET=your_secret

const config: CodegenConfig = {
  overwrite: true,
  schema: [
    {
-     'http://localhost:4000/v1/graphql': {
+     [process.env.HASURA_URL ?? "http://localhost:4000/v1/graphql"]: {
        headers: {
-        'x-hasura-admin-secret': 'admin_secret'
+        'x-hasura-admin-secret': process.env.HASURA_GRAPHQL_ADMIN_SECRET ?? '',
        },
      },
    },
  ],
  documents: 'src/**/*.graphql',
  // …
}

$ npm run codegen --check
> graphql-codegen@0.0.0 codegen
> graphql-codegen --config codegen.ts
✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to src/gql
✖
      Failed to load schema from http://localhost:4000/v1/gr…

"scripts": {
- "codegen": "graphql-codegen --config codegen.ts"
+ "codegen": "graphql-codegen --require dotenv/config --config codegen.ts"
},

$ npm run codegen --check
> graphql-codegen@0.0.0 codegen
> graphql-codegen --require dotenv/config --config codegen.ts

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to src/gql/
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the fo…
      - src/**/*.graphql
    ◼ Generate
  ❯ Generate to ./graphql.schema.json
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the fo…
      - src/**/*.graphql
    ◼ Generate

query GetSelf($email: String!) {
  users(email: $mail) {
    id,
    email,
    displayName
  }
}

$ npm run codegen
> graphql-codegen@0.0.0 codegen
> graphql-codegen --require dotenv/config --config codegen.ts

✔ Parse Configuration
✔ Generate outputs

|- graphql.schema.json
|- /src/gql/
    |- fragment-masking.ts
    |- graphql.ts
    |- gql.ts
    |- index.ts

export * from "./fragment-masking";
export * from "./gql";

$ npm i -D @graphql-codegen/typescript-react-query

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: [
    {
      [process.env.HASURA_URL ?? 'http://localhost:4000/v1/graphql']: {
        headers: {
          'x-hasura-admin-secret':
            process.env.HASURA_GRAPHQL_ADMIN_SECRET ?? '',
        },
      },
    },
  ],
  documents: 'src/**/*.graphql',
  generates: {
    'src/types/gql/': {
      preset: 'client',
-      plugins: [],
+     plugins: [
+       'typescript',
+       'typescript-operations',
+       'typescript-react-query',
+     ],
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

export default config;

$ npm run codegen

// graphql.ts
function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
  return async (): Promise<TData> => {
    const res = await fetch(endpoint, {
      method: 'POST',
      ...requestInit,
      body: JSON.stringify({ query, variables }),
    });
    const json = await res.json();
    if (json.errors) {
      const { message } = json.errors[0];
      throw new Error(message);
    }
    return json.data;
  }
}

// 略 …

// query GetSelf に対応する関数が生成されている
export const useGetSelfQuery = <
      TData = GetSelfQuery,
      TError = unknown
    >(
      dataSource: { endpoint: string, fetchParams?: RequestInit },
      variables: GetSelfQueryVariables,
      options?: UseQueryOptions<GetSelfQuery, TError, TData>
    ) =>
    useQuery<GetSelfQuery, TError, TData>(
      ['GetSelf', variables],
      fetcher<GetSelfQuery, GetSelfQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, GetSelfDocument, variables),
      options
    );

$ npm i @tanstack/react-query

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: [
    {
      [process.env.HASURA_URL ?? 'http://localhost:4000/v1/graphql']: {
        headers: {
          'x-hasura-admin-secret':
            process.env.HASURA_GRAPHQL_ADMIN_SECRET ?? '',
        },
      },
    },
  ],
  documents: 'src/**/*.graphql',
  generates: {
    'src/types/gql/': {
      preset: 'client',
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-query',
      ],
+     config: {
+       fetcher: 'graphql-request',
+     },
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

export default config;

$ npm run codegen

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'MY_SCHEMA_PATH',
  documents: './src/**/*.graphql',
  generates: {
    './generates.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-query'],
      config: {
        fetcher: 'graphql-request'
      }
    }
  }
}
export default config

import { useMyQuery } from './generated'
import { client } from './my-graphql-request-client'
 
export const MyComponent = () => {
  const { status, data, error, isFetching } = useMyQuery(client, {})
}

$ npm uninstall @graphql-codegen/typescript-react-query

const config: CodegenConfig = {
  overwrite: true,
  schema: [ 略 ],
  documents: 'src/**/*.graphql',
  generates: {
    'src/types/gql/': {
      preset: 'client',
-     plugins: [
-       'typescript',
-       'typescript-operations',
-       'typescript-react-query',
-     ],
+     plugins: [],
-     config: {
-       fetcher: 'graphql-request',
-     },
+     config: {},
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

$ npm i -D @graphql-codegen/client-preset-swc-plugin

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
- plugins: [react()], 
+ plugins: [
+   react({
+     plugins: [
+       [
+         '@graphql-codegen/client-preset-swc-plugin',
+         {
+           artifactDirectory: './src/gql',
+           gqlTagName: 'graphql',
+         },
+       ],
+     ],
+   }),
+ ],
});

$ npm run codegen                                   
> graphql-codegen@0.0.0 codegen
> graphql-codegen --require dotenv/config --config codegen.ts
✔ Parse Configuration
✔ Generate outputs

$ npm i graphql @tanstack/react-query graphql-request
$ npm i -D @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript-react-query

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: [
    {
      [process.env.HASURA_URL ?? 'http://localhost:4000/v1/graphql']: {
        headers: {
          'x-hasura-admin-secret':
            process.env.HASURA_GRAPHQL_ADMIN_SECRET ?? '',
        },
      },
    },
  ],
  documents: 'src/**/*.graphql',
  generates: {
    // preset-client を使わない場合は出力はファイル名で指定する
    'src/types/generates.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-query'],
      config: {
        fetcher: 'graphql-request',
        isReactHook: true,
        exposeQueryKeys: true
      }
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

export default config;

$ npm run codegen

Authorization: Bearer <JWT>

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>My App</h1>
      <MyComponent />
    </QueryClientProvider>
  );
}

export { App };

import { GraphQLClient } from 'graphql-request';
const endpoint = import.meta.env.VITE_HASURA_URL ?? '';

export const getGraphQLClient = (token?: string) => {
  const headers = token ? { authorization: `Bearer ${token} } : undefined;
  const client = new GraphQLClient(endpoint, {
    headers,
  });

  return client;
};

import { useQuery } from '@tanstack/react-query';
// codegen で生成された {QueryName}Document を使用する
import { GetUserDocument } from './gql/graphql';
import { useAuth } from './hooks/useAuth';
import { getGraphQLClient } from './graphqlClient';

function MyComponent(): JSX.Element {
  const { token, user } = useAuth();
  const client = getGraphQLClient(token);
  const { data, isLoading, isError, error } = useQuery(
    [`getUser`, user.email],
    ({ queryKey }) => client.request(GetUserDocument, { email: queryKey[1] ?? '' }),
  );

  if (isLoading) { return <div>Loafing...</div> }
  if (isError) {
    console.log({error});
    return <div>Error</div>
  }
  return {
    <div>
      User: { data ? <UserInfo {…data} /> : <span>No User</span> }
    </div>
  }
}