Custom Query Client Hook works but useQueryClient does not?

[Gusis93]

Hi,

so I didn't know how to properly write the title and I'm not sure if this concerns the useQueryClient hook itself.

Basically I have created a custom hook that is just a wrapper around useQueryClient and it looks something like this

const useQueryActions = () => {
   const queryClient = useQueryClient();

  const invalidateQueries = (key: QueryKey) => {
    ...
  }

   // more utility methods
   .....

   return { 
      ...
   }
}

const {invalidateQueries} = useQueryActions();

invalidateQueries(...);

If I use this, everything works like a charm, my queries are refreshed and data component is re rendered and everything is updated.

Now my question is about useQueryClient. If I skip my custom hook and try to use the client like this:

const client = useQueryClient();

client.invalidateQueries(...);

I can see in the network tab the query being refetched BUT the data component is not re rendered. The data appears to be still cached all tough new data has been fetched. My component stays still. I don't understand why, if the data is being fetched in the network.

Why would it work with the custom hook but not with the client directly with the useQueryClient hook?

[Gusis93]

Closing the discussion because I found it was an internal issue.