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 (
<QueryClientProvider client={queryClient}>
<Example />
<button
onClick={() => setIsOpen(!isOpen)}
>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
{isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
</QueryClientProvider>
)
}
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>
</div>
)
}
const rootElement = document.getElementById('root') as HTMLElement
ReactDOM.createRoot(rootElement).render(<App />)
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 (
<QueryClientProvider client={queryClient}>
<Example />
<button
onClick={() => setIsOpen(!isOpen)}
>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
{isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
</QueryClientProvider>
)
}
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>
</div>
)
}
const rootElement = document.getElementById('root') as HTMLElement
ReactDOM.createRoot(rootElement).render(<App />)