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: overwrite query key on trpc.useQuery options #4989
Comments
Been bumping into the same situation, where I'm fetching things based on coordinates. But don't need to store all of the data in the cache |
I'm really interested in this feature/bug and would love to contribute, will take a look! |
Based, on the two alternative solutions, I believe adding a new key |
API-wise, I think something like |
So far this looks a lot more complex to use than const query = useQuery()
useEffect(() => {
query.refetch()
}, [lastUpdatedAt]) I don't personally think we should be considering features that can be easily and more simply implemented in userland Modifying the query key in place also has the impact that using the query in two different places without the additions could result in the same data landing in your cache twice and only one copy getting updated |
Hard disagree. The abstraction over cache keys is leaking. Utilizing other hooks to deal with the missing feature is not cleaner calling code by any stretch. |
I'm all for finding a clean way to solve this.
This approach seems like a good way to override the qk |
What you mentioned makes sense but it'd be great if the qk was open for modification. This wouldn't be done very often but it's very convenient to have this escape hatch when we need it. |
@Nick-Lucas this is one of the biggest reasons for overriding the query key. function Todos() {
const [filter, setFilter] = React.useState('')
const { data } = useQuery({
queryKey: ['todos', filter],
queryFn: () => fetchTodos(filter),
// ⬇️ disabled as long as the filter is empty
enabled: !!filter
})
return (
<div>
// 🚀 applying the filter will enable and execute the query
<FiltersForm onApply={setFilter} />
{data && <TodosTable data={data}} />
</div>
)
} edit: trpc seems to handle the enabled prop properly so modifying the qk directly isn't necessary. |
Describe the feature you'd like to request
I have query procedure
listPosts
which accepts some genericparameters
and and optionallastUpdatedAt
timestamp.The query key looks something like this:
This query is expensive, so I cache it also on the server with the given
parameters
as caching key in case multiple clients request the same data. When I receive the sameparameters
on the server, I return the data from the cache.Now I need some way for clients to force a refresh on the server returning new data instead of cached data for the same
parameters
. So in this case, I query thelistPosts
with an optionallastUpdatedAt
timestamp. The query key is now:The servers receives the same
parameters
as before and finds the data in the cache, but thelastUpdatedAt
timestamp is greater than the cached timestamp. So it runs the expensive operation on the server and returns the new data (and caches it).Now I have two query keys on the client which are logically the same. I must update the query data of key 1 and key 2 with new data, because query key 2 is only temporary to trigger a server cache-invalidation. The
lastUpdatedAt
that I sent in query key 2 is a local state that will get lost after page navigation. When I later get back to theListPosts
page, it will use query key 1 again with data which was maybe set by query key 2.I'm currently using
onSuccess
ofuseQuery
to set the query data of all query keys matching the input withoutlastUpdatedAt
:That means it sets the data for query key 1 (without
lastUpdatedAt
) and 2 (withlastUpdatedAt
).However,
onSuccess
was deprecated in React Query v5, so I'm looking for an alternative option.Allowing to overwrite the generated tRPC query key would make it possible to send different inputs to the server but with the same query key.
Describe the solution you'd like to see
I would like to overwrite the query key via the tRPC query options:
That means the following two inputs produce the same query key:
By default, React Query would return the data from the query cache for both inputs. So we would need to use the
refetch()
function to manually trigger a refetch to the server with new input.Describe alternate solutions
useQuery.onSuccess()
was deprecated in v5, but could be implemented again with auseEffect()
with dependency touseQuery.data
useQuery
directly with the proxy client and change the query keyAdditional information
No response
👨👧👦 Contributing
Funding
The text was updated successfully, but these errors were encountered: