Next 13 - Pass NextFetchRequestConfig to custom fetcher

[zecka]

Hello, I'm using graphql-code-generator on project with Next 13.
I'm using app router and I want to take leverage of new fetch extended api

So I update my previous custom fetcher to allow includes next object on option parameter (NextFetchRequestConfig)

export function customFetcher<TData, TVariables extends { preview?: boolean | null }>(
    query: string,
    variables?: TVariables,
-   options?: RequestInit['headers'],
+   options?: RequestInit,
  )

But after this change the generated code seems not take into account the update options type.
Generated code still look like that

useDemoQuery.fetcher = (variables: CtfPageQueryVariables, options?: RequestInit['headers']) => ...

instead of

useDemoQuery.fetcher = (variables: CtfPageQueryVariables, options?: RequestInit) => ...

So, how to pass the new NextFetchRequestConfig object in customFetcher parameter ?

---

Bellow my config and fetcher code

codegen.ts

export const config: CodegenConfig = {
  overwrite: true,
  ignoreNoDocuments: true,
  schema: [
    {
      [fetchConfig.endpoint]: fetchConfig.params,
    },
  ],
  generates: {
    './src/': {
      documents: ['./src/**/*.graphql'],
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.ts',
        baseTypesPath: 'lib/__generated/graphql.types.ts',
        folder: '__generated',
      },
      plugins: [
        'typescript-operations',
        'typescript-react-query',
      ],
      config: {
        exposeQueryKeys: true,
        exposeFetcher: true,
        rawRequest: false,
        inlineFragmentTypes: 'combine',
        skipTypename: false,
        exportFragmentSpreadSubTypes: true,
        dedupeFragments: true,
        preResolveTypes: true,
        withHooks: false,
        fetcher: '@src/lib/fetchConfig#customFetcher'
      },
    },
  },
};

src/lib/fetchConfig.ts

  export function customFetcher<TData, TVariables extends { preview?: boolean | null }>(
    query: string,
    variables?: TVariables,
    options?: RequestInit,
  ) {
    return async (): Promise<TData> => {
      const res = await fetch(fetchConfig.endpoint as string, {
        method: 'POST',
        ...options?.headers,
        ...(variables?.preview ? fetchConfig.previewParams : fetchConfig.params),
        body: JSON.stringify({ query, variables }),
        next: options?.next
      });
  
      const json = await res.json();
      if (json.errors) {
        const { message } = json.errors[0];
  
        throw new Error(message);
      }
  
      return json.data;
    };
  }
  

[MuttakinHasib]

I don't know why it's not exposing the fetcher. @zecka did i make any wrong here?

codegen.ts

import { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
  schema: `apps/api/src/**/*.gql`,
  documents: 'libs/graphql/**/*.gql',
  generates: {
    'libs/graphql/src/graphql/index.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-query',
      ],
      config: {
        fetcher: {
          func: 'ui#useFetcher',
          isReactHook: true,
        },
        pureMagicComment: true,
        noHOC: true,
        noComponents: true,
        noNamespaces: true,
        withHooks: true,
        withSubscriptionHooks: true,
        exposeQueryKeys: true, // We use it as the key for the react query without having to manually give a string.
        exposeMutationKeys: true, // We use it as the key for the react query without having to manually give a string.
        exposeFetcher: true, // exposes a fetch to use for SSR,
      },
      hooks: {
        afterOneFileWrite: ['prettier --write'],
      },
    },
  },
};

export default config;

libs/ui/hooks/useFetcher.ts

import { headers } from 'next/headers';

export const useFetcher = <TData, TVariables>(
  query: string,
  options?: RequestInit['headers']
): ((variables?: TVariables) => Promise<TData>) => {
  const headersInstance = headers();

  return async (variables?: TVariables) => {
    const res = await fetch(process.env.NX_API_URL + '/graphql', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
        cookie: headersInstance.get('cookie') || '',
        ...options,
      },
      body: JSON.stringify({
        query,
        variables,
      }),
    });

    const json = await res.json();

    if (json.errors) {
      const { message } = json.errors[0] || {};
      throw new Error(message || 'Error…');
    }

    return json.data;
  };
};