diff --git a/pages/lesson-3/_meta.ru.json b/pages/lesson-3/_meta.ru.json index d5c6ce3..a0b6430 100644 --- a/pages/lesson-3/_meta.ru.json +++ b/pages/lesson-3/_meta.ru.json @@ -1,3 +1,4 @@ { - "chapter-1": "Роутинг" + "chapter-1": "Роутинг", + "chapter-2": "RTK Query" } diff --git a/pages/lesson-3/chapter-2.ru.mdx b/pages/lesson-3/chapter-2.ru.mdx index fc2eaa6..842042f 100644 --- a/pages/lesson-3/chapter-2.ru.mdx +++ b/pages/lesson-3/chapter-2.ru.mdx @@ -39,23 +39,69 @@ export function App() { ## Создание Api -```ts filename="src/services/auth/auth.ts" +### Создание базового Api + +```ts filename="src/services/base-api.ts" import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' -export const authApi = createApi({ - reducerPath: 'authApi', +export const baseApi = createApi({ + reducerPath: 'baseApi', baseQuery: fetchBaseQuery({ baseUrl: 'https://api.flashcards.andrii.es', credentials: 'include', + prepareHeaders: headers => { + headers.append('x-auth-skip', 'true') + }, }), endpoints: builder => { return { - getMe: builder.query({ - query: () => `auth/me`, + getDecks: builder.query({ + query: () => `v1/decks`, }), } }, }) -export const { useGetMeQuery } = authApi +export const { useGetDecksQuery } = baseApi ``` + +### Подключение базового Api к стору + +```ts filename="src/services/store.ts" +import { configureStore } from '@reduxjs/toolkit' + +import { baseApi } from './base-api' + +export const store = configureStore({ + reducer: { + [baseApi.reducerPath]: baseApi.reducer, + }, + middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware), +}) +``` + +### Использование хука + +Что бы протестировать как работает хук, вызовем его в Router компоненте: + +```tsx filename="src/router.tsx" +export const Router = () => { + const result = useGetDecksQuery() + + console.log(result) + + return +} +``` + +В консоли получим следующее: +![result-console](./images/result-console.png) + +На каждое изменение статуса промиса мы получаем обновленный объект с данными о запросе. + +Обычно нам из этого интересны следующие поля: + +- `data` - данные, которые вернул запрос +- `isLoading` - флаг, который показывает, что запрос выполняется +- `isError` - флаг, который показывает, что запрос завершился с ошибкой +- `error` - объект ошибки diff --git a/pages/lesson-3/images/result-console.png b/pages/lesson-3/images/result-console.png new file mode 100644 index 0000000..ea38543 Binary files /dev/null and b/pages/lesson-3/images/result-console.png differ