What is this React-Query thing people keep talking about

Photo by Arnold Francisca on Unsplash

React Query is a popular data fetching library for React applications. It provides a simple and powerful way to manage data fetching, caching, and state management in your application. React Query makes it easy to fetch data from your API, cache it locally, and handle data updates with automatic refetching. In this article, we will explore the features and benefits of React Query and provide examples of how to use it in your projects.

Features of React Query

React Query has a number of powerful features that make it a popular choice for data management in React applications. Here are some of the key features:

1. Data Fetching: React Query provides a simple and flexible way to fetch data from your API. It supports various fetching strategies such as manual fetching, automatic refetching, and polling.
2. Caching: React Query automatically caches data in memory, which makes subsequent requests for the same data faster and more efficient. It also provides options for invalidating or updating cached data.
3. State Management: React Query provides a state management solution that can be used in place of React’s built-in state management. It allows you to easily manage loading, error, and success states of your data fetching.
4. Typescript Support: React Query is built with Typescript in mind, which provides strong typing and better IDE support.

Examples of Usage

Let’s take a look at some examples of how to use React Query in your projects.

1. Simple Data Fetching

import { useQuery } from 'react-query';

function App() {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

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

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

In this example, we are fetching a list of todos from an API using the useQuery hook provided by React Query. The useQuery hook takes two arguments: the query key and the data fetching function. The query key is a unique identifier for the query and is used for caching purposes. The data fetching function is called whenever the query is executed, and its result is stored in the cache.

2. Caching and Invalidating Data

import { useQuery, useMutation } from 'react-query';

function App() {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

  const addTodoMutation = useMutation(todo =>
    fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      body: JSON.stringify(todo),
    }).then(res => res.json())
  );

  const handleAddTodo = async () => {
    await addTodoMutation.mutateAsync({
      userId: 1,
      title: 'New Todo',
      completed: false,
    });
    queryCache.invalidateQueries('todos');
  };

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

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, we are adding a new todo to the API