feat: add react query example

Author: ruslan4432013

i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-react-query.mdx

@@ -149,9 +149,8 @@ You can use the built-in queryOptions function from “@tanstack/react-query”
 :::
 
 ### 1. Creating a Query Factory
-#### `@/entities/post/api/post.queries.ts`
 
-```tsx
+```tsx title=@/entities/post/api/post.queries.ts
 import { keepPreviousData, queryOptions } from "@tanstack/react-query";
 import { getPosts } from "./get-posts";
 import { getDetailPost } from "./get-detail-post";
@@ -295,8 +294,8 @@ export const postQueries = {
 
 
 ### 3. Use in application code
-`@/pages/home/ui/index.tsx`
-```tsx
+
+```tsx title=@/pages/home/ui/index.tsx
 export const HomePage = () => {
 const itemsOnScreen = DEFAULT_ITEMS_ON_SCREEN
 const [page, setPage] = usePageParam(DEFAULT_PAGE)
@@ -325,7 +324,7 @@ In this guide, we will look at how to organize a QueryProvider
 ### 1. Creating a QueryProvider
 The file `query-provider.tsx` is located at the path `@/app/providers/query-provider.tsx`.
 
-```tsx
+```tsx title=@/app/providers/query-provider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactNode } from "react";

i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-react-query.mdx

@@ -8,8 +8,8 @@ sidebar_position: 10
 ###  Решение - разбить по сущностям
 
 
-Если в проекте уже присутствует разделение на сущности, и каждый запрос соответствует какой-то одной сущности,
-наиболее чистым будет разделение по сущностям. В таком случае, мы предлагаем использовать следующую структуру:
+Если в проекте уже присутствует разделение на сущности, и каждый запрос соответствует одной сущности,
+наиболее чистым будет разделение по сущностям. В таком случае, предлагаем использовать следующую структуру:
 
 ```sh
 └── src/                                        #
@@ -20,7 +20,7 @@ sidebar_position: 10
     ├── entities/                               #
     |     ├── {entity}/                         #
     |    ...     └── api/                       #
-    |                 ├── `{entity}.query`      # Фабрика запросов, где находятся ключи и функции
+    |                 ├── `{entity}.query`      # Фабрика запросов, где определены ключи и функции
     |                 ├── `get-{entity}`        # Функция получения сущности
     |                 ├── `create-{entity}`     # Функция создания сущности
     |                 ├── `update-{entity}`     # Функция обновления объекта
@@ -39,7 +39,7 @@ sidebar_position: 10
 [экспериментальным подходом к организованным кросс-импортам через @x-нотацию](https://github.com/feature-sliced/documentation/discussions/390#discussioncomment-5570073) или рассмотреть альтернативное решение ниже.
 
 
-### Альтернативное решение — сохранить его в общем доступе.
+### Альтернативное решение — хранить запросы в общем доступе.
 В случаях, когда не подходит разделение по сущностям, можно рассмотреть следующую структуру:
 
 ```sh
@@ -66,8 +66,8 @@ export { documentQueries } from './queries/document'
 Мутаций не рекомендуется смешивать с query. Возможны два варианта:
 
 ### 1. Определить кастомный хук в сегменте api рядом с местом использования:
-#### `@/features/update-post/api/use-update-title.ts`
-```tsx
+
+```tsx title=@/features/update-post/api/use-update-title.ts
 export const useUpdateTitle = () => {
  const queryClient = useQueryClient()
 
@@ -127,7 +127,7 @@ export const CreatePost = () => {
 
 ### Фабрика запросов
 
-В этом гайде мы рассмотрим, как использовать фабрику запросов (объект, где значениями ключа - являются функции, возвращающие список ключей запроса)
+В этом гайде рассмотрим, как использовать фабрику запросов (объект, где значениями ключа - являются функции, возвращающие список ключей запроса)
 
 ```ts
 const keyFactory = {
@@ -145,15 +145,14 @@ queryOptions({
   ...options,
 })
 ```
-Для большей типобезопасности и дальнейшей совместимости со следующими версиями react-query, а также удобного доступа к функциям и ключам запросов -
+Для большей типобезопасности и дальнейшей совместимости со следующими версиями react-query, а также упрощенного доступа к функциям и ключам запросов -
 можно использовать встроенную в функцию queryOptions из “@tanstack/react-query”
 #### [(Подробнее здесь)](https://tkdodo.eu/blog/the-query-options-api#queryoptions)
 :::
 
 ### 1. Создание Фабрики запросов
-#### `@/entities/post/api/post.queries.ts`
 
-```tsx
+```tsx title=@/entities/post/api/post.queries.ts
 import { keepPreviousData, queryOptions } from "@tanstack/react-query";
 import { getPosts } from "./get-posts";
 import { getDetailPost } from "./get-detail-post";
@@ -241,7 +240,7 @@ export const PostPage = () => {
 
 ## Пагинация
 
-В этом разделе мы рассмотрим пример функции getPosts, которая выполняет запрос к API для получения сущностей постов с применением пагинации.
+В этом разделе рассмотрим пример функции getPosts, которая выполняет запрос к API для получения сущностей постов с применением пагинации.
 
 ### 1. Создание функции getPosts
 Функция getPosts находится в файле `get-posts.ts`, который находится в сегменте API.
@@ -276,7 +275,7 @@ export const getPosts = async (page: number, limit: number): Promise<PostWithPag
 
 ### 2. Фабрика запросов для пагинации
 Фабрика запросов postQueries определяет различные варианты запросов для работы с постами,
-включая запрос списка постов с определенной страницей и лимитом.
+включая запрос списка постов с заранее определенной страницей и лимитом.
 
 ```tsx
 import { keepPreviousData, queryOptions } from "@tanstack/react-query";
@@ -297,8 +296,7 @@ export const postQueries = {
 
 
 ### 3. Использование в коде приложения
-`@/pages/home/ui/index.tsx`
-```tsx
+```tsx title=@/pages/home/ui/index.tsx
 export const HomePage = () => {
 const itemsOnScreen = DEFAULT_ITEMS_ON_SCREEN
 const [page, setPage] = usePageParam(DEFAULT_PAGE)
@@ -322,7 +320,7 @@ return (
 :::
 
 ## QueryProvider для управления запросами
-В этом гайде мы рассмотрим, как организовать QueryProvider
+В этом гайде рассмотрим, как организовать QueryProvider
 
 ### 1. Создание QueryProvider
 Файл `query-provider.tsx` расположен по пути `@/app/providers/query-provider.tsx`.
@@ -452,6 +450,6 @@ export const apiClient = new ApiClient(API_URL);
 
 - [(GitHub) Пример проекта](https://github.com/ruslan4432013/fsd-react-query-example)
 - [(CodeSandbox) Пример проекта](https://codesandbox.io/p/github/ruslan4432013/fsd-react-query-example/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clrti20ur00062e692m2srxkw%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clrti20ur00022e699yxhtzkr%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clrti20ur00042e69vnagesqm%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clrti20ur00052e6932ilzv6s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clrti20ur00022e699yxhtzkr%2522%253A%257B%2522id%2522%253A%2522clrti20ur00022e699yxhtzkr%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clrti20ur00012e69gyct3luk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clrti61l900022e675k2bx9ue%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A7%252C%2522startColumn%2522%253A22%252C%2522endLineNumber%2522%253A7%252C%2522endColumn%2522%253A22%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fentities%252Fpost%252Fapi%252Fget-detail-post%2522%252C%2522id%2522%253A%2522cls03tzf000jb2e68sf9cjrzs%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cls03tzf000jb2e68sf9cjrzs%2522%257D%252C%2522clrti20ur00052e6932ilzv6s%2522%253A%257B%2522id%2522%253A%2522clrti20ur00052e6932ilzv6s%2522%252C%2522activeTabId%2522%253A%2522clrti4ufd00rw2e698svcnz9l%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clrti4ufd00rw2e698svcnz9l%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%253Fpage%253D5%2522%257D%255D%257D%252C%2522clrti20ur00042e69vnagesqm%2522%253A%257B%2522id%2522%253A%2522clrti20ur00042e69vnagesqm%2522%252C%2522activeTabId%2522%253A%2522cls058iyw007p2e6838qlunyv%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Ftypescript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522clrti2czg00812e69dhww7ecz%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cls058iyw007p2e6838qlunyv%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522cls09s0ja00mg2e68vzmmsxbb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522cls09s0v5005ee7exe4jbedr5%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
-- [Про фабрику запросов](https://tkdodo.eu/blog/the-query-options-api)
+- [О фабрике запросов](https://tkdodo.eu/blog/the-query-options-api)
 
 [project-knowledge]: /docs/about/understanding/knowledge-types