DEV Community

Jakaria Masum
Jakaria Masum

Posted on

1 1 1

RTK Query: A Beginner-Friendly Guide

If you've ever built a React app with Redux, you’ve probably experienced the repetitive boilerplate of fetching data — action creators, reducers… and don't forget loading and error states. 😩

Enter RTK Query, a powerful data-fetching and caching tool built right into Redux Toolkit. It helps eliminate much of the hassle involved with managing server-side state. In this guide, we’ll break down what RTK Query is, why you should care, and how to use it in your projects with simple, practical examples.


🧠 What is RTK Query?

RTK Query is a data-fetching and caching solution provided by Redux Toolkit (RTK). It's designed to simplify API communication by handling:

  • Data fetching
  • Caching
  • Invalidations
  • Refetching
  • Loading and error states

Basically, RTK Query reduces all the fluff and gives you a clean, maintainable way to work with remote data.


🛠️ Why Use RTK Query?

Here’s what makes it awesome:

  • 🔁 Automatic caching & re-fetching – Minimizes unnecessary network requests
  • Built-in loading & error state management
  • 💾 Optimistic updates and caching control
  • 🧼 Cleaner code with fewer reducers and actions

⚙️ Setting Up RTK Query

Let's walk through the basic setup. First, make sure you have the Redux Toolkit and React-Redux installed:

npm install @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

Now create an API service using createApi.

// services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api', // name of the slice
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
  }),
});

export const { useGetPostsQuery } = api;
Enter fullscreen mode Exit fullscreen mode

Next, hook the API into your Redux store:

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});
Enter fullscreen mode Exit fullscreen mode

And wrap your app with the Redux Provider:

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);
Enter fullscreen mode Exit fullscreen mode

🧪 Using Queries in Components

Here’s how you can fetch and display data in a component using the auto-generated hook:

import React from 'react';
import { useGetPostsQuery } from './services/api';

const PostList = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Something went wrong</p>;

  return (
    <ul>
      {posts?.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default PostList;
Enter fullscreen mode Exit fullscreen mode

No reducers. No thunks. No dispatching. Just hooks. 💥


🧰 Bonus: Mutations with RTK Query

Need to POST, PUT, DELETE? RTK Query’s got you. Here’s an example of a mutation to create a new post:

addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
}),
Enter fullscreen mode Exit fullscreen mode

Use it like this:

const [addPost, { isLoading }] = useAddPostMutation();
addPost({ title: 'New Post', body: 'Hello world!' });
Enter fullscreen mode Exit fullscreen mode

🎯 Final Thoughts

RTK Query is a game-changer when working with APIs in Redux apps. It’s intuitive, concise, and handles the hard parts for you. Whether you're building a large-scale app or a small side project, it's worth exploring.

Next time you're building a React app with Redux, give RTK Query a try — your future self will thank you. 🙌


📚 Resources

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Postmark Image

The email service that speaks your language

Whether you code in Ruby, PHP, Python, C#, or Rails, Postmark's robust API libraries make integration a breeze. Plus, bootstrapping your startup? Get 20% off your first three months!

Start free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay