Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке RTK Query?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

> **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:

1. Автоматично викликає `fetch()` при монтуванні компонента.
2. Кешує відповідь у Redux store.
3. Якщо інший компонент запитує ті самі дані - використовується **кеш**, а не новий запит.
4. Можна "інвалідувати" кеш і перезапитувати дані вручну.
5. Слухає 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`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати740 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.