How to optimistically update an infinite or paginated query?

[longprao]

I have read the docs and the repo issues several times but still can't figure out how to use queryCache.setQueryData() to add/update/remove items from an useInfiniteQuery()? Not sure what to pass to the first params of setQueryData?

It seems for now on mutation success I always have to call queryCache.invalidateQueries() which is very wasteful.

Some code example would be great. Thanks!

[criticalx7]

For now what I did was passing a query group index to a mutation. Now i know which query group of an item that need to be updated belongs. Next, I looped through that query group to find that will-be-updated item (Immerjs helps a lot). The variables is available as argument on all on-prefix callback. Hope it helps you.

I kind of wish the the dev guide us in someway on this topic. My way is kind of usable and demo-able but it feels not scalable somehow.

@tannerlinsley Can you help guide us in proper way for this problem ?

[EQuimper]

Did the same. Immer helps a lot. I just hope the user dont gonna scroll 100 pages haha.

[ranyefet]

I'm also having the same issue.

I use infinite list with potential lots of items and allow to select a few and bulk update them.
I need a way to update them optimistically without re-fetching all the pages again.

What is the best way to achieve this?

[youbek]

Have you found a solution, guys?

[TkDodo]

since v3, useInfiniteQuery consists of an object with pages and pageParams:

export interface InfiniteData<TData> {
  pages: TData[]
  pageParams: unknown[]
}

given that I have an array of todos on each page, I would use setQueryData to update the name of a todo like this:

setQueryData(data => ({
    ...data,
    pages: data.pages.map(page => page.map(todo => todo.id === id ? { ...todo, name: 'new name' } : todo ))
})

[TkDodo]

sorry, I'm not gonna keep playing a guessing game here :) As I said before:

please provide a codesandbox example that shows that it’s not working.

[kelsman]

sorry about that, here you go.
https://codesandbox.io/s/hardcore-cohen-cdons?file=/src/card.js

[kelsman]

try commenting on a picture

[TkDodo]

a simple logging shows that you are changing the structure of the data in the cache.

initially, every page has a posts array and a next number. After the update, each entry in the pages array contains only _id, author etc ...

in your update in onSuccess, you are not spreading ...page. here is a fixed version:

https://codesandbox.io/s/bold-river-0e6qb

• TypeScript helps tremendously in spotting such things
• immer is very good for updating deeply nested state in an immutable way, without needing to spread everything manually.

[kelsman]

thank you so much for the assistance.

[apenab]

With DRF I have this solution:

export function useInfiniteQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>(
  queryKey: TQueryKey,
  baseUrl: string,
  params?: Record<string, string>,
  options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, "queryKey" | "queryFn">
) {
  const infiniteQueryObject = _useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey>(
    queryKey,
    async ({pageParam}) => {
      const response = await axios.get(pageParam || baseUrl, !pageParam ? {params} : {});
      return response.data;
    },
    {
      // TODO: ppr-refactor
      getNextPageParam: (lastPage: any) => lastPage?.next,
      ...options,
    }
  );

  const queryClient = useQueryClient();

  function updateQueryData(newData: TData) {
    queryClient.setQueryData<InfiniteData<PageData<TData>> | undefined>(queryKey, (data) => {
      if (data) {
        data.pages = data.pages.map((page) => {
          page.results = page.results.map((result) => {
            // @ts-ignore
            if (result.id === newData.id) {
              result = newData;
            }
            return result;
          });
          return page;
        });
      }
      return data;
    });
  }

  return {items: transformQueryData<TData>(infiniteQueryObject.data), updateQueryData, ...infiniteQueryObject};
}

[afraser]

Nailed it. Although for me (using version 5.59.15) I just need <InfiniteData<TData>> | undefined for the typing.

Future travelers who do this sort of thing a lot might find they'd benefit from something like immer to save them from all the maps and spreads.

[tkmin]

is there other better solution than using map func in map func?

[apenab]

you can use the fp lodash utilities

[afraser]

also immer

[xxRockOnxx]

I happen to share my solution to this on another discussion with the same subject (#3360).

This and the said discussion are the top 2 results on Google so I would like share this here as well.