custom fetcher for next js and react-query

custom-fetcher.ts

import request from 'graphql-request'
import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
import {
  QueryClient,
  useMutation,
  useQuery,
  useQueryClient,
  type UseQueryResult
} from '@tanstack/react-query'

export const useGraphQLQuery = <TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
): UseQueryResult<TResult> => {
  return useQuery({
    queryKey: [(document.definitions[0] as any).name.value, variables],
    queryFn: async ({ queryKey }) => {
      return request(
        'http://localhost:3000/api/graphql',
        document,
        queryKey[1] ? queryKey[1] : undefined
      )
    }
  })
}

export const useGraphQLMutation = <TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends object | undefined ? [] : [TVariables]
) => {
  const mutation = useMutation<TResult, Error, TVariables>({
    mutationKey: [(document.definitions[0] as any).name.value, variables],
    mutationFn: async (variables: any) => {
      return request('http://localhost:3000/api/graphql', document, variables)
    }
  })

  return mutation
}

export const useQueryInvalidation = <TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
) => {
  const queryClient = useQueryClient()

  return () =>
    queryClient.invalidateQueries({
      queryKey: [(document.definitions[0] as any).name.value, variables]
    })
}

export const prefetchQuery = async <TResult, TVariables>(
  client: QueryClient,
  document: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
) => {
  await client.prefetchQuery({
    queryKey: [(document.definitions[0] as any).name.value, variables],
    queryFn: async ({ queryKey }) => {
      return request(
        'http://localhost:3000/api/graphql',
        document,
        queryKey[1] ? queryKey[1] : undefined
      )
    }
  })
}

export const useSetQueryData = <TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>
) => {
  const queryClient = useQueryClient()

  return (data: TResult, variables?: TVariables) => {
    queryClient.setQueryData(
      [(document.definitions[0] as any).name.value, variables],
      data
    )
  }
}