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

Question

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

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

问题是，它们都有相同的“加载”和“数据”变量，而且我在文档中的任何地方都看不到我们怎么会有不同的变量。我怎样才能区分它们？

Answer 1

这样，给他们一个别名。

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

Answer 2

是JSDestructuring assignment的对象解构。这里可以选择不使用，给不同的变量名。

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

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

---

• 参考：useQuery
的 Apollo 文档

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: [...]}