React RTK Query

What is RTK Query in React?

RTK Query is the data-fetching layer built into Redux Toolkit. You describe endpoints once and it generates hooks that cache, deduplicate, refetch and invalidate automatically.

RTK Query example

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

export const jobsApi = createApi({
  reducerPath: 'jobsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Job'],
  endpoints: builder => ({
    getJobs: builder.query({ query: city => `/jobs?city=${city}`, providesTags: ['Job'] }),
    applyToJob: builder.mutation({
      query: body => ({ url: '/applications', method: 'POST', body }),
      invalidatesTags: ['Job'],
    }),
  }),
});

export const { useGetJobsQuery, useApplyToJobMutation } = jobsApi;

How this works

The generated useGetJobsQuery hook handles caching and loading state. The mutation invalidates the Job tag, which makes every active job query refetch automatically.

Key points to remember

• Tags are how mutations tell queries their data is stale.
• It removes the need for thunks, loading flags and manual cache code.
• Comparable to TanStack Query; choose it when you are already on Redux.