onSettled throws Cannot update a component (HotReload) while rendering a different component

[AndonMitev]

Stack:

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

I have server component that is prefetching data and passing 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'] })

QueryClientProvider:

'use client';

import { ReactNode, useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

interface ReactQueryClientProps {
  children: ReactNode;
}

export default function ReactQueryClient({ children }: ReactQueryClientProps) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000
          }
        }
      })
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

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?

[bubablue]

I've got the same issue with useSuspenseQuery, using HydrationBoundaries while using ssr and not even using prefetching.

With useSuspenseQuery it only fails when there's an error on the request, then it gives as error this "Warning: Cannot update a component (HotReload) while rendering a different component..."

(...)
return (
  <QueryClientProvider client={queryClient}>
    <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
);

I can see on nextJS static apps useQuery also gives hydration issues when queries fail.
Although not sure if possible at some point would be nice to get this Warnings as Warnings rather than Errors.