Welcome to this comprehensive tutorial on RTK Query and how to use it with the JSON Placeholder API in a React application. Whether you're a beginner or an experienced developer, this guide will teach you how to efficiently fetch and mutate data using RTK Query's powerful caching and refetching capabilities.

Prefer watching? Check out my tutorial:

Table of Contents

1. Setting Up the Project
2. Creating an API Slice
3. Fetching Data with Queries
4. Creating Data with Mutations
5. Caching and Optimizing Fetch Requests
6. Manually Refetching Data
7. Configuring the Redux Store
8. Using the Data in React Components
9. Conclusion

1. Setting Up the Project

To get started, we need to set up a React project with the necessary dependencies.

Steps to Set Up

1. Create a New React Project:

   npx create-react-app rtk-query-example

1. Navigate to the Project Directory:

   cd rtk-query-example

1. Install Redux Toolkit and React-Redux:

   npm install @reduxjs/toolkit react-redux

1. Start the Application:

   npm start

Once you've followed these steps, you should have a running React project.

2. Creating an API Slice

The first step in using RTK Query is to create an API slice, which defines how to fetch data from a backend.

Define the API Slice

Create a file named api.js and define the API slice:

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

export const jsonPlaceholderApi = createApi({
  reducerPath: "jsonPlaceholderApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => "posts",
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: "posts",
        method: "POST",
        body: newPost,
      }),
    }),
  }),
});

export const { useGetPostsQuery, useCreatePostMutation } = jsonPlaceholderApi;

This API slice includes:

• getPosts: A query to fetch a list of posts.
• createPost: A mutation to create a new post.

3. Fetching Data with Queries

RTK Query provides hooks for fetching data from the defined endpoints.

Using the useGetPostsQuery Hook

In your component, use the useGetPostsQuery hook to fetch the list of posts:

import React from "react";
import { useGetPostsQuery } from "./api";

function Posts() {
  const { data, error, isLoading } = useGetPostsQuery();

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

The useGetPostsQuery hook automatically fetches data when the component mounts and provides data, error, and isLoading states to manage the UI.

4. Creating Data with Mutations

In addition to fetching data, RTK Query also supports mutations to create, update, or delete data.

Using the useCreatePostMutation Hook

Create a form that allows the user to submit new posts:

import React, { useState } from "react";
import { useCreatePostMutation } from "./api";

function CreatePost() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [createPost, { isLoading }] = useCreatePostMutation();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await createPost({ title, body });
  };

  return (
    <div>
      <h1>Create a New Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Body"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Creating..." : "Create Post"}
        </button>
      </form>
    </div>
  );
}

export default CreatePost;

Here, useCreatePostMutation is used to send the new post data to the API.

5. Caching and Optimizing Fetch Requests

RTK Query caches the data it fetches. If the same data is requested again, it will serve the cached data, avoiding a new network request.

You can configure the cache behavior using the keepUnusedDataFor option to determine how long data should remain in the cache after it's no longer needed.

Example of configuring cache lifetime in the API slice:

export const jsonPlaceholderApi = createApi({
  reducerPath: "jsonPlaceholderApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  keepUnusedDataFor: 30, // Data will be removed after 30 seconds of inactivity
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => "posts",
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: "posts",
        method: "POST",
        body: newPost,
      }),
    }),
  }),
});

6. Manually Refetching Data

You may need to manually trigger a refetch of data, especially after performing a mutation or when data is out of date.

Force Refetching Data

import { useDispatch } from "react-redux";
import { useGetPostsQuery } from "./api";

function RefreshButton() {
  const dispatch = useDispatch();
  const { refetch } = useGetPostsQuery();

  return <button onClick={() => refetch()}>Refresh Data</button>;
}

This button will manually trigger a refetch of the data from the API.

7. Configuring the Redux Store

To use RTK Query, you need to add the API slice reducer and middleware to your Redux store.

Setting Up Redux Store

import { configureStore } from "@reduxjs/toolkit";
import { jsonPlaceholderApi } from "./api";

const store = configureStore({
  reducer: {
    [jsonPlaceholderApi.reducerPath]: jsonPlaceholderApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(jsonPlaceholderApi.middleware),
});

export default store;

Make sure to wrap your application with the Provider component from react-redux and pass in the store.

8. Using the Data in React Components

Now that everything is set up, you can use the hooks and store to fetch and mutate data across your components.

Example of using the Posts and CreatePost components:

import React from "react";
import Posts from "./Posts";
import CreatePost from "./CreatePost";

function App() {
  return (
    <div>
      <h1>RTK Query Example</h1>
      <CreatePost />
      <Posts />
    </div>
  );
}

export default App;

9. Conclusion

By following this tutorial, you've learned how to integrate RTK Query with the JSON Placeholder API in your React application. You've covered how to fetch data using queries, create data using mutations, configure caching, manually refetch data, and set up the Redux store.

RTK Query simplifies the process of managing API requests in React applications, allowing you to focus on building great user experiences.

For more tutorials and guides, be sure to subscribe to my YouTube channel Pedrotechnologies.