RTK Query: A Beginner-Friendly Guide

#redux #react #reduxtoolkit #rtkquery

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

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;

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),
});

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>
);

🧪 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;

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,
  }),
}),

Use it like this:

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

🎯 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. 🙌