Patterns for lists and their individual entities

[adamhp]

Firstly, React Query has been great to use. Hats off to the creators and maintainers.

I'm curious what the best pattern is for the typical REST CRUD scenario of fetching a list of entities, but then acting on individual entities.

Take a simple example:

GET /posts

[
   {
      "id": 0,
      "title": "React Query is great!"
   },
   {
      "id": 1,
      "title": "Blog Post"
   },
]

and so on...

I wrap this in a nice little hook usePosts() and usePost(<id>), and manually handle setting the ["posts", <id>] key whenever I retrieve the full list, so that individual posts are cached, and when I visit their individual page, for example, they already have data.

Let's say I have 1000 posts, and I'm displaying them in a data table, with buttons on each row to delete that individual post. I delete a post, but I don't want to invalidate the entire 1000 posts query, I just want to "invalidate" that single query.

I've attempted to just manually set the query data on mutation success for the delete mutation, but it doesn't seem to update components that are using the "posts" query (e.g. the data table).

Is there a common pattern for this, and any anti-patterns I should avoid?

EDIT: Small edit, but question remains if there's a better way or not:

I was able to get the manual update working at least (this is in 'onSuccess' of the delete mutation):

const posts = queryClient.getQueryData([QUERY_KEYS.POSTS]);
queryClient.setQueryData([QUERY_KEYS.POSTS], () =>
  devices.filter((post) => post.id !== id),
);

I'm now having a bit of trouble updating the bulk key when I add a new item.

Let's say I add a new post through a CRUD UI. Is there a good pattern for adding a single item to the 1000 posts, without triggering an invalidation and refetch? Currently trying this, but it doesn't seem to notify any subscribed components to update their display (e.g. the data table doesn't update when adding a post).

function addItemToCache(queryKey, identifier, object) {
  const [k, v] = Object.entries(identifier)[0];
  const data = queryClient.getQueryData([queryKey]);
  data.push(object);
  queryClient.setQueryData([queryKey], () => data);
  queryClient.setQueryData([queryKey, identifier], () => object);
  queryClient.invalidateQueries([queryKey], {
    exact: true,
    refetchActive: false,
  });
  console.log();
}

Perhaps I need 'data' to be immutable and create a new array?

Edit 2: Thinking out loud here, sorry! I did try treating it as immutable and did

queryClient.setQueryData([queryKey], () => [...data, object]);

Seems like that could create some issues at scale but at that point I'll probably be doing pagination or something else to limit round trips. Still curious how others approach this!

[TkDodo]

yes, you need to work immutably. getQueryData followed by .push and setQueryData will mutate the cache in place and we will bail out due to referential equality. That is pretty standard react behaviour - you would get the same when working with react state.