React Academy · Lesson

RTK Query: Endpoints & Auto-Caching

Define query and mutation endpoints with createApi and let RTK Query manage caching.

RTK Query: Endpoints & Auto-Caching is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will define query and mutation endpoints with RTK Query's createApi and let it manage caching, loading states, and data fetching automatically.

What Is RTK Query?

RTK Query is a data fetching and caching layer built into Redux Toolkit. It eliminates manual loading/error state management, deduplicates requests, and caches responses by endpoint and argument.

Creating an API with createApi

Call createApi() with a reducerPath, baseQuery, and endpoints. The result includes generated React hooks.

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

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({ query: (id) => '/users/' + id }),
    getUsers: builder.query({ query: () => '/users' }),
  }),
});

export const { useGetUserQuery, useGetUsersQuery } = userApi;

Adding the API to the Store

Add the generated reducer and middleware to configureStore. The middleware handles cache lifecycle, invalidation, and refetching.

import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './userApi';

export const store = configureStore({
  reducer: { [userApi.reducerPath]: userApi.reducer },
  middleware: (gDM) => gDM().concat(userApi.middleware),
});

Using a Query Hook

Call the generated hook in a component. It returns data, isLoading, isError, and refetch. Data is cached by argument — the same hook with the same arg returns cached data instantly.

function UserCard({ id }) {
  const { data, isLoading, isError } = useGetUserQuery(id);
  if (isLoading) return <Spinner />;
  if (isError) return <p>Error</p>;
  return <p>{data.name}</p>;
}

Automatic Deduplication

If two components mount simultaneously and call useGetUsersQuery(), RTK Query sends only one network request and shares the response between both components.

Cache TTL with keepUnusedDataFor

Control how long cached data stays in the store after all subscribers unmount. Default is 60 seconds. Set it per endpoint.

endpoints: (builder) => ({
  getUser: builder.query({
    query: id => '/users/' + id,
    keepUnusedDataFor: 300, // 5 minutes
  }),
})

Polling for Live Data

Pass `pollingInterval` to the hook call to refetch automatically every N milliseconds. Useful for dashboards and live feeds.

const { data } = useGetStatsQuery(undefined, {
  pollingInterval: 5000, // refetch every 5 seconds
});

Query Arguments and Skipping

Pass undefined or use the `skip` option to conditionally skip a query. Useful when required IDs are not yet available.

const { data } = useGetUserQuery(userId, { skip: !userId });

Transforming Responses

Use `transformResponse` to reshape the API response before caching it. This keeps components clean — they receive a processed shape, not the raw API format.

getUsers: builder.query({
  query: () => '/users',
  transformResponse: (raw) => raw.data.users,
})

Quick Check

What happens if two components call the same RTK Query hook with the same argument at the same time?

Recap

createApi defines endpoints and generates typed hooks. Add the reducer and middleware to the store. Query hooks return data, isLoading, and isError. Responses are cached and deduplicated automatically.

Up Next

Next lesson: **Optimistic Updates & Cache Invalidation** — you will update the UI instantly on mutation and invalidate cached data with tags.

Frequently asked questions

Is the “RTK Query: Endpoints & Auto-Caching” lesson free?

Yes — the full text of “RTK Query: Endpoints & Auto-Caching” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “RTK Query: Endpoints & Auto-Caching”?

Define query and mutation endpoints with createApi and let RTK Query manage caching. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “RTK Query: Endpoints & Auto-Caching” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy