RTK Query (RTKQ) is the data-fetching/caching layer bundled with Redux Toolkit. It sits on top of fetch/axios — you can use either as the underlying transport — and adds everything you'd normally hand-roll: cache, dedup, refetch, loading state, invalidation, polling, optimistic updates.

axios and fetch are just HTTP clients. They give you bytes; everything else (state, cache, race conditions, retries) is on you.

What you write with fetch alone

function User({ id }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const ctrl = new AbortController();
    setLoading(true);
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => { if (!r.ok) throw new Error(r.statusText); return r.json(); })
      .then(setUser)
      .catch(err => err.name !== 'AbortError' && setError(err))
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [id]);

  if (loading) return <Spinner />;
  if (error) return <Error err={error} />;
  return <Profile user={user} />;
}

And then you do that on every page. With no cache. With no dedup. With no refetch-on-window-focus. Two components requesting /users/42 issue two requests.

What you write with RTKQ

// api.ts — one definition for the whole app
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'],
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `users/${id}`,
      providesTags: (_r, _e, id) => [{ type: 'User', id }],
    }),
    updateUser: build.mutation<User, Partial<User> & { id: string }>({
      query: ({ id, ...patch }) => ({ url: `users/${id}`, method: 'PATCH', body: patch }),
      invalidatesTags: (_r, _e, { id }) => [{ type: 'User', id }],
    }),
  }),
});

export const { useGetUserQuery, useUpdateUserMutation } = api;

function User({ id }) {
  const { data: user, isLoading, error } = useGetUserQuery(id);
  if (isLoading) return <Spinner />;
  if (error) return <Error err={error} />;
  return <Profile user={user} />;
}

You get for free:

• Cache by query key. Two components asking for getUser(42) issue one request and share the result.
• Dedup of in-flight requests with the same key.
• Refetch on mount, focus, reconnect (configurable).
• Polling (useGetUserQuery(id, { pollingInterval: 5000 })).
• Invalidation by tags — updateUser invalidates ['User', id], which forces getUser(id) to refetch.
• Loading + error state in the hook return.
• Optimistic updates via onQueryStarted.
• Code generation from OpenAPI / GraphQL schemas.

Comparison

When to use RTKQ

• You're already using Redux Toolkit.
• You want a single canonical place for endpoint definitions.
• You want tag-based invalidation (good for "I changed X, refetch everything depending on X").
• You want generated hooks from OpenAPI.

When not to use RTKQ

• You don't want Redux. React Query and SWR offer the same model (cache, dedup, refetch, invalidation, mutations) without any Redux dependency. For most new React apps that aren't already on Redux, React Query is the dominant choice.
• You're in a non-React app or non-Redux ecosystem.
• You only have 2–3 endpoints — manual fetch is fine.

Simple rule

• Transport layer? axios or fetch.
• Data-fetching layer (cache, dedup, state)? RTK Query if you already use Redux, React Query/SWR otherwise.
• Just doing one fetch on mount and never again? Plain fetch.

The mistake is treating axios as the "data-fetching layer." It's not. It transports bytes. Caching, dedup, invalidation, loading state — that's what RTKQ / React Query / SWR handle.