Как получить n зависимых данных с помощью ответного запроса

Question

Мне нужна помощь с библиотекой реагировать-запрос . Я получаю список объектов, а затем для всех мне нужно получить дополнительные данные из другого сервиса. Как я должен сделать это с реагирующим запросом useQuery hook?

Пример 1 :

const { data} = useQuery("USERS", fetchUsers);
data.map(user => useQuery(["ACCOUNT", {userId: user.id}], 
                 ({userId}) => fetchAccount(userId)));

Ошибка:

ESLint: React Hook useQuery нельзя вызвать внутри обратного вызова. React Hooks должны вызываться в компоненте функции React или в пользовательской функции React Hooks. (реактивные крючки / правила крючков)

Answer 1

Я нашел ответчик, предоставленный автором реагирующего запроса:

Из того, что вы описали, это выглядит как класс c "Я хочу использовать ловушки React в массиве -mode ", в которой мы определенно все были раньше.

99,9% времени, я чувствую, что ответом на это затруднительное положение является рендеринг использования крючков в несколько компонентов и составление их результатов после рендеринга, но Здесь есть определенные крайние случаи и множество компромиссов. Тем не менее, это лучшее решение, которое у нас есть на данный момент, так как нет замечательного способа использоватьMapHooks (item => useQuery (item), items). Это было бы действительно здорово, но, поверьте мне, я пошел по этому пути, и хотя я получил что-то, чтобы работать более или менее, это в конечном итоге усложнило мой код намного больше, чем я ожидал. В настоящее время React Query, скорее всего, не получит ту функцию, о которой вы говорите, поскольку сама библиотека использует хуки, она связана с той же механикой, что и вы, и потребует огромного количества реархитектуры, чтобы даже приблизиться к тому, что вы переписываю. Возврат инвестиций не стоил бы и, вероятно, ухудшил бы остальную часть библиотеки как с точки зрения производительности, размера, так и сложности API.

Чтобы решить вашу конкретную проблему c на сегодняшний день, я бы предложил три возможных решения. :

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

2. Составьте запросы сборщика информации о столбцах на несколько компонентов, которые ничего не рендерит, и вместо этого передайте им опору, которая позволяет им сообщить о своих результатах обратно в родительский компонент, а затем скомпоновать их результаты в родительском компоненте в один массив столбцов.

3. Создайте свой собственный маленький «кэш» для хранения списка уже извлеченную информацию о столбце, затем объедините ваши извлекающие логи c в один запрос. Используйте свой пользовательский объект кэша, чтобы заполнить слоты в этом массиве, когда данные доступны, а также обновлять его, очищая кэш так часто, как вы считаете нужным. Я бы посчитал это последним средством, поскольку вы, по сути, начали бы управлять своим собственным кешем, а это именно то, для чего предназначен React Query. Если вы попали сюда, я бы посоветовал оценить преимущества, которые вы получаете с помощью React Query, в целом. Это может быть один крайний случай, когда стратегия кеширования / извлечения React Query не подходит, и это хорошо.

Надеюсь, это поможет!

https://github.com/tannerlinsley/react-query/issues/138#issuecomment -589709270