Questions about the useGraphQL helper function

[pongells]

In https://the-guild.dev/graphql/codegen/docs/guides/react-vue#appendix-i-react-query-with-a-custom-fetcher-setup we see the following example of hook:

import request from 'graphql-request'
import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
import { useQuery, type UseQueryResult } from '@tanstack/react-query'
 
export function useGraphQL<TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>,
  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
): UseQueryResult<TResult> {
  return useQuery([(document.definitions[0] as any).name.value, variables], async ({ queryKey }) =>
    request(
      'https://swapi-graphql.netlify.app/.netlify/functions/index',
      document,
      queryKey[1] ? queryKey[1] : undefined
    )
  )
}

Two questions:

1. when I try to create it in my code I get the following:

ESLint: The following dependencies are missing in your queryKey: document(@tanstack/query/exhaustive-deps)

is this something I should Ignore?

2. how are variables used in the actual query? looks like they are only added to the key :/

[n1ru4l]

Regarding (1): Since the document never changes at runtime, you can simply ignore this issue and add an ignore! Would you like to send a PR for updating this in the docs?

Regarding (2): AFAIK queryKey[1] should be the variables.

We have a full runnable example over here: https://github.com/dotansimha/graphql-code-generator/tree/master/examples/react/tanstack-react-query

[pongells]

Thanks!