GraphQL CodeGen + React Query + TypeScript

codegen.yaml

schema: http://localhost:3000/graphql
documents: "./src/**/*.graphql"
generates:
  ./src/graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      fetcher: "./utils#fetcher"

package.json

{
  "scripts": {
    "generate": "yarn add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query -D && graphql-codegen && yarn remove @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query"
  }
}

utils.ts (fetcher)

import { GraphQLClient } from "graphql-request";

export const client = new GraphQLClient("http://localhost:3000/graphql");

export const fetcher = <TData, TVariables>(
  query: string,
  variables?: TVariables,
  headers?: RequestInit["headers"]
) => {
  return async (): Promise<TData> =>
    client.request<TData, TVariables>(query, variables, headers);
};