phpreactjslaravellaravel-11tanstackreact-query

Adding Tanstack react-query to laravel 11 reactjs inertia project


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>
  )
}

Solution

  • 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