Skip to main content

What is react-query?

React Query is a library for handling fetching data. What sounds so easy, can often be a struggle when doing it with plain React. Even though, using the fetch()-API or libraries like Axios, there is a lot more of tasks that come along with sending HTTP requests. React Query tries to solve most of them and is full of innovation.

React Query is capable of a couple important things:

  • Fetching data
  • Caching fetched data
  • Fetching data in the background
  • Lazy loading data
  • Merging multiple requests for the same data into one
  • Providing information on if and when data is loading

Code example in React Query

This code example can be found in the official documentation

import {
} from '@tanstack/react-query'

const queryClient = new QueryClient()

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

function Example() {
const { isLoading, error, data } = useQuery(['repoData'], () =>
(res) => res.json()

if (isLoading) return 'Loading...'

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

return (
<strong>👀 {data.subscribers_count}</strong>{' '}
<strong>{data.stargazers_count}</strong>{' '}
<strong>🍴 {data.forks_count}</strong>

Additional Resources