queryKey not recognized or failing when using addInfiniteQuery: true

[synasapmob]

summary

I am migrating to React Query (v5) and implementing infinite scroll. I’ve encountered a very strange bug,
when I include the queryKey, the query fails to function as expected. I'm not certain if this is a regression in v5 or if my configuration is incorrect (image 1).

Note: queryKeyHashFn is still working and triggers no errors (image 2).

versions

package.json

    "graphql": "^16.11.0",
    "graphql-request": "^7.3.1",
    "@graphql-codegen/cli": "^6.0.1",
    "@graphql-codegen/typescript-operations": "^5.0.2",
    "@graphql-codegen/typescript-react-query": "^6.1.1",

codegen.ts

  config: {
    fetcher: "graphql-request",
    addInfiniteQuery: true,
    exposeMutationKeys: true,
    withHooks: true,
    exposeQueryKeys: true,
    exposeFetcher: true,
    legacyMode: false,
   }

[sunnypatell]

@synasapmob this is a known operator precedence bug in the codegen plugin. when your query has optional variables, the generated infinite query hook produces:

queryKey: optionsQueryKey ?? variables === undefined ? ['Query.infinite'] : ['Query.infinite', variables]

due to JS precedence, this parses as (optionsQueryKey ?? (variables === undefined)) ? [...] : [...] instead of optionsQueryKey ?? (variables === undefined ? [...] : [...]). your custom queryKey gets swallowed because the ?? resolves to a truthy value before the ternary evaluates.

regular queries aren't affected because they use a different codegen path that doesn't destructure queryKey from options. queryKeyHashFn still works because it's passed through via ...restOptions and never touches the queryKey resolution.

there's an open fix PR #1092 that adds the missing parentheses (single character change in fetcher.ts), but it hasn't been merged yet.

workaround: patch the package to add the parentheses yourself:

# if using pnpm
pnpm patch @graphql-codegen/typescript-react-query
# in the patched file, find generateInfiniteQueryFormattedParameters in fetcher.js
# change: queryKey: optionsQueryKey ?? ${queryKey},
# to:     queryKey: optionsQueryKey ?? (${queryKey}),
pnpm patch-commit @graphql-codegen/typescript-react-query

or just use queryKeyHashFn as you've been doing since it sidesteps the bug entirely.

ref: issue #786 | fix PR #1092 | MDN nullish coalescing precedence

[synasapmob]

excellent contribution, I hope PR will be merge ASAP