How to make Optimistic Updates in useInfiniteQuery

[hamzamongam]

How to make Optimistic Updates in useInfiniteQuery

[jayporta]

How to make Optimistic Updates in useInfiniteQuery

I have the same question. I've read the docs and optimistic updates with useQuery is pretty straight forward. But for useInfiniteQuery is it best use of react-query to write our own function to traverse each page their respective subarrays (if any) or is there something already built in for this?

Sorry, this isn't an answer but I wanted to +1 this and add some supplementary detail to the question.

But here's what I did (assume newMessage is the optimistically updated message)

  const newPages = oldData.pages.map(
    (page: { results: Message[] }) => ({
      ...page,
      results: page.results.map((oldMessage) =>
        message.id === id ? newMessage : oldMessage
      ),
    })
  );

[ansh]

@TkDodo How can I get typescript to work with this? Right now my old variable would have a type of unknown?

[TkDodo]

@ansh by providing a generic to setQueryData:

queryClient.setQueryData<InfiniteData<Array<Todos>>(old => ...)

InfiniteData can be imported from react-query

[ansh]

Thanks! Works. Is a big ugly but works.

[raulsanchez1024]

For anyone viewing this after the v4 update... I was able to get this working with the followin

    onSuccess: data => {
      queryClient.setQueryData<InfiniteData<Array<Item>>>(['homescreen'], oldData => {
        const newData = oldData?.pages.map(page =>
          page.map(item => {
            if (item.id === data.itemId) {
              return {
                ...item,
                urls: [...item.urls, data],
              };
            } else {
              return item;
            }
          })
        );
        return {
          ...oldData,
          pages: newData,
        };
      });
    },

onSettled (as the name states) waits until the API call resolves. I needed the UI to immediately reflect the change after pressing a button, which didn't work for me... Still figured I'd post this in case someone else finds this helpful.

[manan-schmooze]

you can try executing the same thing in onMutate function

[nvmnghia]

What should I do if I want to implement optimistic delete? For example:

• My page size is 10. In getNextPageParam, if the length of lastPage is less than 10, then return undefined to indicate that there's no more data.
• The first page is loaded
• I delete one item, setQueryData with 9 remaining items
• getNextPageParam is called again. Now lastPage only has 9 < 10 items, and it doesn't load anymore.

My hack is to replace the deleted item with null or undefined, and skip them when render.

[vipansh]

is there any way to queryClient.invalidateQueries(["fetchPages"]);

[adguy360]

All actions performed on infinite data are a bit cumbersome and should probably be abstracted with some common defaults, even as an opt in or helpers. It could also be nice to add an option to have the data flattened in cache, I think this will serve a lot of common use cases.
I'm dealing with create and also need to manipulate the paginated data...

[xxRockOnxx]

i would flatten the data before mapping and then just use lodash's chunk to chunk them back to each page size... assuming each page has the same size e.g a paginated endpoint.

as for pageParams, if needed, just build it yourself by taking the property used from the last item of each page i.e

const newData = oldData.pages.flat().map((comments) => {
  // do your thing
});


const newPages = chunk(newData, 3)

return {
  pageParams: [undefined, ...newPages.slice(0, -1).map((page) => page.at(-1).createdAt)]
  pages: newPages,
}

On this line:

[undefined, ...newPages.slice(0, -1).map((page => page.at(-1).createdAt)]

undefined is the first value because the initial page does not use any pageParam

To visualize:

const alphabets = [
  [A, B, C],
  [D, E, F],
  [G, H, I],
]

const pages = alphabets
const pageParams = [undefined, C, F],

// Fetch requests would be
fetch('/alphabets?limit=3')
fetch('/alphabets?limit=3&after=C')
fetch('/alphabets?limit=3&after=F')

[mhfed]

Better with immer

import { produce } from 'immer';
import { Paginate } from '@/models/pagination';
\\\
queryClient.setQueryData(
          queryKeyNotifications,
          (oldData: InfiniteData<Paginate<INotification>> | undefined) => {
            if (oldData) {
              return produce(oldData, draft => {
                draft.pages.forEach(page => {
                  page.data.forEach(notification => {
                    if (notification.id === item.id) {
                      notification.status = '1';
                    }
                  });
                });
              });
            }
            return oldData;
          },
        );