Any idea how to add tanstack react-query to laravel 11 reactjs project? The apps.jsx looks like this
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx'),
),
setup({ el, App, props }) {
if (import.meta.env.SSR) {
hydrateRoot(el, <App {...props} />);
return;
}
createRoot(el).render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
On the Tanstack installation guide, I need to add <QueryClientProvider>
to the root app.
Where do I add it to the apps.jsx above?
Here is the QueryClientProvider
component code from the guide
const queryClient = new QueryClient()
function App() {
return (
// Provide the client to your App
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
)
}
You can try something like this:
import { createInertiaApp } from '@inertiajs/react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const queryClient = new QueryClient();
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx'),
),
setup({ el, App, props }) {
const appElement = (
<QueryClientProvider client={queryClient}>
<App {...props} />
</QueryClientProvider>
);
if (import.meta.env.SSR) {
hydrateRoot(el, appElement);
return;
}
createRoot(el).render(appElement);
},
progress: {
color: '#4B5563',
},
});
Basically, wrap the <App />
with the providers you need