How to use useMutation with useInfiniteQuery

[DEVfancybear]

How do I use useMutation to update, delete data with Load More / Infinite Scroll useInfiniteQuery?

[TkDodo]

Can you please be a bit more specific with the question. What are you having troubles with, what have you already tried? Otherwise, the generic answer would be: via invalidateQueries or via setQueryData.

[DEVfancybear]

Hmm, I have a flat list with about 1000 items divided into 100 pages, how can I use useMutation, queryClient to update, delete items in the flat list and still keep scrolled page position without reloading the page from scratch?

[TkDodo]

so, when your mutation returns an item to update in the infinite list, you can just do that with setQueryData as described here: https://react-query.tanstack.com/guides/updates-from-mutation-responses

The structure is a bit different (nested arrays), so something like this:

useMutation(updateFn, {
  onSucess: (newEntry) => {
    const infiniteData = queryClient.getData('myInfiniteQueryKey')
    if (infiniteData) {
        queryClient.setQueryData(
          'myInfiniteQueryKey', 
          { ...infiniteData, pages: infiniteData.pages.map(page => page.map(entry => entry.id === newEntry.id ? { ...entry, ...newEntry } : entry ))
    }
  }

not sure if the code is 100% correct but it's mainly about finding the entry to update and then update it. deletion works similar.