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
GetPsyched
GetPsychedOP2mo ago
cc @dan first snippet gives me a wrapper Providers which I wrap children in layout.tsx
dan
dan2mo ago
this looks fine. can you send a compoentn that infa rerenders
GetPsyched
GetPsychedOP2mo 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 >:(
GetPsyched
GetPsychedOP2mo ago
@dan I think setting the default value like this is causing the error
No description
dan
dan2mo 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
GetPsyched
GetPsychedOP2mo 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
dan2mo ago
and removing the useQuery stops that from happening?
GetPsyched
GetPsychedOP2mo 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
GetPsyched
GetPsychedOP2mo ago
full diff
No description
dan
dan2mo 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:
GetPsyched
GetPsychedOP2mo ago
this fixed it lol so weird
DogPawHat
DogPawHat2mo ago
You can ask on the Tanstack discord and see if dominick or tanner has a good answer
GetPsyched
GetPsychedOP2mo ago
Right! Thanks :)
Want results from more Discord servers?
Add your server