add useSharedKey option to @graphql-codegen/typescript-react-query #1281
Description
Is your feature request related to a problem? Please describe.
hello lovely people at the guild i have proposal that i would love to work on for @graphql-codegen/typescript-react-query
Problem
Currently, each generated React Query hook uses its own unique query key, e.g.:
- ["GetMercahntsDetailsPage", { input: { merchantId: "1283" } }]
- ["GetMercahntsTable"]
To invalidate them together, you must call multiple invalidateQueries.
If you use the plugin options exposeQueryKeys or exposeMutationKeys, each operation still produces its own distinct key, so grouped invalidation remains cumbersome.
like this:
await Promise.all([
queryClient.invalidateQueries({ queryKey: useGetMerchantsTableQuery.getKey() }),
queryClient.invalidateQueries({ queryKey: useGetMerchantDetailsQuery.getKey() }),
]);
Describe the solution you'd like
Proposal
Add an optional plugin config property:
typescript-react-query:
useSharedKey: true
When enabled, generated hooks would prepend the shared prefix to all generated hooks' keys:
["merchants", "GetmerchantDetailsPage", { input: { merchantId: ["1283"] } }]
["merchants", "GetmerchantsTable"]
and then maybe we can invalidate using
queryClient.invalidateQueries({ queryKey: MerchantRootQuery.getKey() }),
// MerchantRootQuery.getKey() would be the common resource key
Benefits
- Simplifies cache invalidation (e.g. queryClient.invalidateQueries(['merchants']))
- Helps smaller projects manage grouped data
- Better DX
Trade-offs
- Broader invalidations → may trigger extra refetches on larger scale
💬 Maintainer Feedback
Hi @dotansimha @ardatan — I’d love your thoughts on this!
Does this direction make sense?
Describe alternatives you've considered
No response
Any additional important details?
i was inspired by the factory pattern mentioned here which i already use in production