#How do we use React Query with NextJS 13.4.1 and the appDir?

1 messages · Page 1 of 1 (latest)

midnight wave
#

Where do we wrap the children in the query-provider? If we do it in root layout, will the whole application become a client side app?

sacred marshBOT
#

Hi @midnight wave. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To wrap the children in the query-provider, you can create a custom Providers component that includes the third-party providers you want to use. Then, you can import and render the <Providers /> component within your root layout. This will not make the whole application a client-side app, as the providers will only affect the components and hooks within your own Client Components.

Here's an example from the extracts:

// app/providers.js
'use client';

import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth';

export function Providers({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        {children}
      </AuthProvider>
    </ThemeProvider>
  );
}

And in your root layout:

// app/layout.js
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Source: Next.js Beta > rendering > server-and-client-components > Server and Client Components > Context > Rendering third-party context providers in Server Components > Part 0 (https://beta.nextjs.org/docs/rendering/server-and-client-components)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Getting Started: React Essentials

An overview of essential React features for building Next.js Applications, including Server Components.

#

@midnight wave kapa.ai is still learning and improving, please let us how it did by reacting below

midnight wave
#

@sacred marsh OK. And how do I use SWR from Vercel? They all expose loading variables, how does that conflict with the file "loading.ts"? Does it overwrite it?

sacred marshBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To use SWR from Vercel, you can import the useSWR hook and create a fetcher function. The fetcher function is responsible for fetching the data and returning it as JSON. You can then use the useSWR hook in your component to fetch the data, handle caching, and revalidate the data when it becomes stale. Here's an example:

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

Source: Next.js > basic-features > data-fetching > client-side > Client-side data fetching > Client-side data fetching with SWR (https://nextjs.org/docs/basic-features/data-fetching/client-side)

Regarding the loading.ts file, it is used in Next.js 13 to display a loading state for an entire route or route-segment. The loading state from SWR does not conflict with the loading.ts file. The loading.ts file is used to show a loading state while the content of a route segment loads, whereas the loading state from SWR is used to show a loading state while the data is being fetched.

If you want to use the loading state from SWR, you can continue using the !data condition to show a loading state in your component, as shown in the example above. The loading.ts file is not overwritten by the loading state from SWR.

Source: Vercel > frameworks > nextjs > Next.js on Vercel > Streaming > Streaming with loading and Suspense > Part 0 (https://vercel.com/docs/frameworks/nextjs)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Data Fetching: Client-side Fetching

Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.

Vercel Documentation
Next.js on Vercel

Vercel is the native Next.js platform, designed to enhance the Next.js experience.

#

@midnight wave kapa.ai is still learning and improving, please let us how it did by reacting below

midnight wave
#

@sacred marsh How do I globally configure SWR in the app-router?

sacred marshBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To globally configure SWR, you can create a custom hook that wraps the useSWR hook with your desired configuration. Then, you can use this custom hook throughout your application instead of directly using useSWR. Here's an example:

  1. Create a custom hook, e.g., useCustomSWR.js:
import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then((res) => res.json())

export function useCustomSWR(key, options) {
  const globalConfig = {
    // Add your global configuration here
    // For example: errorRetryCount: 3
  }

  return useSWR(key, fetcher, { ...globalConfig, ...options })
}
  1. Use the custom hook in your components:
import { useCustomSWR } from './useCustomSWR'

function Profile() {
  const { data, error } = useCustomSWR('/api/profile-data')

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

By using the custom hook, you can apply global configurations to SWR throughout your application.

Source: Next.js > basic-features > data-fetching > client-side > Client-side data fetching > Client-side data fetching with SWR (https://nextjs.org/docs/basic-features/data-fetching/client-side)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Data Fetching: Client-side Fetching

Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.