从用户的个人资料图片到其他媒体资产，通过文件上传进行数据收集和存储到云服务已成为大多数现代应用程序的基本功能。在本文中，您将了解如何在 GraphQL 应用程序中实现文件上传。 通过利用React-Apollo，本文重点介绍如何将文件上传功能添加到由 GraphQL API 提供支持的新的或现有的前端应用程序中。为了实现这一目标，我们将构建这个演示应用程序，允许用户在创建帐户时上传个人资料图片以及他们的首选用户名。当我们这样做时，我们将逐步完成以下过程： 创建一个 Node GraphQL 后端应用程序，能够接受上传的文件并将其发送到 Google Cloud 中的存储桶。 设置与 Google 云存储的连接。 收集 React 应用程序中的文件输入，并使用 React Apollo 将它们发送到 GraphQL 后端应用程序。
注意：虽然所有代码片段都已解释
但要完全理解它们，您应该了解JavaScript 的 es6 语法、 GraphQL和React.js。 本文对于有兴趣或考虑在 React 和 Nodejs GraphQL 应用程序中使用 Google Cloud Storage 进行文件上传的开发人员来说将是有益的。虽然 新西兰手机号码列表 本文不是GraphQL 的介绍，但本文中使用的每个 GraphQL 概念都进行了解释和引用，以便更好地理解。 设置节点 GraphQL API # 我们将构建一个 GraphQL API 供我们的 React 应用程序使用。该后端应用程序将接收用户上传的图像并将上传的文件发送到Google Cloud Storage。 首先，我们使用Apollo-Server-express和Express.js库来快速引导 GraphQL API。我们可以通过运行以下命令来做到这一点：创建的File对象类型包含三个字符串字段；filename, mimetype and encoding这些通常都包含在任何上传的文件中。接下来，我们为具有两个字符串字段的用户创建了一个对象类型。
该username字段是用户创建帐户
时输入的用户名，而 rlimageu是上传到 Google 云存储的图片的 url。它将被传递到图像src属性中以将存储的图像呈现给用户。 接下来，我们 AERO 领先 创建查询类型，它定义应用程序中的查询解析器函数。在我们的例子中，它是用于获取用户数据的单个查询。此处的查询getUser返回 User 对象类型中的所有数据。 我们还创建了 Mutation 类型，它定义了以下两个突变解析器函数； 第一个createUser接受用户名（字符串标量类型）和来自 React-Apollo 的上传输入类型。成功创建帐户后，它返回用户对象类型中包含的所有数据 第二个deleteUser不接受任何参数，但返回一个布尔值来指示删除是否成功。 注意：附加在这些值上的感叹号 ( ) 使它们成为强制值，这意味着该操作中必须存在数据。! 实现解析器函数 # 在编写了在应用程序中定义解析器函数的模式后，我们现在可以继续实现之前在模式中定义的解析器的函数。 getUser我们从返回用户数据的解析器函数开始。
