Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Nextjs App Prefetching

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

app
- favicon.ico
- get-query-client.ts
- layout.tsx
- page.tsx
- pokemon-info.tsx
- pokemon.ts
- providers.tsx
.eslintrc.cjs
.gitignore
README.md
next.config.js
package.json
tsconfig.json

tsx

    import React from 'react'
    import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
    import { pokemonOptions } from '@/app/pokemon'
    import { getQueryClient } from '@/app/get-query-client'
    import { PokemonInfo } from './pokemon-info'

    export default function Home() {
      const queryClient = getQueryClient()

      void queryClient.prefetchQuery(pokemonOptions)

      return (
        <main>
          <h1>Pokemon Info</h1>
        </main>
      )
    }

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)