Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Devtools Panel

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

public
src
- index.tsx
.eslintrc
.gitignore
README.md
index.html
package.json
tsconfig.json
vite.config.ts

tsx

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import {
      QueryClient,
      QueryClientProvider,
      useQuery,
    } from '@tanstack/react-query'
    import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

    const queryClient = new QueryClient()

    export default function App() {
      const [isOpen, setIsOpen] = React.useState(false)

      return (
          <button
            onClick={() => setIsOpen(!isOpen)}
          >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
          {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
      )
    }

    function Example() {
      const { isPending, error, data, isFetching } = useQuery({
        queryKey: ['repoData'],
        queryFn: async () => {
          const response = await fetch(
            'https://api.github.com/repos/TanStack/query',
          )
          return await response.json()
        },
      })

      if (isPending) return 'Loading...'

      if (error) return 'An error has occurred: ' + error.message

      return (
        <div
          style={{
            paddingBottom: 20,
          }}
        >
          <h1>{data.full_name}</h1>
          <p>{data.description}</p>
          <strong>👀 {data.subscribers_count}</strong>{' '}
          <strong>✨ {data.stargazers_count}</strong>{' '}
          <strong>🍴 {data.forks_count}</strong>
          <div>{isFetching ? 'Updating...' : ''}</div>
      )
    }

    const rootElement = document.getElementById('root') as HTMLElement
    ReactDOM.createRoot(rootElement).render(<App />)

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