获取策略：Apollo GraphQL useQuery

什么是Apollo GraphQL？

Apollo GraphQL 是用于构建客户端应用程序的开源应用程序接口（API），它利用了GraphQL查询语言与web服务的数据交互，以提供可靠、可扩展、高效的API交互。

什么是useQuery？

useQuery 是Apollo GraphQL提供的钩子函数，它允许开发人员利用React函数式组件的优势从GraphQL API获取数据。

如何使用useQuery？

要使用useQuery，您需要在项目中安装Apollo Client，安装方法请参阅官方文档。

安装完成后，您需要在React函数组件中从@apollo/client中导入gql和useQuery。接下来，您需要定义您要从GraphQL API中检索的查询。此查询需要在gql字符串标记中定义。

下面是一个例子：

import { gql, useQuery } from '@apollo/client';

const GET_ALL_POSTS = gql`
  query {
    allPosts {
      title
      author
      content
    }
  }
`;

该查询将获取所有帖子的标题、作者和内容。

接下来，您可以在React函数组件中使用useQuery来调用该查询。例如：

function AllPosts() {
  const { loading, error, data } = useQuery(GET_ALL_POSTS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      {data.allPosts.map(post => (
        <div key={post.title}>
          <h2>{post.title}</h2>
          <p>{post.author}</p>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

如上所示，useQuery 返回一个对象，其中包含 loading, error, 和 data属性。在上面的例子中，我们利用了这些属性来展示了一个带有加载动画和错误处理的简单AllPosts组件。

总结

利用useQuery钩子函数，您可以利用React函数式组件的优势从GraphQL API获取数据。定义GraphQL查询和在React函数式组件中处理返回结果就相当简单了。

更多关于useQuery和其他 Apollo WebHooks 的详细信息，请查看官方文档。