RTK Query Data Fetching

Overview

https://redux-toolkit.js.org/rtk-query/overview

RTK Query is a powerful data fetching and caching library built on top of Redux Toolkit (RTK), which is a popular library for building scalable and maintainable React-Redux applications.

RTK Query simplifies the process of fetching data from APIs by providing a set of hooks that abstract away the details of making HTTP requests and managing the state of the data. It also provides a caching layer that reduces the number of network requests, improves the performance of the application, and minimizes the impact of network failures.

RTK Query also comes with many advanced features like optimistic updates, pagination, polling, and deduplication, which makes it easy to handle complex scenarios when fetching data from APIs.

Overall, RTK Query is an excellent library for managing data in React-Redux applications, and it can significantly reduce the amount of boilerplate code needed to handle data fetching and caching.

Example

Here's a simple example that demonstrates how to use RTK Query to fetch data from an API:

First, you need to install the necessary packages:

npm install @reduxjs/toolkit rtk-query react-query

Next, you can define a new API endpoint using the createApi function from RTK Query. This function takes an object with two properties: baseQuery and endpoints.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const API_URL = 'https://jsonplaceholder.typicode.com';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: API_URL }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users',
    }),
  }),
});

In this example, we're creating a new API endpoint called getUsers, which retrieves a list of users from the https://jsonplaceholder.typicode.com/users API endpoint.

Next, you can use the useQuery hook provided by RTK Query to fetch data from the API:

import { useQuery } from '@reduxjs/toolkit/query/react';

function UserList() {
  const { data, error, isLoading } = useQuery('users', api.getUsers);

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

In this example, we're using the useQuery hook to fetch data from the getUsers endpoint. The useQuery hook returns an object with three properties: data, error, and isLoading. If isLoading is true, we show a loading message. If error is not null, we show an error message. Otherwise, we render a list of users.

That's a basic example of how to use RTK Query to fetch data from an API in a React application. Of course, there are many more features and options available in RTK Query, depending on your needs.