-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Add type to react-query query key - Attempt round 2! #3170
Conversation
I've started to change across the react-query query keys to use an object that now also distinguishes between `query` and `infinite` query types in all the appropriate methods. Initially I am trying a `[{path, input, type}]` structured key!
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is great, but I would love some more testing. Happy to merge as-is for now though!
- Make sure that
invalidate()
orreset
etc will invalidate both queries and infinite queries. Only need to test 1 I think, they are exactly the same
@@ -499,7 +502,7 @@ export const appRouter = router({ | |||
The query key used for `trpc.user.byId.useQuery({ id: 10 })` would change: | |||
|
|||
- Key in V9: `["user.byId", { id: 10 }]` | |||
- Key in v10:`[["user", "byId"],{ id:10 }]` | |||
- Key in v10:`[["user", "byId"],{ input: { id:10 }, type: 'query' }]` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh nice catch
@@ -301,7 +301,7 @@ export function createHooksInternal< | |||
(...args: any[]) => { | |||
const [queryKey, ...rest] = args; | |||
return queryClient.invalidateQueries( | |||
getArrayQueryKey(queryKey), | |||
getArrayQueryKey(queryKey, 'any'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is prefect and that we don't need to allow granular invalidation for now, I don't see why anyone would not want to invalidate the same query across both methods of fetching it.
@@ -312,23 +312,25 @@ export function createHooksInternal< | |||
const [queryKey, ...rest] = args; | |||
|
|||
return queryClient.refetchQueries( | |||
getArrayQueryKey(queryKey), | |||
getArrayQueryKey(queryKey, 'any'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is prefect and that we don't need to allow granular invalidation for now, I don't see why anyone would not want to refetch the same query across both methods of fetching it.
...rest, | ||
); | ||
}, | ||
[queryClient], | ||
), | ||
cancelQuery: useCallback( | ||
(pathAndInput) => { | ||
return queryClient.cancelQueries(getArrayQueryKey(pathAndInput)); | ||
return queryClient.cancelQueries( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is prefect and that we don't need to allow granular invalidation for now, I don't see why anyone would not want to cancel the same query across both methods of fetching it.
Closes #3128
transferred from #3165
🎯 Changes
This pull request alters the react-query
queryKey
to also include thetype
of the query (query
orinfinite
) as well as placing the input within an object alongside it.New key Structure:
Example:
This change will mean that an
infinite
query and aquery
of the same endpoint will have different entries within the cache, which is required as the data structures are different!!This key structure also maintains the ability to invalidate specifically
query
's orinfinite
's across entire routers as well as filtering queries using their input when interacting with the react-queryqueryClient
directly (Escape Hatch! 👨🚒).🔨 Possible improvements
Currently the exposed
invalidate()
function on a router or on a leaf node will invalidate bothqueries
andinfiniteQueries
with no way to filter. The ability to specify onlyqueries
orinfiniteQueries
could be added at a later date but I think for now this should be fine and in line with the philosophy of being indiscriminate added in #3124✅ Checklist