"No QueryClient set" error found while doing freecodecamp demo. #1
Description
Demo as found in: https://www.freecodecamp.org/news/build-an-admin-dashboard-with-shadcnui-and-tanstack-start/
When on "Create the Products table" step, copy/pasting the code block, deploying and then navigating to the products section of the dashboard results in the follow error: "No QueryClient set, use QueryClientProvider to set one"
Here is a fix, but since I don't know if this would be canonical in resolving the issue, I leave it to you to review and update the tutorial as desired.
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import appCss from '../styles.css?url'
const queryClient = new QueryClient(); // the relevant line
export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'TanStack Start Starter',
},
],
links: [
{
rel: 'stylesheet',
href: appCss,
},
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}> // relevant line
<html lang="en">
<head>
<HeadContent />
</head>
<body>
{children}
<TanStackDevtools
config={{
position: 'bottom-right',
}}
plugins={[
{
name: 'Tanstack Router',
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
<Scripts />
</body>
</html>
</QueryClientProvider> // relevant line
)
}