@Danila232

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

Работая с запросами на 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м месте), или всё таки работать с запросами непосредственно в Компонентах?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
Seasle
@Seasle Куратор тега React
Поработав какое-то время с React Query могу выделить следующие моменты:
1. Не стоит пытаться объявлять все query за один раз - они "подвисают" в приложении и не используются. Это можно увидеть в React Query Devtools.
2. Можете вынести сами запросы в функци на отдельный слой/уровень/файл, и уже в useQuery в queryFn и в useMutation в mutationFn использовать функции.
3. Сложную бизнес-логику можно смело убрать под хук, в котором будете вызывать, обрабатывать и возвращать данные из useQuery/useMutation'а.
4. React Query - библиотека не для работы с запросами, это, по сути, ещё одно хранилище, которое просто хранит результаты Promise-операций.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы