A Quick Overview of the Main Features of React Query

React Query is a powerful library designed to simplify data fetching and state management in React applications. Whether you're new to React or have some experience under your belt, you've probably come across React Query. In this blog post, I'll provide a quick overview for newcomers and a refresher for those who might need it (like myself right now 😅). Let's dive in!

Data Fetching Made Easy

One of the standout features of React Query is its ability to simplify data fetching in React applications, whether you're dealing with REST APIs, GraphQL queries, or other data-fetching scenarios. React Query has got you covered. To fetch data using React Query, you use the useQuery hook. Here's how it looks:

import { useQuery } from '@tanstack/react-query'
function App() {
 const info = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
}

In this example:

• queryKey defines a unique key that identifies the data you want to fetch. It is used internally for refetching, caching, and sharing your queries throughout your application. More on that later.
• queryFn specifies the function responsible for fetching the data. It returns a promise that resolves the data, or throws an error.

Now, React hooks do return some useful stuff, don't they? Well, this one is no exception. The useQuery hook returns some very useful states, but we are only going to explore the most common ones: isLoading, isError, data, and error. So you can do this:

function Todos() {
 const { isLoading, isError, data, error } = useQuery({
   queryKey: ['todos'],
   queryFn: fetchTodoList,
   refetchInterval: 60000, // Refetch every 60 seconds
 })


 if (isLoading) {
   return <span>Loading...</span>
 }


 if (isError) {
   return <span>Error: {error.message}</span>
 }


 // We can assume by this point that `isSuccess === true`
 return (
   <ul>
     {data.map((todo) => (
       <li key={todo.id}>{todo.title}</li>
     ))}
   </ul>
 )
}

This simple hook empowers you to perform data fetching effortlessly.

Mutations with React Query: Simplifying Data Updates

React Query provides a powerful tool for handling mutations, which involve making changes to server data, such as creating, updating, or deleting resources. The primary hook for managing mutations is useMutation, and it simplifies the process of sending data updates to the server while keeping your local cache in sync.
Here's how useMutation works:

import { useMutation } from 'react-query';

// Define a mutation function for updating the user's profile
function updateUserProfile(updatedData) {
  // Make the update request to the server and return the response
}

// Use the useMutation hook to access the mutation function
const { mutate, isLoading } = useMutation(updateUserProfile);

// Trigger the mutation when a user submits a form
const handleSubmit = (formData) => {
  mutate(formData); // Send the updated data to the server
};

// Render a form and handle form submission
return (
  <form onSubmit={handleSubmit}>
    {/* Form fields */}
    <button type="submit" disabled={isLoading}>
    {isLoading ? 'Updating...' : 'Update Profile'}
    </button>
  </form>
);

This hook returns an object that contains the mutation function and other options for customization (isLoading, error, data, etc).
React Query takes care of handling the request, updating the cache, and providing the loading state. This simplifies mutation handling and keeps your UI in sync with the server effortlessly.

Query Keys: Simplifying Query Management in React Query

Query keys are a fundamental concept in React Query that play a pivotal role in identifying and managing queries. When you fetch data using the useQuery hook, you specify a query key. This key acts as a unique identifier for that specific query. For example:

useQuery(['todos', { userId: 1 }], fetchUserTodos);

In this example, ['todos', { userId: 1 }] is the query key, representing a query for the user (which userId is equal to 1)'s to-do list.
React Query allows you to use dynamic query keys, which is incredibly powerful. This feature lets you generate query keys based on runtime variables. For example, if you want to fetch data for multiple users, you can dynamically create query keys like this:

const userIds = [1, 2, 3];
userIds.forEach((userId) => {
  useQuery(['todos', { userId }], fetchUserTodos);
});

Each user's query is uniquely identified by their userId.
Query keys are a powerful tool for managing queries, especially in scenarios where you need to handle multiple instances of the same query. As you will see next, you can also manually invalidate queries using their query keys. This is useful when you want to refresh or refetch specific data.

Caching and Invalidation with React Query

React Query shines in its ability to manage data caching and invalidation efficiently. When you fetch data using React Query, it automatically caches the results for you. This caching mechanism ensures that subsequent requests for the same data are lightning-fast, as they are served directly from the cache.
But what makes React Query truly powerful is its built-in support for cache invalidation. When data changes on the server, React Query provides convenient methods for invalidating the cached data. This ensures that your application always displays the most up-to-date information to users. Let’s see an example:

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

// Fetching data
function fetchTodos() {
  // Fetch data from your API here
}

// Creating a mutation to update data
function updateTodo(todoId, updatedData) {
  // Perform the update on the server
}

// Use the useQuery hook to fetch data
const { data: todos } = useQuery('todos', fetchTodos);

// Use the useMutation hook to update data
const updateTodoMutation = useMutation(updateTodo, {
  onMutate: (variables) => {
    // Invalidate the 'todos' query when an update is started
    queryCache.invalidateQueries('todos');
  },
  // Other mutation options...
});

// In your component, you can now display and update 'todos' and use 'updateTodoMutation' to make updates.

This is how React Query simplifies caching and cache invalidation, just by using queryCache and a query key. You can read more about it here.
There is another way to manually invalidate a query by using the queryClient.invalidateQueries method. Here's how you can utilize it:

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

const ExampleComponent = () => {
  const queryClient = useQueryClient();

  const { data } = useQuery('todos', fetchTodoList);

  const handleDataChange = () => {
    // Mark the 'todos' query as stale
    queryClient.invalidateQueries('todos');
  };

  return (
    <>
      {/* Display your data */}
      <button onClick={handleDataChange}>Update Data</button>
    </>
  );
};

Both methods shown are valid ways to manually invalidate a query using React Query. However, there's a difference in how they access the query cache:
useQueryClient:

• This method is part of the useQueryClient hook provided by React Query.
• This method aligns better with the library's patterns and might be more consistent.

queryCache:

• This method uses the queryCache object directly from React Query's core.
• It's a lower-level way to access the query cache, and it can be used even without useQuery.
• It might be useful if you have some specific use cases where you need to interact with the cache outside of typical React Query isn't directly involved.

These capabilities for caching and query invalidation are vital for building fast and real-time applications, ensuring that your users always have access to the latest information.

Conclusion

In this brief overview, we've glimpsed the power of React Query, which simplifies data management in React applications. From effortless data fetching to automatic caching, React Query streamlines tasks, making your React projects more efficient and enjoyable. I encourage you to explore these features further, regardless of your skill level, and unleash the potential of React Query in your React development journey.