Що таке RTK Query?

ReactJunior~2 хв читання

Коротка відповідь

RTK Query - це вбудована в Redux Toolkit бібліотека для роботи із серверними даними: запитів, кешування, рефетчингу, синхронізації та автоматичних станів завантаження.

Тобто:

тобі не потрібно писати createAsyncThunk(),
не потрібно зберігати loading, error, data у store,
не потрібно робити useEffect для завантаження - RTK Query все це робить сам.

Основна ідея

RTK Query - це як React Query, але вбудований прямо в Redux.

Він автоматично:

робить запити (fetch, axios тощо),
кешує відповіді,
стежить за статусом завантаження,
оновлює компоненти при зміні даних,
підтримує рефетчинг, polling і invalidation (перезапит при зміні залежностей).

Приклад - мінімальний робочий код

javascript

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

// 1. Створюємо API slice
export const usersApi = createApi({
  reducerPath: 'usersApi', // ключ у store
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users'
    }),
    getUserById: builder.query({
      query: (id) => `/users/${id}`
    }),
  })
})

// 2. Експортуємо хуки
export const { useGetUsersQuery, useGetUserByIdQuery } = usersApi

Підключення до 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),
})

Використання в React-компоненті

javascript

import { useGetUsersQuery } from './usersApi'

function Users() {
  const { data, error, isLoading } = useGetUsersQuery()

  if (isLoading) return <p>Завантаження...</p>
  if (error) return <p>Помилка</p>

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Все! Жодних useEffect, dispatch, createAsyncThunk, loading, error. RTK Query сам робить запит, стежить за кешем і оновлює компонент.

Що робить RTK Query під капотом

RTK Query:

Автоматично викликає fetch() при монтуванні компонента.
Кешує відповідь у Redux store.
Якщо інший компонент запитує ті самі дані - використовується кеш, а не новий запит.
Можна "інвалідувати" кеш і перезапитувати дані вручну.
Слухає WebSocket / polling для автооновлення (якщо потрібно).

Два типи ендпоінтів

Тип	Використовується для	Приклад
`builder.query()`	GET-запити (читання даних)	`getUsers`
`builder.mutation()`	POST / PUT / DELETE (зміна даних)	`addUser`, `updateUser`

Приклад мутації:

javascript

addUser: builder.mutation({
  query: (newUser) => ({
    url: '/users',
    method: 'POST',
    body: newUser
  }),
  invalidatesTags: ['Users'] // перезапитує getUsers
})

І в компоненті:

javascript

const [addUser, { isLoading }] = useAddUserMutation()

addUser({ name: 'Tim' })

Автоматичні стани

RTK Query автоматично відстежує:

isLoading
isFetching
isSuccess
isError
error
data

Приклад:

javascript

const { data, isFetching, isError } = useGetUsersQuery()

Кешування і рефетчинг

RTK Query зберігає кешовані дані в Redux store:

javascript

state.usersApi.queries.getUsers.data

Можна налаштувати:

час життя кешу (keepUnusedDataFor)
автоматичний рефетч при фокусі (refetchOnFocus)
рефетч при реконнекті (refetchOnReconnect)

javascript

baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
keepUnusedDataFor: 60, // сек
refetchOnFocus: true,

Переваги RTK Query

Проблема в "ручному" Redux	Рішення RTK Query
Потрібно писати `createAsyncThunk`	Автоматично робить запит
Потрібно зберігати `loading/error/data`	Все вбудовано
Дублювання запитів у різних компонентах	Один кеш для всіх
Складний рефетчинг / polling	Із коробки
Немає контролю за stale-кешем	Є invalidation tags
Окремий код для запитів і Redux	Все в одному API slice

RTK Query у зв'язці з Redux Toolkit

RTK Query - частина RTK, не окрема бібліотека. Ти просто імпортуєш createApi і використовуєш усередині того самого Redux store. Воно інтегрується з DevTools, middleware і працює на тих самих принципах Redux.

Візуально

javascript

[Компонент React]
     |
     v
useGetUsersQuery()
     |
     v
[RTK Query]
   |-- Перевіряє кеш
   |-- Якщо немає -> робить fetch
   |-- Зберігає дані в store
   |-- Повертає { data, isLoading, error }
   `-- Автоматично оновлює компонент при змінах

Підсумок

Термін	Що робить
RTK Query	Інструмент для роботи із серверними даними в Redux Toolkit
Основна мета	Автоматизувати запити, кешування, завантаження і помилки
Головні функції	`createApi`, `fetchBaseQuery`, `builder.query`, `builder.mutation`
Стани	`isLoading`, `isFetching`, `isSuccess`, `isError`, `data`, `error`
Ключова користь	Мінімум коду, максимум автоматизації

Підсумкове формулювання:

RTK Query - це потужне розширення Redux Toolkit для керування серверними даними. Воно робить запити, кешує відповіді, оновлює UI, керує статусами і помилками - усе автоматично, без useEffect, dispatch і thunk.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.