Theo's Typesafe Cult•3mo ago

Weird errors when using useQuery

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

'use client';

import { QueryClientProvider } from '@tanstack/react-query';

import { getQueryClient } from '~/server/query-client';

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

'use client';

import { QueryClientProvider } from '@tanstack/react-query';

import { getQueryClient } from '~/server/query-client';

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

import {
  QueryClient,
  defaultShouldDehydrateQuery,
  isServer,
} from '@tanstack/react-query';

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
        throwOnError: false,
      },
      dehydrate: {
        // include pending queries in dehydration
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === 'pending',
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    // Server: always make a new query client
    return makeQueryClient();
  } else {
    // Browser: make a new query client if we don't already have one
    // This is very important, so we don't re-make a new client if React
    // suspends during the initial render. This may not be needed if we
    // have a suspense boundary BELOW the creation of the query client
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

import {
  QueryClient,
  defaultShouldDehydrateQuery,
  isServer,
} from '@tanstack/react-query';

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
        throwOnError: false,
      },
      dehydrate: {
        // include pending queries in dehydration
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === 'pending',
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    // Server: always make a new query client
    return makeQueryClient();
  } else {
    // Browser: make a new query client if we don't already have one
    // This is very important, so we don't re-make a new client if React
    // suspends during the initial render. This may not be needed if we
    // have a suspense boundary BELOW the creation of the query client
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

13 Replies

GetPsychedOP•3mo ago

cc @dan first snippet gives me a wrapper Providers which I wrap children in layout.tsx

dan•3mo ago

this looks fine. can you send a compoentn that infa rerenders

GetPsychedOP•3mo ago

this? https://discord.com/channels/966627436387266600/966629731086774302/1289596654235684967 also, using useQuery now doesn't fetch my data at all for some reason no fetch request is being sent

  const {
    data: records,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ['records', dataset, tab],
    queryFn: async () =>
      fetch(path)
        .then((response) => {
          if (!response.ok) throw new Error(response.statusText);
          return response.json();
        })
        .then((records: ReviewedRecord[]) =>
          records.map(({ timestamp, ...record }) => ({
            ...record,
            timestamp: new Date(timestamp),
          }))
        ),
    initialData: [],
  });

  const {
    data: records,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ['records', dataset, tab],
    queryFn: async () =>
      fetch(path)
        .then((response) => {
          if (!response.ok) throw new Error(response.statusText);
          return response.json();
        })
        .then((records: ReviewedRecord[]) =>
          records.map(({ timestamp, ...record }) => ({
            ...record,
            timestamp: new Date(timestamp),
          }))
        ),
    initialData: [],
  });

oh it fetched now, after a long time I think that was because it got set as stale ah, it's the initialData >:(

GetPsychedOP•3mo ago

@dan I think setting the default value like this is causing the error

dan•3mo ago

yea because you're ssring and not throwing it doesnt refetch on the client after since you're hydrating with the servers cache on the client once its stale it'll then refetch

GetPsychedOP•3mo ago

it was because of the initialData

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

this is still happening :(

dan•3mo ago

and removing the useQuery stops that from happening?

GetPsychedOP•3mo ago

yeah, I don't see that error with useSuspenseQuery The diff between the two is quite minimal me setting a default here seems to be the most relevant

GetPsychedOP•3mo ago

full diff

dan•3mo ago

setting the default on the useQuery like that wont work afaik, make another variable lile

const {data} = useQuery()
const renderData = data ?? [];

const {data} = useQuery()
const renderData = data ?? [];

im not sure if that would cause the rerender issue though :Thonkang:

GetPsychedOP•3mo ago

this fixed it lol so weird

DogPawHat•3mo ago

You can ask on the Tanstack discord and see if dominick or tanner has a good answer

GetPsychedOP•3mo ago

Right! Thanks :)

Gaming

Programming

Weird errors when using useQuery