如何在 React 中使用 Apollo 的多个 useQueries() 钩子答案

【问题标题】：How to use Apollo's multiple useQueries() hooks in React如何在 React 中使用 Apollo 的多个 useQueries() 钩子
【发布时间】：2020-12-19 18:51:08
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

这样，给他们一个别名。

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

【讨论】：

【解决方案2】：

这是 JS Destructuring assignment 的对象解构。您可以在这里选择不使用它来赋予不同的变量名称。

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

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

参考：useQuery 的 Apollo 文档

【讨论】：

【解决方案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: [...]}

【讨论】：

作者特意问了在需要使用多个查询时如何解决这个问题。另外，请解释您的代码/它背后的想法以及它解决问题的原因。
很明显，请求是发往一个数据库的，所以我们可以将多个请求合二为一。