T
TanStack3y ago
complex-teal

Merge results from different keys

Hello. I have this custom hook: export const useTodos = (todoIds) => useQuery({ queryKey: ['todos', todoIds], queryFn: fetchTodos(todoIds) }) It will be called like this const { data: todos } = useTodos([1,2,3]) and const { data: todos } = useTodos([3,4]) My question is: How could I retrieve information for todo with id 3 later on (without hitting on server, todos are cached)? export const useTodo = (todoId) => ? I'd like to forward to useTodos with a filter, but that's not going to work as query key will be [3] instead of [1,2,3] or [3,4] Should I use one query key for all my todos and send previous todos as the initialData , and merge all the todos on success? Thanks for your advice
5 Replies
other-emerald
other-emerald3y ago
useQueries could be an option for you
complex-teal
complex-tealOP3y ago
I'm not sure it is. useQueries will fire multiple queries. What I need is to run a query with different context (ids), and then be able to retrieve the data for 1 id
optimistic-gold
optimistic-gold3y ago
with what you're showing, you only have two cache entries. If you don't know where id 3 lives, you probably can't find it. Also, id 3 is stored twice, so it won't get deduplicated what you'd want is to store each id individually, but still aggregate them in a single hook and request. dataloader can do this: https://github.com/TanStack/query/discussions/365#discussioncomment-1867860
GitHub
Batching · TanStack query · Discussion #365
So yesterday I wrote up some thoughts on batching (see https://github.com/tannerlinsley/react-query/discussions/364), but this was too eager of me. For proper support of batching, it would be reall...
complex-teal
complex-tealOP3y ago
I was looking for something like this. That's great! thanks for you reply and your work on the library

Did you find this page helpful?