React + GraphQL 入门

如何在 React 应用中实现 GraphQL？让我们使用React Apollo。这个库允许你从 GraphQL 服务器获取数据，并将其用于React框架。

设置项目

开始之前，请确保已安装 Node.js。首先，我们需要设置一个新的 React 项目。最简单的方法是使用create-react-app，它允许你创建一个无需任何构建配置的新 React 项目。

安装依赖项

完成上述操作后，下一步就是安装依赖项。只需一个 NPM 命令即可安装以下软件包：

• apollo-boost：包含所有必要的 Apollo Client 组件的包
• react-apollo：React 的视图层
• graphql& graphql-tag：解析 GraphQL 查询时都需要

创建客户端

现在你需要创建一个Apollo Client实例。你可以App.js通过添加以下代码来实现：

创建 GraphlQL 端点

首先，您真正需要的只是 GraphQL 服务器的端点。假设您已经创建了 GraphQL 模式（您可以在这里查看如何快速创建）。您可以在 中定义它，uri或者默认情况下，它将作为/graphql与您的应用程序位于同一主机上的端点。

将您的 React 应用程序与 Apollo 连接起来

要将 Apollo Client 连接到 React，请使用ApolloProvider从 导出的组件react-apollo。其ApolloProvider工作原理类似于 React 的上下文提供程序：

• 它包装了你的 React 应用，
• 将客户置于上下文中，

让您可以在组件树中的任何位置访问它。

你成功了！

您的第一个带有 GraphQL 的 React 应用程序已启动并运行，您可以开始使用 GraphlQL 查询获取一些数据！