@tramvai/react-query 1.46.10 → 1.48.2

package/README.md

@@ -1,16 +1,67 @@
 # React Query
 
-Библиотека для работы с запросами в React-компонентах. Базируется на [react-query](https://react-query.tanstack.com/).
+A library for handling requests in React components. Based on [react-query](https://react-query.tanstack.com/).
 
 ## Explanation
 
-Для работы библиотеки необходимо, чтобы в tramvai-приложение был добавлен модуль [@tramvai/module-react-query](references/modules/react-query.md)
+For the library to work, the module [@tramvai/module-react-query](references/modules/react-query.md) must be added to the tramvai application
 
 ## Api
 
+### Query
+
+A wrapper around react-query options with tramvai integration.
+
+#### fork
+
+Create new `Query` from an existing query with option to override settings.
+
+```ts
+import { createQuery } from '@tramvai/react-query';
+
+const query = createQuery();
+const newQuery = query.fork({
+  refetchInterval: 2000,
+  refetchIntervalInBackground: false,
+});
+```
+
+#### prefetchAction
+
+Return a tramvai action that can be used to prefetch current query
+
+```ts
+export default function PageComponent() {
+  const { data, isLoading } = useQuery(query);
+
+  return <div>{isLoading ? 'loading...' : data}</div>;
+}
+
+Component.actions = [query.prefetchAction()];
+```
+
+#### fetchAction
+
+Return a tramvai action that can be used to fetch current query
+
+```ts
+const action = createAction({
+  name: 'action',
+  fn: async (context) => {
+    const result = await context.executeAction(query.fetchAction());
+
+    console.log('__action__', result);
+  },
+});
+```
+
+#### raw
+
+Might be used when the raw query options is needed. The result can be passed to the underlying methods of `react-query` lib in cases when `@tramvai/react-query` doesn't provide appropriate wrapper. This method is used internally in the lib to redirect calls to `react-query`.
+
 ### createQuery
 
-Позволяет создать объект `Query` который позже можно будет использовать в компонентах с помощью `useQuery`. Используется для выполнения единичных запросов на получение данных.
+Allows you to create a `Query` object that can later be used in components using `useQuery`. Used to execute single data retrieval requests.
 
 ```ts
 import { createQuery } from '@tramvai/react-query';
@@ -28,17 +79,16 @@ const query = createQuery({
 });
 ```
 
-#### Уникальные параметры запроса
+#### Unique query parameters
 
-Для создания общей `query`, принимающий параметры для запроса, необходимо возвращать уникальный `key`,
-подробнее об этом можно почитать в разделе официальной документации [Query Keys](https://react-query.tanstack.com/guides/query-keys)
+To create a generic `query` that takes parameters for a query, you must return a unique `key`, you can read more about this in the official documentation section [Query Keys](https://react-query.tanstack.com/guides/query-keys)
 
-В качестве параметра `key` можно использовать:
+As a parameter `key` you can use:
 
-- строку, например `key: 'query-name'`
-- массив, где в качестве элементов можно использовать любые сериализуемые данные, например `key: ['query-name', false, { bar: 'baz }]`
-- функция, которая принимает параметры, с которыми вызвана `query`, и возвращает строку - `key: (options) => 'query-name'`
-- функция, которая принимает параметры, с которыми вызвана `query`, и возвращает массив, где в качестве элементов можно использовать любые сериализуемые данные - `key: (options) => ['query-name', options, { bar: 'baz }]`
+- a string, such as `key: 'query-name'`
+- an array where any serializable data can be used as elements, for example `key: ['query-name', false, { bar: 'baz }]`
+- a function that takes the parameters with which `query` is called and returns a string - `key: (options) => 'query-name'`
+- a function that accepts parameters, with which `query` is called, and returns an array, where any serializable data can be used as elements - `key: (options) => ['query-name', options, { bar: 'baz' }]`
 
 ```ts
 import { createQuery, useQuery } from '@tramvai/react-query';
@@ -64,9 +114,9 @@ export function Component({ id }) {
 
 ### useQuery
 
-React-хук для работы с объектом `Query`
+React hook for working with `Query` object
 
-[Документация из react-query](https://react-query.tanstack.com/reference/useQuery)
+[react-query docs](https://react-query.tanstack.com/reference/useQuery)
 
 ```ts
 import { useQuery } from '@tramvai/react-query';
@@ -78,9 +128,33 @@ export function Component() {
 }
 ```
 
+### useQueries
+
+React Hook for working with the list of `Query` objects
+
+[react-query docs](https://react-query.tanstack.com/reference/useQueries)
+
+```ts
+import { useQueries } from '@tramvai/react-query';
+
+export function Component() {
+  const [
+    { data: data1, isLoading: isLoading1 },
+    { data: data2, isLoading: isLoading2 },
+  ] = useQueries([query1, query2]);
+
+  return (
+    <div>
+      <div>{isLoading1 ? 'loading1...' : data1}</div>
+      <div>{isLoading2 ? 'loading2...' : data2}</div>
+    </div>
+  );
+}
+```
+
 ### createInfiniteQuery
 
-Позволяет создать объект `InfiniteQuery` который позже можно будет использовать в компонентах с помощью `useInfiniteQuery`. Используется для выполнения запросов на получение последовательности данных, которые можно подгружать по мере работы компонента.
+Creates an `InfiniteQuery` object that can later be used in components using `useInfiniteQuery`. It is used to execute queries to obtain a sequence of data that can be loaded as the component runs.
 
 ```ts
 import { createInfiniteQuery } from '@tramvai/react-query';
@@ -108,9 +182,9 @@ const query = createInfiniteQuery({
 
 ### useInfiniteQuery
 
-React-хук для работы с объектом `InfiniteQuery`
+React hook for working with the `InfiniteQuery` object
 
-[Документация из react-query](https://react-query.tanstack.com/reference/useInfiniteQuery)
+[react-query docs](https://react-query.tanstack.com/reference/useInfiniteQuery)
 
 ```ts
 import { useInfiniteQuery } from '@tramvai/react-query';
@@ -143,7 +217,7 @@ export function Component() {
 
 ### createMutation
 
-Позволяет создать объект `Mutation` который позже можно будет использовать в компонентах с помощью `useMutation`. Используется для отправки и изменения данных в апи.
+Creates a `Mutation` object that can later be used in components using `useMutation`. Used to send and modify data in the api.
 
 ```ts
 import { createMutation } from '@tramvai/react-query';
@@ -167,9 +241,9 @@ const mutation = createMutation({
 
 ### useMutation
 
-React-хук для работы с объектом `Mutation`
+React hook for working with the `Mutation` object
 
-[Документация из react-query](https://react-query.tanstack.com/reference/useMutation)
+[react-query docs](https://react-query.tanstack.com/reference/useMutation)
 
 ```ts
 import { useMutation } from '@tramvai/react-query';
@@ -191,4 +265,12 @@ export function Component() {
 
 ## How-to
 
-[Примеры использования @tramvai/react-query](how-to/react-query-usage.md)
+[Examples of using @tramvai/react-query](how-to/react-query-usage.md)
+
+### Use `react-query` directly
+
+:::warning Prefer to use methods from the `@tramvai/react-query` as it is can work both with the `Query` wrapper and the query options to `react-query` itself :::
+
+You can get [`QueryClient`](https://react-query.tanstack.com/reference/QueryClient) from di by token `QUERY_CLIENT_TOKEN` or using method `useQueryClient` in React-components.
+
+To convert wrapped `Query` object to object acceptable by `react-query` use method [raw](#raw) of the `Query` instance.

package/lib/baseQuery/types.d.ts

@@ -1,4 +1,4 @@
-import type { Action, ActionConditionsParameters } from '@tramvai/core';
+import type { Action, ActionConditionsParameters, ActionContext } from '@tramvai/core';
 import type { QUERY_CLIENT_TOKEN } from '@tramvai/module-react-query';
 import type { QueryKey as ReactQueryKey, QueryOptions } from 'react-query';
 export declare const QUERY_PARAMETERS = "__query_parameters__";
@@ -12,8 +12,12 @@ export interface BaseCreateQueryOptions<Options, Deps> {
 export interface BaseQuery<Options, TCreateQuery, TQuery, TUseQuery> {
     [QUERY_PARAMETERS]: TCreateQuery;
     fork(options: TUseQuery): TQuery;
+    raw(context: ActionContext, options?: Options): TUseQuery;
     prefetchAction(options?: Options): Action<void, void, {
         queryClient: typeof QUERY_CLIENT_TOKEN;
     }>;
+    fetchAction(options?: Options): Action<void, void, {
+        queryClient: typeof QUERY_CLIENT_TOKEN;
+    }>;
 }
 export declare const isQuery: <Options, Result, TCreateQuery, TQuery, TUseQuery>(arg: BaseQuery<Options, TCreateQuery, TQuery, TUseQuery> | QueryOptions<Result, any, any, any>) => arg is BaseQuery<Options, TCreateQuery, TQuery, TUseQuery>;

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 export { createQuery } from './query/create';
-export { useQuery } from './query/use';
+export { useQuery, useQueries } from './query/use';
 export { createInfiniteQuery } from './infiniteQuery/create';
 export { useInfiniteQuery } from './infiniteQuery/use';
 export { createMutation } from './mutation/create';
 export { useMutation } from './mutation/use';
+export { useQueryClient } from 'react-query';

package/lib/index.es.js

@@ -4,8 +4,10 @@ import { QUERY_CLIENT_TOKEN } from '@tramvai/module-react-query';
 import isString from '@tinkoff/utils/is/string';
 import isArray from '@tinkoff/utils/is/array';
 import { useMemo } from 'react';
-import { useQuery as useQuery$1, useInfiniteQuery as useInfiniteQuery$1, useMutation as useMutation$1 } from 'react-query';
+import { useQuery as useQuery$1, useQueries as useQueries$1, useInfiniteQuery as useInfiniteQuery$1, useMutation as useMutation$1 } from 'react-query';
+export { useQueryClient } from 'react-query';
 import { useConsumerContext } from '@tramvai/state';
+import { useShallowEqual } from '@tinkoff/react-hooks';
 
 const QUERY_PARAMETERS = '__query_parameters__';
 const isQuery = (arg) => {
@@ -51,6 +53,9 @@ const createQuery = (queryParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawQuery$1(query, context, options);
+        },
         prefetchAction: (options) => {
             return createAction({
                 name: 'queryPrefetch',
@@ -66,6 +71,21 @@ const createQuery = (queryParameters) => {
                 },
             });
         },
+        fetchAction: (options) => {
+            return createAction({
+                name: 'queryFetch',
+                fn: (context, __, { queryClient }) => {
+                    return queryClient.fetchQuery(convertToRawQuery$1(query, context, options));
+                },
+                deps: {
+                    queryClient: QUERY_CLIENT_TOKEN,
+                },
+                conditions: {
+                    ...conditions,
+                    onlyServer: true,
+                },
+            });
+        },
     };
     return query;
 };
@@ -74,12 +94,25 @@ function useQuery(query, options) {
     const context = useConsumerContext();
     const resultQuery = useMemo(() => {
         if (isQuery(query)) {
-            return convertToRawQuery$1(query, context, options);
+            return query.raw(context, options);
         }
         return query;
     }, [query, context, options]);
     return useQuery$1(resultQuery);
 }
+function useQueries(queries) {
+    const context = useConsumerContext();
+    const memoQueries = useShallowEqual(queries);
+    const resultQueries = useMemo(() => {
+        return memoQueries.map((query) => {
+            if (isQuery(query)) {
+                return query.raw(context);
+            }
+            return query;
+        });
+    }, [memoQueries, context]);
+    return useQueries$1(resultQueries);
+}
 
 const convertToRawQuery = (query, context, options) => {
     const { key = defaultKey, fn, getNextPageParam, getPreviousPageParam, deps, conditions, infiniteQueryOptions, } = query[QUERY_PARAMETERS];
@@ -115,6 +148,9 @@ const createInfiniteQuery = (queryParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawQuery(query, context, options);
+        },
         prefetchAction: (options) => {
             return createAction({
                 name: 'infiniteQueryPrefetch',
@@ -130,6 +166,21 @@ const createInfiniteQuery = (queryParameters) => {
                 },
             });
         },
+        fetchAction: (options) => {
+            return createAction({
+                name: 'infiniteQueryFetch',
+                fn: (context, __, { queryClient }) => {
+                    return queryClient.fetchInfiniteQuery(convertToRawQuery(query, context, options));
+                },
+                deps: {
+                    queryClient: QUERY_CLIENT_TOKEN,
+                },
+                conditions: {
+                    ...conditions,
+                    onlyServer: true,
+                },
+            });
+        },
     };
     return query;
 };
@@ -138,7 +189,7 @@ function useInfiniteQuery(query, options) {
     const context = useConsumerContext();
     const resultQuery = useMemo(() => {
         if (isQuery(query)) {
-            return convertToRawQuery(query, context, options);
+            return query.raw(context, options);
         }
         return query;
     }, [query, context, options]);
@@ -182,6 +233,9 @@ const createMutation = (mutationParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawMutation(mutation, context, options);
+        },
     };
     return mutation;
 };
@@ -190,11 +244,11 @@ const useMutation = (mutation, options) => {
     const context = useConsumerContext();
     const resultMutation = useMemo(() => {
         if (isMutation(mutation)) {
-            return convertToRawMutation(mutation, context, options);
+            return mutation.raw(context, options);
         }
         return mutation;
     }, [mutation, context, options]);
     return useMutation$1(resultMutation);
 };
 
-export { createInfiniteQuery, createMutation, createQuery, useInfiniteQuery, useMutation, useQuery };
+export { createInfiniteQuery, createMutation, createQuery, useInfiniteQuery, useMutation, useQueries, useQuery };

package/lib/index.js

@@ -10,6 +10,7 @@ var isArray = require('@tinkoff/utils/is/array');
 var react = require('react');
 var reactQuery = require('react-query');
 var state = require('@tramvai/state');
+var reactHooks = require('@tinkoff/react-hooks');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,6 +62,9 @@ const createQuery = (queryParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawQuery$1(query, context, options);
+        },
         prefetchAction: (options) => {
             return core.createAction({
                 name: 'queryPrefetch',
@@ -76,6 +80,21 @@ const createQuery = (queryParameters) => {
                 },
             });
         },
+        fetchAction: (options) => {
+            return core.createAction({
+                name: 'queryFetch',
+                fn: (context, __, { queryClient }) => {
+                    return queryClient.fetchQuery(convertToRawQuery$1(query, context, options));
+                },
+                deps: {
+                    queryClient: moduleReactQuery.QUERY_CLIENT_TOKEN,
+                },
+                conditions: {
+                    ...conditions,
+                    onlyServer: true,
+                },
+            });
+        },
     };
     return query;
 };
@@ -84,12 +103,25 @@ function useQuery(query, options) {
     const context = state.useConsumerContext();
     const resultQuery = react.useMemo(() => {
         if (isQuery(query)) {
-            return convertToRawQuery$1(query, context, options);
+            return query.raw(context, options);
         }
         return query;
     }, [query, context, options]);
     return reactQuery.useQuery(resultQuery);
 }
+function useQueries(queries) {
+    const context = state.useConsumerContext();
+    const memoQueries = reactHooks.useShallowEqual(queries);
+    const resultQueries = react.useMemo(() => {
+        return memoQueries.map((query) => {
+            if (isQuery(query)) {
+                return query.raw(context);
+            }
+            return query;
+        });
+    }, [memoQueries, context]);
+    return reactQuery.useQueries(resultQueries);
+}
 
 const convertToRawQuery = (query, context, options) => {
     const { key = defaultKey, fn, getNextPageParam, getPreviousPageParam, deps, conditions, infiniteQueryOptions, } = query[QUERY_PARAMETERS];
@@ -125,6 +157,9 @@ const createInfiniteQuery = (queryParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawQuery(query, context, options);
+        },
         prefetchAction: (options) => {
             return core.createAction({
                 name: 'infiniteQueryPrefetch',
@@ -140,6 +175,21 @@ const createInfiniteQuery = (queryParameters) => {
                 },
             });
         },
+        fetchAction: (options) => {
+            return core.createAction({
+                name: 'infiniteQueryFetch',
+                fn: (context, __, { queryClient }) => {
+                    return queryClient.fetchInfiniteQuery(convertToRawQuery(query, context, options));
+                },
+                deps: {
+                    queryClient: moduleReactQuery.QUERY_CLIENT_TOKEN,
+                },
+                conditions: {
+                    ...conditions,
+                    onlyServer: true,
+                },
+            });
+        },
     };
     return query;
 };
@@ -148,7 +198,7 @@ function useInfiniteQuery(query, options) {
     const context = state.useConsumerContext();
     const resultQuery = react.useMemo(() => {
         if (isQuery(query)) {
-            return convertToRawQuery(query, context, options);
+            return query.raw(context, options);
         }
         return query;
     }, [query, context, options]);
@@ -192,6 +242,9 @@ const createMutation = (mutationParameters) => {
                 },
             });
         },
+        raw: (context, options) => {
+            return convertToRawMutation(mutation, context, options);
+        },
     };
     return mutation;
 };
@@ -200,16 +253,21 @@ const useMutation = (mutation, options) => {
     const context = state.useConsumerContext();
     const resultMutation = react.useMemo(() => {
         if (isMutation(mutation)) {
-            return convertToRawMutation(mutation, context, options);
+            return mutation.raw(context, options);
         }
         return mutation;
     }, [mutation, context, options]);
     return reactQuery.useMutation(resultMutation);
 };
 
+Object.defineProperty(exports, 'useQueryClient', {
+    enumerable: true,
+    get: function () { return reactQuery.useQueryClient; }
+});
 exports.createInfiniteQuery = createInfiniteQuery;
 exports.createMutation = createMutation;
 exports.createQuery = createQuery;
 exports.useInfiniteQuery = useInfiniteQuery;
 exports.useMutation = useMutation;
+exports.useQueries = useQueries;
 exports.useQuery = useQuery;

package/lib/infiniteQuery/create.d.ts

@@ -1,5 +1,2 @@
-import type { UseInfiniteQueryOptions, QueryKey as ReactQueryKey } from 'react-query';
-import type { ActionContext } from '@tramvai/core';
 import type { CreateInfiniteQueryOptions, InfiniteQuery } from './types';
-export declare const convertToRawQuery: <Options, PageParam, Result, Deps>(query: InfiniteQuery<Options, PageParam, Result, Deps>, context: ActionContext, options: Options) => UseInfiniteQueryOptions<Result, Error, Result, Result, ReactQueryKey>;
 export declare const createInfiniteQuery: <Options = unknown, PageParam = unknown, Result = unknown, Deps = unknown>(queryParameters: CreateInfiniteQueryOptions<Options, PageParam, Result, Deps>) => InfiniteQuery<Options, PageParam, Result, Deps>;

package/lib/mutation/create.d.ts

@@ -1,5 +1,2 @@
-import type { UseMutationOptions } from 'react-query';
-import type { ActionContext } from '@tramvai/core';
 import type { CreateMutationOptions, Mutation, MutationKey } from './types';
-export declare const convertToRawMutation: <Options, Variables, Result, Deps, Key extends MutationKey<Options>>(mutation: Mutation<Options, Variables, Result, Deps, Key>, context: ActionContext, options?: Options | undefined) => UseMutationOptions<Result, any, Variables, unknown>;
 export declare const createMutation: <Options, Variables, Result, Deps, Key extends MutationKey<Options>>(mutationParameters: CreateMutationOptions<Options, Variables, Result, Deps, Key>) => Mutation<Options, Variables, Result, Deps, Key>;

package/lib/mutation/types.d.ts

@@ -1,4 +1,4 @@
-import type { ActionConditionsParameters } from '@tramvai/core';
+import type { ActionConditionsParameters, ActionContext } from '@tramvai/core';
 import type { ProvideDepsIterator } from '@tinkoff/dippy';
 import type { MutationKey as ReactMutationKey, MutationOptions, UseMutationOptions } from 'react-query';
 export declare const MUTATION_PARAMETERS = "__mutations_parameters__";
@@ -12,6 +12,7 @@ export interface CreateMutationOptions<Options, Variables, Result, Deps, Key ext
 }
 export interface Mutation<Options, Variables, Result, Deps, Key extends MutationKey<Options>> {
     [MUTATION_PARAMETERS]: CreateMutationOptions<Options, Variables, Result, Deps, Key>;
-    fork(options: MutationOptions<Result, any, Variables, any>): Mutation<Options, Variables, Result, Deps, Key>;
+    fork(options: MutationOptions<Result, Error, Variables, any>): Mutation<Options, Variables, Result, Deps, Key>;
+    raw(context: ActionContext, options?: Options): UseMutationOptions<Result, Error, Variables>;
 }
 export declare const isMutation: <Options, Variables, Result, Deps, Key extends MutationKey<Options>>(arg: Mutation<Options, Variables, Result, Deps, Key> | MutationOptions<Result, any, Variables, any>) => arg is Mutation<Options, Variables, Result, Deps, Key>;

package/lib/query/create.d.ts

@@ -1,5 +1,2 @@
-import type { UseQueryOptions, QueryKey as ReactQueryKey } from 'react-query';
-import type { ActionContext } from '@tramvai/core';
 import type { CreateQueryOptions, Query } from './types';
-export declare const convertToRawQuery: <Options, Result, Deps>(query: Query<Options, Result, Deps>, context: ActionContext, options: Options) => UseQueryOptions<Result, Error, Result, ReactQueryKey>;
 export declare const createQuery: <Options = unknown, Result = unknown, Deps = unknown>(queryParameters: CreateQueryOptions<Options, Result, Deps>) => Query<Options, Result, Deps>;

package/lib/query/use.d.ts

@@ -2,4 +2,5 @@ import type { UseQueryOptions, QueryObserverResult } from 'react-query';
 import type { Query } from './types';
 declare function useQuery<Options extends void, Result, Deps>(query: UseQueryOptions<Result, Error> | Query<Options, Result, Deps>): QueryObserverResult<Result, Error>;
 declare function useQuery<Options, Result, Deps>(query: UseQueryOptions<Result, Error> | Query<Options, Result, Deps>, options: Options): QueryObserverResult<Result, Error>;
-export { useQuery };
+declare function useQueries<Result, Deps>(queries: Array<UseQueryOptions<Result, Error> | Query<any, Result, Deps>>): import("react-query").UseQueryResult<unknown extends Result ? Result : Result, Error>[];
+export { useQuery, useQueries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/react-query",
-  "version": "1.46.10",
+  "version": "1.48.2",
   "description": "",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -10,7 +10,7 @@
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "git@github.com:TinkoffCreditSystems/tramvai.git"
+    "url": "git@github.com:Tinkoff/tramvai.git"
   },
   "scripts": {
     "build": "tramvai-build --for-publish",
@@ -18,9 +18,10 @@
     "build-for-publish": "true"
   },
   "dependencies": {
-    "@tramvai/core": "1.46.10",
-    "@tramvai/module-react-query": "1.46.10",
-    "@tramvai/state": "1.46.10"
+    "@tinkoff/react-hooks": "0.0.23",
+    "@tramvai/core": "1.48.2",
+    "@tramvai/module-react-query": "1.48.2",
+    "@tramvai/state": "1.48.2"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.7.36",

package/README.en.md

@@ -1,194 +0,0 @@
-# React Query
-
-A library for handling requests in React components. Based on [react-query](https://react-query.tanstack.com/).
-
-## Explanation
-
-For the library to work, the module [@tramvai/module-react-query](references/modules/react-query.md) must be added to the tramvai application
-
-## Api
-
-### createQuery
-
-Allows you to create a `Query` object that can later be used in components using `useQuery`. Used to execute single data retrieval requests.
-
-```ts
-import { createQuery } from '@tramvai/react-query';
-
-const query = createQuery({
-  key: 'base',
-  fn: async (_, { apiClient }) => {
-    const { payload } = await apiClient.get('api/base');
-
-    return payload;
-  },
-  deps: {
-    apiClient: TINKOFF_API_SERVICE,
-  },
-});
-```
-
-#### Unique query parameters
-
-To create a generic `query` that takes parameters for a query, you must return a unique `key`,
-you can read more about this in the official documentation section [Query Keys](https://react-query.tanstack.com/guides/query-keys)
-
-As a parameter `key` you can use:
-
-- a string, such as `key: 'query-name'`
-- an array where any serializable data can be used as elements, for example `key: ['query-name', false, { bar: 'baz }]`
-- a function that takes the parameters with which `query` is called and returns a string - `key: (options) => 'query-name'`
-- a function that accepts parameters, with which `query` is called, and returns an array, where any serializable data can be used as elements - `key: (options) => ['query-name', options, { bar: 'baz' }]`
-
-```ts
-import { createQuery, useQuery } from '@tramvai/react-query';
-
-const query = createQuery({
-  key: (id: number) => ['user', id],
-  fn: async (id, { apiClient }) => {
-    const { payload } = await apiClient.get(`api/user/${id}`);
-
-    return payload;
-  },
-  deps: {
-    apiClient: TINKOFF_API_SERVICE,
-  },
-});
-
-export function Component({ id }) {
-  const { data, isLoading } = useQuery(query, id);
-
-  return <div>{isLoading ? 'loading...' : data}</div>;
-}
-```
-
-### useQuery
-
-React hook for working with `Query` object
-
-[Документация из react-query](https://react-query.tanstack.com/reference/useQuery)
-
-```ts
-import { useQuery } from '@tramvai/react-query';
-
-export function Component() {
-  const { data, isLoading } = useQuery(query);
-
-  return <div>{isLoading ? 'loading...' : data}</div>;
-}
-```
-
-### createInfiniteQuery
-
-Creates an `InfiniteQuery` object that can later be used in components using `useInfiniteQuery`. It is used to execute queries to obtain a sequence of data that can be loaded as the component runs.
-
-```ts
-import { createInfiniteQuery } from '@tramvai/react-query';
-
-const query = createInfiniteQuery({
-  key: 'list',
-  fn: async (_, start = 0, { apiClient }) => {
-    const { payload } = await apiClient.get<Response>('api/list', {
-      query: {
-        count: 30,
-        start,
-      },
-    });
-
-    return payload;
-  },
-  getNextPageParam: (page: Response) => {
-    return page.nextPage;
-  },
-  deps: {
-    apiClient: TINKOFF_API_SERVICE,
-  },
-});
-```
-
-### useInfiniteQuery
-
-React hook for working with the `InfiniteQuery` object
-
-[Документация из react-query](https://react-query.tanstack.com/reference/useInfiniteQuery)
-
-```ts
-import { useInfiniteQuery } from '@tramvai/react-query';
-
-export function Component() {
-  const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery(query);
-
-  if (isLoading) {
-    return 'loading...';
-  }
-
-  return (
-    <div>
-      <div>
-        {data.pages.map((page) => {
-          return page.list.map((entry) => {
-            return <div key={entry}>{entry}</div>;
-          });
-        })}
-      </div>
-      {hasNextPage && (
-        <button type="button" onClick={() => fetchNextPage()}>
-          Load more
-        </button>
-      )}
-    </div>
-  );
-}
-```
-
-### createMutation
-
-Creates a `Mutation` object that can later be used in components using `useMutation`. Used to send and modify data in the api.
-
-```ts
-import { createMutation } from '@tramvai/react-query';
-
-const mutation = createMutation({
-  key: 'post',
-  fn: async (_, data: string, { apiClient }) => {
-    const { payload } = await apiClient.post('api/post', {
-      body: {
-        data,
-      },
-    });
-
-    return payload;
-  },
-  deps: {
-    apiClient: TINKOFF_API_SERVICE,
-  },
-});
-```
-
-### useMutation
-
-React hook for working with the `Mutation` object
-
-[Документация из react-query](https://react-query.tanstack.com/reference/useMutation)
-
-```ts
-import { useMutation } from '@tramvai/react-query';
-
-export function Component() {
-  const { isLoading, mutate } = useMutation(mutation);
-
-  if (isLoading) {
-    return 'loading...';
-  }
-
-  return (
-    <button type="button" onClick={() => mutate('test')}>
-      Send data
-    </button>
-  );
-}
-```
-
-## How-to
-
-[Examples of using @tramvai/react-query](how-to/react-query-usage.md)