React 前端的文件上传能够通过 Apollo Upload Client 来实现。

GraphQL 使咱们开发者可能在前端利用和 REST API 之间实现一个弱小而灵便的形象层。作为一个 3 个月前才接触到 GraphQL 的实习生，我浏览了许多文章、博客文章和 GraphQL 社区成员筹备的指南，理解如何构建 GraphQL 服务并将其连贯到 React 利用。但这些资源都没有提到应用 GraphQL 能够上传文件。

文件上传也能够这样说吗？兴许 …

当我授命治理和构建一个新的性能，包含应用 GraphQL 实现文件上传时，我意识到尽管这个性能蕴含在 Apollo Server 2.0 中，但大多数对于这个性能的资源都被安排在不同的资源库中，而且指南也脱漏了重要的步骤。

我从浏览官网博客文章开始钻研这个性能，并虔诚地依照它的步骤进行钻研，但可怜的是，这是我进入神秘谬误之海的入口，只因为博客文章不残缺。我花了近一周的工夫，在 github 仓库中跳转 GraphQL 文件上传性能，以找出我的代码有什么问题。

因而，我决定收集这篇指南，展现通过应用 GraphQL 渐变实现根本的文件上传性能 GraphQL 服务器和 React 客户端的必要步骤。另外，谈谈我对 GraphQL 这个性能的教训，以及为什么作为一个公司咱们决定抉择不同的办法。

在上面的局部中，本指南将带您通过必要的步骤来创立一个 GraphQL 服务器，该服务器能够解决从 React 应用程序与 Apollo Client 发送的文件上传渐变。GraphQL 服务器要有 2 种不同的性能；将文件保留到文件系统中 和将其流进 S3 bucket 中。

Basic Architecture

所有部件的示意图，更多细节请查看

（https://github.com/epalaz/gra…）。

在本指南中，咱们的零碎将由以下局部组成。
1.带有 Apollo 客户端包的 React 利用。
2.应用 Apollo 服务器包的 GraphQL 服务器。

咱们的 GraphQL 服务器将有能力将上传的文件保留到文件系统中，并将接管到的数据流流进 AWS 上的 S3 Bucket。为此，咱们将有 2 个查问：singleUpload和singleUploadStream。

Step 1: Preparing GraphQL Server

Setup

要应用 apollo-server 库创立一个 GraphQL 服务器，最简略的办法是依照它的官网指南，但我还是会在这里列出所需步骤。
首先创立一个目录并安装包。

    $ mkdir your_dir_name  
    $ cd your_dir_name  
    $ yarn init --yes  
    $ yarn add apollo-server graphql graphql-upload  
    $ yarn add aws-sdk

这组命令应该安装包和创立。下一步就是开始定义出类型定义和解析器。

类型定义和渐变解析器

渐变的类型定义和填充物查问

咱们定义了 2 种不同的渐变。singleUpload渐变用于上传文件并将其保留到文件系统的一个目录中，而 singleUploadStream 则用于流式传输到 S3 bucket。这些渐变采纳 Upload 标量类型，在 Apollo Server 2.0 中是默认的，所以它的解析是由 apollo 服务器本人实现的。Apollo 服务器将多局部申请模式映射到这个 Upload 标量，并为文件生成一个 承诺 。这两个渐变都会返回 文件 类型，该类型由 文件名、mimetype和 编码 字段组成，尽管这并不合乎现实生活中的日程安排，但返回文件的正确字段示意文件正确上传至 GraphQL 服务器。

SingleUpload 和 singleUploadStream 渐变的解析器

在这些文件上传解析器中，一个要害的细节是文件参数返回的承诺。为了可能读取文件流，咱们应该期待承诺被解析。在这个例子中，两个渐变解析器应用了不同的办法。singleUpload通过应用 then() 返回承诺，并将解析后的流保留到文件系统中。另一方面，singleUploadStream应用 await 期待承诺解析，通过应用文件流将文件上传到 S3。这些解析器的另一个区别是，在解析器函数外面应用 await 须要将其定义为 async，而singleUpload 解析器能够放弃同步。

注：旧的例子能够显示文件具备 filed stream，而不是 createReadStream 函数。最新的变更请查看 graphql-upload repository。变动的 PR](https://github.com/jaydenseri…。

配置服务器和 AWS SDK。

这个 server.js 文件蕴含了在 localhost 的 4000 端口上启动 Apollo 服务器并配置 AWS JavaScript SDK 的代码。(更多细节请参考文档)。应用类型定义和渐变解析器创立 ApolloServer 实例应该足以解决文件上传，以便保留在文件系统中并上传到 S3。如果你须要进一步帮忙在 AWS 上创立 S3 Buckets，请参考这个链接。

    const {ApolloServer, gql} = require('apollo-server');
    const fs = require('fs')
    const typeDefs = gql`  
      type File {
        filename: String!
        mimetype: String!
        encoding: String!
      }
      type Query {_ : Boolean}
      type Mutation {singleUpload(file: Upload): File!,    
      }
    `;
    const resolvers = {
      Mutation: {singleUpload: (parent, args) => {
          return args.file.then(file => {const {createReadStream, filename, mimetype} = file
            const fileStream = createReadStream()
            fileStream.pipe(fs.createWriteStream(`./${filename}`))
            return file;
          });
        },
      },
    };
    const server = new ApolloServer({typeDefs, resolvers});
    server.listen().then(({ url}) => {console.log(`\`????  Server ready at ${url}`);
    });
    });

您能够通过键入以下内容测试 GraphQL 服务器

$ cd your_project_dir  
$ node server.js

到你的控制台。这应该启动服务器的端口 4000 的 localhost。在这之后键入 localhost:4000 到你的浏览器，你应该可能看到 Playground 页面上，你能够发送查问和渐变到服务器进行测试，也能够看到主动生成的文件的根底上。

Apollo Server 游乐场截图显示定义的渐变和查问。

当初，你能够验证你的渐变和查问是否被服务器辨认，你曾经筹备好从你的 React 利用中向服务器发送 graphql 申请。

只管 graphiql 自身的 ide 不反对，然而能够应用 altair 测试上传文件和查看后果。

Step 2: Creating the React Application

为了轻松地创立咱们的 react 利用和它的模板代码，咱们将使用户 create-react-app 工具由 Facebook 开发。

$ yarn create react-app your-app-name。
$ yarn add apollo-client apollo-upload-client react-apollo graphql-tag

这条命令应该创立一个给定名称的 react 利用目录，并主动生成模板代码，开始开发咱们的利用。你能够通过输出以下命令来测试这个命令是否胜利

$ 纱线开始

这时应该在 localhost:3000 端口上启动开发服务器，并进行实时更新。

由 create-react-app 创立的利用示例。

如果你能看到这个屏幕，阐明你的我的项目曾经设置胜利，你能够开始编辑这个模板来上传你的文件。

配置 Apollo 客户端并为渐变筹备 Schemas。

        import React from 'react';
        import logo from './logo.svg';
        import './App.css';
        import {InMemoryCache} from 'apollo-cache-inmemory'
        import {createUploadLink} from 'apollo-upload-client'
        import {ApolloClient} from "apollo-client"
        import {ApolloProvider, Mutation} from "react-apollo"
        import gql from "graphql-tag"
        const apolloCache = new InMemoryCache()
        const uploadLink = createUploadLink({
          uri: 'http://localhost:4000', // Apollo Server is served from port 4000
          headers: {"keep-alive": "true"}
        })
        const client = new ApolloClient({
          cache: apolloCache,
          link: uploadLink
        })
        const UPLOAD_FILE = gql`
          mutation SingleUpload($file: Upload) {singleUpload(file: $file) {
              filename
              mimetype
              encoding
            }
          }
        `;
        function App() {
          return (
            <div className="App">
              <ApolloProvider client={client}>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Save Local</h2>
                        <Mutation mutation={UPLOAD_FILE}>
                            {(singleUpload, { data, loading}) => {console.log(data)
                                return (<form onSubmit={() => {console.log("Submitted")}} encType={'multipart/form-data'}>
                                            <input name={'document'} type={'file'} onChange={({target: { files}}) => {const file = files[0]
                                                file && singleUpload({variables: { file: file} })
                                            }}/>{loading && <p>Loading.....</p>}</form>)}
                            }
                        </Mutation>
                </header>
              </ApolloProvider>
            </div>
          );
        }
        export default App;

这段代码创立了一个根本的 UI，有 1 个表单，一个是 singleUpload，在这个例子中，onChange 事件被用来启动文件上传渐变函数，但你也能够抉择用你所抉择的事件来启动它。做文件上传 onChange 能够让你在文件被选中后立刻上传。另一个细节是将表单元素的encType 为multipart/form-data。查看这个链接来浏览对于 GraphQL 多局部申请标准的更多细节。在设置了这些组件的渲染函数后，你的 UI 应该看起来有点相似于这样。

React 利用实例的 UI

第三步：测试和上传文件

** 测试文件系统保留
在测试之前，请确保服务器和 react 应用程序都已启动并运行。如果没有，请依照步骤 1 和 2 启动它们。让咱们尝试用singleUpload** 渐变上传一个文件，看看它是否保留在服务器文件系统中。

如果你查看控制台，你应该能够看到 GraphQL 服务器返回的上传文件信息。这意味着咱们的上传胜利了，剩下的事件就是验证服务器是否将文件保留到文件系统中。

Aaand voila，”no-image.png “ 文件胜利上传并保留到文件系统。
能够通过 chrome devtools 查看具体的提交内容。看到这个内容，再去浏览 graphql 文件提交标准，会容易不少。并且，能够参照此标准，应用 Vanillajs 来编写客户端代码，而不是非要应用 React 不可。