Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Nextjs

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

src
- components
- hooks
- pages
  - _app.tsx
  - client-only.tsx
  - index.tsx
.gitignore
README.md
next.config.js
package.json
tsconfig.json

tsx

    import React from 'react'
    import { QueryClient, dehydrate } from '@tanstack/react-query'
    import { Header, InfoBox, Layout, PostList } from '../components'
    import { fetchPosts } from '../hooks/usePosts'

    const Home = () => {
      return (
      )
    }

    export async function getStaticProps() {
      const queryClient = new QueryClient()

      await queryClient.prefetchQuery({
        queryKey: ['posts', 10],
        queryFn: () => fetchPosts(10),
      })

      return {
        props: {
          dehydratedState: dehydrate(queryClient),
        },
      }
    }

    export default Home

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