RTK Query и альтернативы

Что такое RTK Query

RTK Query — часть Redux Toolkit, которая занимается серверным состоянием: получает данные из API, хранит их в кэше, дедуплицирует запросы, управляет загрузкой/ошибками и автоматически обновляет данные после мутаций. Это аналог TanStack Query, но построенный поверх Redux.

Идея: вы больше не пишете useEffect + fetch + useState для загрузки + редьюсер для данных. Вы один раз описываете эндпоинты, а RTK Query генерирует хуки.

Полный API

// shared/api/base-api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: build => ({
    getPosts: build.query<Post[], { page: number }>({
      query: ({ page }) => `posts?page=${page}`,
      providesTags: result => [
        ...(result ?? []).map(p => ({ type: 'Post' as const, id: p.id })),
        { type: 'Post', id: 'LIST' },
      ],
    }),
    addPost: build.mutation<Post, NewPost>({
      query: body => ({ url: 'posts', method: 'POST', body }),
      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
    }),
  }),
})

export const { useGetPostsQuery, useAddPostMutation } = api

'use client'
const { data, isLoading, error } = useGetPostsQuery({ page })
const [addPost, { isLoading: saving }] = useAddPostMutation()

Теги — как он понимает, что обновить

{ type: 'Post' } без id инвалидирует все посты; { type: 'Post', id: 1 } — только пост 1. Тот же принцип, что у cacheTag / updateTag в Next и queryKey / invalidateQueries в TanStack Query.

Альтернативы — сравнение

Практическая рекомендация:

1. В Next.js App Router начинайте с Server Components для выводимых данных и Server Actions для мутаций.
2. Нужны живые данные на клиенте (polling, бесконечная прокрутка, дашборд) → TanStack Query.
3. В проекте уже есть Redux → RTK Query, чтобы не было двух систем.
4. GraphQL API → Apollo или urql.

Частые ошибки

• Копировать результат запроса в слайс Redux или в useState — два источника истины.
• Нет тегов → после мутации список не обновляется.
• Один createApi на приложение; эндпоинты добавляют через injectEndpoints из каждой фичи.

Коротко

• RTK Query = серверное состояние поверх Redux; эндпоинты → сгенерированные хуки.
• providesTags + invalidatesTags = автоматическое обновление после мутаций.
• Альтернативы: TanStack Query (по умолчанию на клиенте), SWR (просто), Apollo (GraphQL), Server Components (Next).

Официальные источники

• RTK Query — Overview
• RTK Query — Automated Re-fetching
• RTK Query — Comparison with Other Tools
• SWR