invalidateQueries not mutating the key I'm passing to

[RSchneider94]

Hey people!

UPDATE: sandbox example

I'm a bit new to react-query, using it for the first time on my project and I was following the series from TKDodo and now I have a scenario using the invalidateQueries which I have built after reading this post of him.

Unfortunately I'm having trouble to mutate one key. It's not mutating. I have posted it on the post too, but I think it will be better to post it here. So, here it is:

So I have built my mutation:

export const useAddPeer = (
  portfolioId: PortfolioId,
): UseMutationResult<PortfolioWithPeers, unknown, PeerRequestBody, unknown> => {
  const queryClient = useQueryClient();

  return useMutation(
    (newPeer: PeerRequestBody) =>
      handleRequest<PortfolioResponse, AddPeersIntoPortfolioRequestBody>({
        url: `${API_PATH}/${portfolioId}/peers`,
        method: 'PUT',
        payload: {
          peers: [newPeer],
        },
      }),
    {
      onSuccess: () => queryClient.invalidateQueries('portfolio-overview'),
    },
  );
};

And here is how I call it:

const addPeer = useAddPeer(activePortfolio.id);

const handleAddPeer = (newPeer: PeerRequestBody) => () => addPeer.mutate(newPeer);

<Box
  onClick={handleAddPeer({
    tickerId: ticker.id,
    isFavorite: false,
  })}
> ... </Box>

and my PUT request works fine, but my mutation never happens (and I went into onSuccess with the debugger) but as far as I saw, I can just see one query key there, but not the one I'm trying to mutate 'portfolio-overview'.

And here is how my portfolio-overview query looks:

export const usePortfolioOverview = (
  portfolioId: PortfolioId,
): UseQueryResult<PortfolioOverviewResponse, Error> =>
  useQuery<PortfolioOverviewResponse, Error>(
    ['portfolio-overview', portfolioId],
    () =>
      handleRequest({
        url: `${API_PATH}/${portfolioId}/overview`,
        method: 'GET',
      }),
    {
      enabled: !!portfolioId,
    },
  );

basically the logic is -> I'm inside another component which I search for the "peers" and after clicking on it, it's added to the portfolio, which then maps all peers and display all of them in a list, and that's what I'm trying here, to mutate this list after adding a new peer to it.

[RSchneider94]

Updated with a Sandbox pseudocode

[TkDodo]

I don't see anything wrong in that sandbox. I forked it and added the react-query-devtools: https://codesandbox.io/s/jovial-faraday-dkrbd?file=/src/index.js

you can see that when you click on an item on the right side, after the mutation is done, the "posts" query is refetching (it goes into the blue state before going to yellow again).

my guess is that in the example, you're not seeing anything new being added to the list because you're just fetching from jsonplaceholder, so the mutation doesn't really add anything. but in terms of refetching / invalidation, everything looks fine.

[RSchneider94]

I don't see anything wrong in that sandbox. I forked it and added the react-query-devtools: https://codesandbox.io/s/jovial-faraday-dkrbd?file=/src/index.js

you can see that when you click on an item on the right side, after the mutation is done, the "posts" query is refetching (it goes into the blue state before going to yellow again).

my guess is that in the example, you're not seeing anything new being added to the list because you're just fetching from jsonplaceholder, so the mutation doesn't really add anything. but in terms of refetching / invalidation, everything looks fine.

Hey, thanks for your answer! Yes, it could be because of the JSON placeholder, but strangely exact the same is what happens in my project. The list is never updated, even entering onSuccess. Unfortunately I can't make it as an example on Sandbox using the same API. 😔

[TkDodo]

Take a look at the optimistic updates example in the docs. It implements a simple server endpoint, and updates / invalidation work just fine.

[RSchneider94]

@TkDodo there's something really crazy going on here, tried to enable the devtools on my application and nothing appears there too, lol. Can't understand what's wrong. Even crazier is that also the initial fetch for the 'portfolio-overview' query is not showing up on the devtools. Can't understand why. But I'll test the optimistic update now.