How can I integrate TanStack React Query's QueryClientProvider into my Laravel 11 Inertia project?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm trying to integrate TanStack React Query into my Laravel 11 project that uses ReactJS with Inertia.

I need to add the <QueryClientProvider> to provide the React Query client throughout the application, but I'm not sure where to insert it in my existing apps.jsx file. Below is my current setup:

JAVASCRIPT
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',
    },
});

According to the TanStack installation guide, I should wrap my root component with <QueryClientProvider> (see the sample below):

JAVASCRIPT
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

Where is the best place to add <QueryClientProvider> in my apps.jsx file?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

You can wrap your Inertia App component with the inside the setup function so that every page rendered by Inertia has access to the TanStack Query client. One approach is to import and create a QueryClient, then wrap <App {...props} /> when calling createRoot (or hydrateRoot). For example:

JAVASCRIPT
import { createRoot, hydrateRoot } from 'react-dom/client'
import { createInertiaApp } from '@inertiajs/react'
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 Root = (
      <QueryClientProvider client={queryClient}>
        <App {...props} />
      </QueryClientProvider>
    );
    
    if (import.meta.env.SSR) {
      hydrateRoot(el, Root);
      return;
    }
    
    createRoot(el).render(Root);
  },
  progress: {
    color: '#4B5563',
  },
});

In this example, the wraps the Inertia <App {...props} />, which makes the TanStack Query client available throughout your application. This adjustment directly follows the TanStack React Query guide while integrating it seamlessly into your Laravel 11 ReactJS project using Inertia.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by SolarMariner171 • 1 month ago

You can try something like this:

JAVASCRIPT
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

No comments yet.

Discussion

No comments yet.

How can I integrate TanStack React Query's QueryClientProvider into my Laravel 11 Inertia project?

2 Answers

Discussion

Similar Posts

How do I integrate TanStack React Query into my Laravel 11 React Inertia project?