setQueryData not re-rendering the React Component

[DaniAkash]

Issue:

I'm running setQueryData to update query data while also updating the internal state of the component. This causes the component to not re-render after the change in query data

const updater = (nextData) => {
    /**
     * Appending new task to the top of the array
     * but react component is not re-rendering...
     */
    queryClient.setQueryData("todos", (oldData) => {
      return [...nextData, ...oldData];
    });
};

Inside React component

<button onClick={() => {
          updater([
            {
              id: 0,
              title: newTaskText
            }
          ]);
          setNewTaskText("new task");
        }}
      >
        Add
</button>

To Reproduce

Refer the codesandbox

• Clicking on Add Task will add the new task to query data
• But you need to click add task twice to see it re-render in the UI

[TkDodo]

The issue seems to be that useState doesn’t trigger a re-render if the value in the state is the same as the current value in the state. It works just fine if you enter a different text and press the Button.

[DaniAkash]

@TkDodo the queryClient.setQueryData should trigger the update regardless of useState right?

[TkDodo]

@TkDodo the queryClient.setQueryData should trigger the update regardless of useState right?

yes, it should and it does. if you remove setNewTaskText from your example completely, it updates every time you click Add.

I'm not really sure why the interaction of local state + setQueryData causes this behaviour 🤔 . Here would be an even more minimal reproduction of the issue: https://codesandbox.io/s/queryclientsetquerydata-no-re-render-forked-0gx3k?file=/src/App.tsx

• click the button once: in the devtools, you will see that data is now [], but on the screen, it's not.
• if you remove the local setState, or set it to a different value, it works

So it seems to only occur if you have local state that is also set to exactly the value that we currently have in the state...

[DaniAkash]

Thanks @TkDodo I'm aware that removing setNewTaskText or calling it with new data will fix the issue. But this seems to be an edge case if it gets called with the same value. I opened the issue for that scenario only

[boschni]

After executing the onClick function the component is re-rendered and useQuery is returning the new data ([]). But it seems like React is discarding this render because the state did not change. After that a notification from the cache comes in, telling useQuery to re-render because of the new data, but because useQuery thinks it already rendered this data, it does not trigger an additional re-render. This was an optimization to prevent unnecessary renders, but if certain renders are discarded, then we cannot rely on it.

[DaniAkash]

Thanks @boschni. I now have a clearer picture of the issue.

[utkarshgupta137]

I hope this issue gets fixed soon as it took me quite a bit of time to debug why the components weren't re-rendering.
You can work around this by completely reconstructing the return object.
So this will work:

queryClient.setQueryData(queryKey, (oldData) => {
  return {
    ...oldData,
    pages: oldData.pages.map((page) => {
      return {
        ...page,
        playlistItemsList: page.playlistItemsList
          .filter((playlistItem) => {
            return !variables.includes(playlistItem.id);
          }),
      };
    }),
  };
});

But this doesn't:

queryClient.setQueryData(queryKey, (oldData) => {
  oldData.pages.forEach((page) => {
    page.playlistItemsList = page.playlistItemsList
      .filter((playlistItem) => {
        return !variables.includes(playlistItem.id);
      });
  });
  return oldData;
});

[TkDodo]

@utkarshgupta137 your example has nothing to do with the issue i believe. Please don’t mutate existing cache values but return a new object / array instead. You can also use immer if you don’t like the spread syntax.

[mleister97]

For anyone who is facing issues with setQueryData not re-rendering the React Component
What fixed the problem for me was the following:

Make sure you really update the data inside query client immutalbe!

My example:
Note: You do not really need to understand the whole example, just my comment is important for you

queryClient.setQueryData([QUERY_KEYS.CUSTOMERS], (old) => ({
   ...(old as Record<string, unknown>),
   data: removeDigitalCheckFromCustomers(...),
}))

const removeDigitalCheckFromCustomers = (...): Customer[] => {
    const customerIndex = customers.findIndex(c => c.id === id)
    if (customerIndex === -1) return customers
    const updatedCustomers = [...customers]
    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    // THE NEXT LINE DOES NOT CREATE AN IMMUTABLE OBJECT !!!!!!!!!
    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    updatedCustomers[customerIndex].digitalChecks = { ... }
    return updatedCustomers
}

Use instead something like this:

updatedCustomers[customerIndex] = {
   ...updatedCustomers[customerIndex],
   digitalChecks: { ... }
}

[TkDodo]

@mleister97 please make a PR to the docs if you think we could highlight this more

[jackfiallos]

thanks guys, this series of posts helped me to fix an issue when deleting an item from a list of infinite items fetched using useInfiniteQuery.

Now I'm seeing a weird behaviour that not sure if its related or should be in a different issue and is, after updating the cache using queryClient.setQueryData when an item from the list is removed (re-render is triggered correctly), as soon as refetch is used, the deleted item is back .. is this possible, any clue what I should look for?

[TkDodo]

as soon as refetch is used, the deleted item is back

this sounds like the item hasn't really been deleted in the backend if a refetch brings it right back ...