CODEWITHSUNDEEP
phpreactjslaravellaravel-11tanstackreact-query
Tom Kur
Tom Kur

Reputation: 2410

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

Upvotes: 1

Views: 129

Answers (1)

9uifranco
9uifranco

Reputation: 391

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

Upvotes: 0

Related Questions