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
Setting Up the Project
Creating an API Slice
Fetching Data with Queries
Creating Data with Mutations
Caching and Optimizing Fetch Requests
Manually Refetching Data
Configuring the Redux Store
Using the Data in React Components
- 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
Create a New React Project:
npx create-react-app rtk-query-example
Navigate to the Project Directory:
cd rtk-query-example
Install Redux Toolkit and React-Redux:
npm install @reduxjs/toolkit react-redux
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.
SOCIAL SHARE CARD GENERATOR