Keys for array of items

[jmbldwn]

Is there any mechanism to relate a query for a list of items to the items themselves?

If I have query to fetch an array of items like: useQuery('items', fetchItems), I assume the cache holds one entry, which is basically 'items' -> [...items].

If I edit one item, instead of invalidating 'items', I'd like to only invalidate ['items', {id}] and replace with the new value (and rollback if there's an error).

In this way, I can do only one fetch to get the whole list, and individual updates only affect one item.

Is there a way I can have the fetch of an array of items get stored in cache as an array keys instead of one key?

I know I'm missing something here, but there isn't much point to invalidating a single item if I would only then refetch the entire list.

[cherniavskii]

Sure, you can use setQueryData - see https://react-query.tanstack.com/docs/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo

Except in you case you'll need to iterate over old items array to find item by id and replace it

[cole-robertson]

@tannerlinsley I am using the first of your suggested methods here with v2. I am running into a problem with the dispatch of setQuery blocking my UI. see issue here: #1467

Is there a suggested method for batching these setQueryCache calls as to not be render blocking? Thank you.

[tannerlinsley]

We'll discuss in that issue :)

[Jake-Prentice]

@tannerlinsley since this was a while ago, I want to ask if there is any better way of doing this in v3

[fnky]

I don't know if I am missing something. I have tried both proposed solutions that @tannerlinsley provided in v3 (as well as documented).

My specific use-case is having only a single endpoint to get a list of items (/items) and would like to map those items to their own cache, so that I could use the cache similarly.

A benefit of this, is that it becomes very easy to update the query to support endpoint for individual items (/items/:id) in the future.

With setQueryData I iterate over each item in the result and map it to ["item", itemId]. However, it'll refetch items at some point, overriding the mapped cache with the result of all items -- doesn't work without a queryFn so can't use useQuery for individual items.

The behavior of initialData is similar. It fetches all items at some point, overwriting the initial data (obviously). initialStale is no longer accepted for useQuery in v3.

A way this could be solved is to map both data to set the cache as well as the result data of the singular item query, but that doesn't feel like a great solution imo.

I don't know if this is already possible, but the idea is a map function to map query data to both cache and what the result data will be after refetches, similar to the initialData API:

const result = useQuery(['todos', todoId], () => fetch('/todos'), {
  mapData: () => {
    const todos = queryClient.getQueryData("todos");
    const todo = todos?.find(todo => todo.id === todoId);
    return todo;
  }
});

// result.data => todo (both from cache and refetches)

[TkDodo]

You can make a custom hook using the select option to get something similar. I’ve recently written about that: https://tkdodo.eu/blog/react-query-data-transformations