如何在React中使用Apollo的多个useQuery()钩子

Question

我需要在我的文件中使用 2 个查询，我是这样写的：

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

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

Answer 1

就是JS的对象解构解构赋值。你可以选择不在这里使用它来给出不同的变量名称。

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

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

---

• 参考：useQuery
的 Apollo 文档

Answer 2

这样，给他们一个别名。

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

Answer 3

const GET_DATA = gql`
  query {
    characters {
      phone
      rating
      ratingType
      review
      city
      id
    }
    singleCharacter {
      title
      text
    }
  }
`;

const {loading, data } = useQuery(GET_DATA);

console.log(data) //{characters: [...], singleCharacter: [...]}