TanStackT
TanStack•2y ago•
6 replies
primary-violet

onSettled throws annot update a component (`HotReload`) while rendering a different component

Stack:
"next": "14.0.4"
"@tanstack/react-query": "^5.17.12"

I have server component that is prefetching data and storing in cache. Then i have mutation that is updating the state which is OK until i add this line of code:

onSettled: async () => await queryClient.invalidateQueries({ queryKey: ['products'] })


also tried like this:

onSettled: () => queryClient.invalidateQueries({ queryKey: ['products'] })


full mutation looks like this:

const { mutate, isPending } = useMutation({
    mutationKey: ['products'],
    mutationFn: (data: ProductSchemaType) => createProductAction(data),
    onSettled: async () =>
      await queryClient.invalidateQueries({ queryKey: ['products'] })
  });


Issue that i'm facing is:

Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`


Not sure why is happening, tried to do optimistic update and filter variables from products and status pending and indeed i can see the variable coming from 
const variables = useMutationState({
  filters: { mutationKey: ['products'], status: 'pending' },
  select: (mutation) => mutation.state.variables
});

console.log('products', variables);


But then error occurs and and app is crashing, if this line is commented IN:

onSettled: async () => await queryClient.invalidateQueries({ queryKey: ['products'] })

everything works no problems, any ideas?
Was this page helpful?