How to pass headers to a custom fetcher

[ivorpad]

I'm using typescript-react-query and I found this issue https://github.com/dotansimha/graphql-code-generator/issues/7035 and as of now, it does not seem possible to pass headers to a custom fetcher.

According to the documentation, this is the custom fetch signature for non-hooks fetchers.

type MyFetcher<TData, TVariables> = (operation: string, variables?: TVariables, options?: 
RequestInit['headers']): (() => Promise<TData>)

The generated code, however, does not allow us to pass custom options to our fetcher:

export const useGetUserByIdQuery = <TData = GetUserByIdQuery, TError = unknown>(
  variables: GetUserByIdQueryVariables,
  options?: UseQueryOptions<GetUserByIdQuery, TError, TData>
) =>
  useQuery<GetUserByIdQuery, TError, TData>(
    ["getUserById", variables],
    fetcher<GetUserByIdQuery, GetUserByIdQueryVariables>(
      GetUserByIdDocument,
      variables,
     /* headers? */
    ),
    options
  );

[ivorpad]

Ok so I found a workaround that seems to be working quite well. I expose my fetcher with exposeFetcher: true and this will make the fetcher available to you:

useGetUserByEmailQuery.fetcher = (
  variables: GetUserByEmailQueryVariables,
  options?: RequestInit["headers"]
) =>
  fetcher<GetUserByEmailQuery, GetUserByEmailQueryVariables>(
    GetUserByEmailDocument,
    variables,
    options
  );

Then you can use it as you prefer:

useGetUserByEmailQuery
  .fetcher(
    { email: session.data?.user.email },
    {
      Authorization: `Bearer ${session.data?.access_token}`,
    }
  )()
  .then(({ users }) => {
    const userId = users?.[0].id;
    setUserId(userId);
  });