如何在React中使用Apollo的多个useQueries钩子

问题描述

我需要在文件中使用2个查询，我这样编写它们：

const {loading,data } = useQuery(getCharactersQuery);
const {loading,data} = useQuery(getSingleCharacterQuery);

问题在于，它们都具有相同的“加载”和“数据”变量，我在文档中的任何地方都看不到我们如何拥有不同的变量。我该如何区分它们？

解决方法

这样，通过给他们一个别名。

const {loading,data } = useQuery(getCharactersQuery);
const {loading: singleCharacterLoading,data: singleCharacterData} = useQuery(getSingleCharacterQuery);

,

这是JS Destructuring assignment的对象分解。您可以选择此处不使用它来提供不同的变量名称。

const resCharacters = useQuery(getCharactersQuery);
const resSingleCharacter = useQuery(getSingleCharacterQuery);

if (resCharacters.loading || resSingleCharacter.loading) return 'Loading...';
...

---

• Ref：useQuery的Apollo文档