T
TanStack•2y ago
sunny-green

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'] })
onSettled: async () => await queryClient.invalidateQueries({ queryKey: ['products'] })
also tried like this: 
onSettled: () => queryClient.invalidateQueries({ queryKey: ['products'] })
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'] })
  });
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`
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);
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?
4 Replies
passive-yellow
passive-yellow•2y ago
Show your QueryClientProvider
sunny-green
sunny-greenOP•2y ago
here is it: 
// In Next.js, this file would be called: app/providers.jsx
'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>
  );
}
// In Next.js, this file would be called: app/providers.jsx
'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>
  );
}
hey @TkDodo 🔮 , do you have any thoughts on this 🙏 i really love the way optimistic updates are done and now even like it more when i can subscribe to mutation state but this onSettled phase is not letting me :X 😄 pretty pretty please 😊
passive-yellow
passive-yellow•2y ago
Show a reproduction in a code sandbox
sunny-green
sunny-greenOP•2y ago
somehow i make it work but now sure how :X 😄

Did you find this page helpful?