No QueryClient set, use QueryClientProvider to set one
I'm trying to use useQuery/useSuspenseQuery with a tanstack start application, but I'm getting this error always
'''
route.tsx:40 Error: No QueryClient set, use QueryClientProvider to set one
The above error occurred in the <RouteComponent> component.
React will try to recreate this component tree from scratch using the error boundary you provided, CatchBoundaryImpl.
'''
I'm using this example: https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query as base
I already have:
'''
// __root.tsx
Import type {QueryClient} from "@tanstack/react-query"
export const Route = createRootWithContext<{queryClient: QueryClient}>()({
...
})
'''
'''
//router.tsx
export function createRouter() {
const queryClient = new QueryClient();
return routerWithQueryClient(
createTanStackRouter({
routeTree,
context: { queryClient },
defaultPreload: 'intent',
defaultErrorComponent: DefaultCatchBoundary,
defaultNotFoundComponent: () => <NotFound />,
}), queryClient
)
}
'''
And then in another file:
const {data} = useSuspenseQuery({
queryKey:['clients'],
queryFn: () => getClients()
})
Can someone help me???
React TanStack Start Start Basic React Query Example | TanStack Sta...
An example showing how to implement Start Basic React Query in React using TanStack Start.
1 Reply
other-emerald•7mo ago
Wrap your app with
QueryClientProvider at the top level — usually in the main entry file (main.tsx or index.tsx). This provider makes the QueryClient available to all components.
Like this:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
This setup is required so any component that uses useQuery or useSuspenseQuery has access to the central query manager