RTK Query is the data-fetching and caching solution included with [Redux Toolkit](/reactjs/chapter-22-redux-toolkit). It is designed for server data such as users, products, articles, comments, and API resources. Instead of manually writing [Redux](/reactjs/chapter-22-redux-toolkit) state for every request, RTK Query can manage much of the request lifecycle and cache automatically. ### Manual Data Fetching Often Requires Without a data-fetching abstraction, you may create state such as: ```text users loading error request status last fetched time ``` and then write [async](/javascript/promises-asynchronous-javascript) logic to keep everything synchronized. RTK Query handles many of these concerns for you. ### Creating an API Slice ```javascript import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; export const usersApi = createApi({ reducerPath: "usersApi", baseQuery: fetchBaseQuery({ baseUrl: "/api" }), tagTypes: ["User"], endpoints: (builder) => ({ getUsers: builder.query({ query: () => "/users", providesTags: ["User"] }), createUser: builder.mutation({ query: (user) => ({ url: "/users", method: "POST", body: user }), invalidatesTags: ["User"] }) }) }); ``` ### Query vs Mutation RTK Query generally distinguishes between operations that read data and operations that modify server data. ```text Query → retrieve server data → GET-style operations Mutation → change server data → POST, PUT, PATCH, DELETE-style operations ``` ### Generated React Hooks When using the [React](/courses/reactjs)-specific RTK Query entry point, [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) are generated from the endpoint definitions. ```javascript export const { useGetUsersQuery, useCreateUserMutation } = usersApi; ``` ### Reading Data ```jsx function UserList() { const { data: users, isLoading, isError } = useGetUsersQuery(); if (isLoading) { return

Loading users...

; } if (isError) { return

Unable to load users.

; } return (

{user.name}

); } ``` Notice that we did not manually create: ```text users state loading state error state fetchUsers thunk pending reducer fulfilled reducer rejected reducer ``` RTK Query handles the request state for the endpoint. ### Performing a Mutation ```jsx function CreateUserButton() { const [createUser, { isLoading }] = useCreateUserMutation(); async function handleCreate() { await createUser({ name: "Asif" }).unwrap(); } return ( ); } ``` ### Adding RTK Query to the Store An RTK Query API generates a reducer and middleware that need to be included in the Redux store. ```javascript import { configureStore } from "@reduxjs/toolkit"; import { usersApi } from "./usersApi"; export const store = configureStore({ reducer: { [usersApi.reducerPath]: usersApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat( usersApi.middleware ) }); ``` ### What Does RTK Query Cache? Suppose several components request: ```text GET /users ``` RTK Query can keep the result in its Redux-managed cache and allow components to share that server data instead of every component independently managing its own request state. Conceptually: ```text Component A ──┐ │ Component B ──┼── getUsers query │ Component C ──┘ ↓ RTK Query cache ↓ API data ``` ### Cache Invalidation with Tags Suppose `getUsers` provides: ```javascript providesTags: ["User"] ``` and `createUser` invalidates: ```javascript invalidatesTags: ["User"] ``` After creating a user, RTK Query can understand that cached user information may now be stale and re-fetch active data when appropriate. ### Why Is RTK Query Useful? It can provide features such as: ```text Request status handling Caching Request deduplication Automatic generated hooks Cache invalidation Refetching Polling Query parameters Mutation state ``` ### Server State vs Client State RTK Query is mainly designed for **server state**. For example: ```text Products loaded from API Articles loaded from backend User profile from server Comments Orders ``` Regular Redux slices are still useful for client-side application state such as: ```text Editor workflow Complex UI settings Application process state Local business rules shared globally ``` ### Interview-Ready Answer RTK Query is Redux Toolkit's data-fetching and caching solution. You define API endpoints with `createApi`, typically use `fetchBaseQuery` for HTTP requests, and RTK Query generates [React hooks](/courses/reactjs) for queries and mutations. It manages loading states, caching, request deduplication, and cache invalidation, reducing the amount of handwritten Redux code needed for server data.