TanStack Query

https://tanstack.com/query/latest/docs/react

Admin

TanStack Query is a powerful data-fetching library that handles fetching, caching, synchronizing and...

Tokens:497

Snippets:6

Trust Score:9.4

Update:6 months ago

Show doc for...

Tokens:

Raw

### Fetch GitHub Repo Data with TanStack Query

Source: https://tanstack.com/query/latest/docs/react/overview

This snippet shows how to use `useQuery` to fetch data from the GitHub API and display it in a React component. It includes basic loading and error handling.

```tsx
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

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

  if (isPending) 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>
  )
}
```

Tokens:

Raw