Как лучше структурировать запросы на React-Query?

Question

Как лучше структурировать запросы на React-Query?

Союз Здравых Сил Профи (517), на голосовании 3 месяца назад

Работая с запросами на Redux - использую RTK-Query, там всё понятно, есть общее "хранилище" таких запросов, созданное через createApi(), где мы пишем все запросы

Но работая на Zustand - использую React-Query, и по нему вопросы - запросы там пишутся в хуках useQuery()/useMutation(), но какого-то общего объекта-хранилища, где можно писать все эти запросы - нет
Как я понял - в доках предлагают писать запросы сразу в Компонентах. То есть в каком-то Компоненте нужна функция-запрос - там вызываешь эти хуки и тд. Мне кажется это неудобно

Решил сделать так - написать все запросы в 1м месте(правда из-за того что useQuery/useMutation - хуки, пришлось создавать для них компонент):

 // React-Query 
import { useQuery, useMutation } from '@tanstack/react-query' 
 
import axios from 'axios' 
 
 
export const ZustandQueries = () => { 
 
    const BASE_URL = "http://localhost:3000" 
 
    return ({ 
         
        getMainDataCards: useQuery({ 
            queryKey: ['mainCards'], 
            queryFn: () => { 
                return axios({ 
                    url: `${BASE_URL}/cards?_limit=6`, 
                }) 
            } 
        }), 
        getPageDataCards: useQuery({ 
            queryKey: ['pageCards'], 
            queryFn: () => { 
                return axios({ 
                    url: `${BASE_URL}/cards`, 
                }) 
            } 
        }), 
        getOneCards: useQuery({ 
            queryKey: ['oneCard'], 
            queryFn: (id) => { 
                return axios({ 
                    url: `${BASE_URL}/cards?=${id}`, 
                }) 
            } 
        }), 
 
    }) 
}

Как вы думаете - лучше делать как я(всё в 1м месте), или всё таки работать с запросами непосредственно в Компонентах?

Answer 1

Я считаю, что структурировать запросы React-Query лучше всего, используя подход с разделением по модулям или файлам. Это повышает читаемость и поддерживаемость кода. Вот несколько рекомендаций:

## Разделяйте запросы и мутации по отдельным файлам или модулям

Храните запросы и мутации в отдельных файлах или модулях, сгруппированных по "фичам" или разделам приложения. Например:

```
api/endpoints/
message.ts
useGetMessages
useCreateMessage
useDeleteMessage
user.ts
useGetUsers
useUpdateUser
```

Это делает код более организованным и позволяет легко повторно использовать хуки в разных местах приложения[1][2].

## Используйте фабрики ключей запросов

Создайте фабрики для генерации ключей запросов, которые можно будет использовать в хуках. Это упростит работу с ключами и инвалидацию запросов[1].

## Экспортируйте хуки напрямую

Не возвращайте хуки из других хуков, а экспортируйте их напрямую из модуля[1]. Это более идиоматично для React.

## Используйте TypeScript

Используйте TypeScript для типизации всех аспектов запросов: параметров, возвращаемых данных, ошибок. Это поможет избежать ошибок во время разработки[1][4].

## Не храните все ключи запросов глобально

Не храните все ключи запросов в одном глобальном файле. Вместо этого держите их рядом с соответствующими запросами в файлах модулей. Это повышает связность и снижает зацепление[4].

## Всегда используйте массивы для ключей

Всегда используйте массивы для ключей запросов, даже если они состоят из одной строки. Это делает подход более унифицированным[4].

## Структурируйте ключи от общего к частному

Структурируйте ключи запросов от самого общего к самому конкретному, используя несколько уровней детализации. Например:

```
['todos', 'list', { filters: '...' }]
['todos', 'detail', todoId]
```

Это позволяет легко инвалидировать связанные запросы[4].

В целом, я рекомендую использовать подход с разделением запросов по модулям, экспортируя хуки напрямую и используя фабрики ключей. Это делает код более читаемым, поддерживаемым и масштабируемым по мере роста приложения.

[1] https://www.reddit.com/r/reactjs/comments/xub2eu/how_do_you_structure_your_project_when_using/
[2] https://www.linkedin.com/pulse/react-query-best-practices-vs-pitfalls-hamdi-kahloun-s5oie
[3] https://www.smashingmagazine.com/2022/01/building-real-app-react-query/
[4] https://tkdodo.eu/blog/effective-react-query-keys
[5] https://tanstack.com/query/v4/docs/framework/react/community/tkdodos-blog