Merge previously data and new data.

[eilskn]

I had such a problem that after a successful download, I need to combine the old data with the new one with useQuery.

My code:

const [filterParams, setFilterParams] = useSetState({ skip: 0 });
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery(
    ['users', filterParams],
    () => usersService.getUsers(removeEmptyParams(filterParams)),
    {
      initialData: [],
      onSuccess: newData => {
        queryClient.setQueryData(
          ['users', filterParams],
          oldData => [...oldData, ...newData]
        );
      },
    }
  );


<Button onClick={() => setFilterParams(prev => ({skip: prev.skip + 25}))} />

But i have a infinity rerenders.

[TkDodo]

can you elaborate a bit more what you are trying to achieve please? it seems that you have correctly created new cache entries for filterParams - so why do you need to combine them?

[eilskn]

What am i trying to do

This can be said to be pagination, but I also need to display the old loaded data along with the new ones. That is, each new result must be combined with the old one in the cache.

To do this, after a successful download, I try to combine the old data with the new data in the cache.

But as soon as the data is loaded, the browser goes crazy, apparently an endless loop is happening somewhere, but I don't understand where.

[TkDodo]

That is, each new result must be combined with the old one in the cache.

I think infiniteQueries cover that very well, because they only have one cache entry with multiple pages