/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import ReactDOM from 'react-dom/client' import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import axios from 'axios' const queryClient = new QueryClient() export default function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } function Example() { const { isLoading, error, data, isFetching } = useQuery({ queryKey: ['repoData'], queryFn: () => axios .get('https://api.github.com/repos/tannerlinsley/react-query') .then((res) => res.data), }) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: ' + error.message return ( <div> <h1>{data.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> <ReactQueryDevtools initialIsOpen /> </div> ) } const rootElement = document.getElementById('root') ReactDOM.createRoot(rootElement).render(<App />)
/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import ReactDOM from 'react-dom/client' import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import axios from 'axios' const queryClient = new QueryClient() export default function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } function Example() { const { isLoading, error, data, isFetching } = useQuery({ queryKey: ['repoData'], queryFn: () => axios .get('https://api.github.com/repos/tannerlinsley/react-query') .then((res) => res.data), }) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: ' + error.message return ( <div> <h1>{data.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> <ReactQueryDevtools initialIsOpen /> </div> ) } const rootElement = document.getElementById('root') ReactDOM.createRoot(rootElement).render(<App />)
