React Query useInfiniteQuery invalidate individual items

[Saikedo]

How can I invalidate a single item when working with useInfiniteQuery? Here is an example that demonstrates what I am trying to accomplish.

Let`s say I have a list of members and each member has a follow button. When I press on to follow button, there is a separate call to the server to mark that the given user is following another user. After this, I have to invalidate the entire infinite query to reflect the state of following for a single member. That means I might have a lot of users loaded in infinite query and I need to re-fetch all the items that were already loaded just to reflect the change for one item.

I know I can change the value in queryClient.setQueryData when follow fetch returns success but without following this with invalidation and fetch of a member, I am basically going out of sync with the server and relying on local data.

Any possible ways to address this issue?

Here is a reference UI photo just in case if it will be helpful.

[TkDodo]

The refetching of infinite query will always refetch all pages. But I’ve heard the need for a more granular refetch often now. Do you have a proposal how that api could look?

[Saikedo]

@TkDodo I just realized some info was missing from my above-proposed solution. For that, we can basically have some mechanism to indicate the pageOffset and size for each individual item so that when you invalidate, that data can be used to just fetch that one member and update the item on whatever page it`s located in.

[TkDodo]

that data can be used to just fetch that one member and update the item on whatever page it`s located in.

how would you fetch only one member? The minimum thing you’d need to fetch is one page...

[EQuimper]

@TkDodo i like what you say here. I do have this issue too. And feel like if we can map like a simple get request to each item would be nice. Like you have a methods where we show the http call to get a single item with the item id. And if we invalidate the item from the list the list call this get call to update the given item. Maybe I’m wrong with that. But I feel if we dont use a normalize cache this is what we can get the closer and also with the idea of making sure we are sync with the backend.

[Justinohallo]

Looking for a similar update as well.

I have a list of calendar events that renders a calendar. When I update one of these events, I am required to refetch all of my pages.

What if I could identify the page that I want to be re-fetched, rather than the entire query? So I would know that my data is on an individual page, or spans multiple pages and could simply request a re-fetch on those pages.

[TkDodo]

This sounds a bit like my first proposal, doesn’t it?

for your use-case, would it not also work to return the updated item data directly from the mutation and just putting it in the cache at the correct position with setQueryData? That sounds a bit easier than refetching

[dan-dr]

Came across the same issue. Gonna start a new reply for a different soltion than @TkDodo proposed.
My first thought was similar to @Saikedo - having some sort of sub query, but I think that required too many implementation details to leak, and could be hacky.

Basically, I don't think the invalidation implementation is the problem as much as there's a a missing mapping between queries. If we can define query relationships, whether in the query or client or cache, we can use that to auto follow invalidations/cache changes.

Something like this:

interface Data {
 id: string,
 name: string
}

fetchList: () => Data[]

useInfiniteQuery('listQuery', fetchList, {
 mapping: [
   (listData) => {
          return listData.flatMap(data => {
                     key: ['itemQuery', data.id],
                     getData: (listData) => listData.flat().find(item => item.id === data.id),
                     setData: (itemData:Data) => // find the item in listData, change it and return the new Data[][]
                    }
                  )
     }
 ]
})

really quick mock up, its basically some sort of two way binding: when this query is fetched, update that query data, and vice versa, so you always have the freshest data.

I actually kinda do this but just one way right now - I iterate on the list and setQueryData(['todos', todoId])

[TkDodo]

have a look at the PR I've opened and let me know what you think: #2557