Ultimate Redux Toolkit RTK Query With Real World Examples

#react #redux #rtkquery #statemanagement

RTK Query is a powerful data fetching and caching library built on top of Redux Toolkit. It simplifies API data management in React applications by providing automatic caching, request deduplication, and optimistic updates. Managing API data in React applications used to be a pain - I'd write custom hooks for fetching, manually handle loading states, implement caching logic, and deal with race conditions. Then I discovered RTK Query, and it eliminated about 80% of the boilerplate code I was writing for data fetching.

RTK Query is built on top of Redux Toolkit, but you don't need to understand Redux to use it. It provides automatic caching (so you don't refetch data unnecessarily), request deduplication (multiple components requesting the same data only triggers one API call), and optimistic updates (UI updates immediately while the request is in flight). It's like having a smart data fetching layer that handles all the edge cases for you.

What is RTK Query?

RTK Query is a powerful data fetching and caching library built on top of Redux Toolkit. It provides:

Automatic caching - Responses are cached automatically
Request deduplication - Identical requests are deduplicated
Background refetching - Data can be refetched in the background
Optimistic updates - UI updates immediately while requests are in flight
TypeScript support - Full TypeScript support out of the box
Zero boilerplate - No need to write reducers, actions, or thunks

Installation

Installing RTK Query is straightforward:

npm install @reduxjs/toolkit react-redux

RTK Query is included in @reduxjs/toolkit, so you don't need a separate package.

Setting Up RTK Query API Slice

Creating an API slice is the foundation of RTK Query. Here's how to set up a products API slice:

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

export const productsApiSlice = createApi({
  reducerPath: "products",
  baseQuery: fetchBaseQuery({ 
    baseUrl: "http://localhost:3000/api",
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as any).auth?.token;
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
    },
  }),
  tagTypes: ["Product"],
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => "/products",
      providesTags: (result) =>
        result?.data
          ? [
              ...result.data.map(({ id }: { id: string }) => ({ 
                type: "Product" as const, 
                id 
              })),
              { type: "Product", id: "LIST" },
            ]
          : [{ type: "Product", id: "LIST" }],
    }),
    addProduct: builder.mutation({
      query: (productData) => ({
        url: "/products",
        method: "POST",
        body: productData,
      }),
      invalidatesTags: [{ type: "Product", id: "LIST" }],
    }),
  }),
});

export const {
  useGetProductsQuery,
  useAddProductMutation,
} = productsApiSlice;

Using RTK Query Hooks

RTK Query automatically generates hooks for each endpoint:

import { useGetProductsQuery } from "../../state/products/productSlice";

function Products() {
  const { data, isLoading, isError, error, refetch } = useGetProductsQuery({});

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

  const products = data?.data || [];

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
        </div>
      ))}
    </div>
  );
}