GraphQLでファイルアップロード

GraphQL(Appolo Server)でファイルをアップロードする。
サーバ側はnode.jsを使う。
クライアントはAltair GraphQL Clientと使う。

サンプルのソースコードは以下。

• ymatzki/graphql-server-example: Learn GraphQL.

事前準備

Get started with Apollo Server - Apollo Server - Apollo GraphQL Docsに従う。

$ mkdir graphql-server-example ;\
  cd graphql-server-example
$ npm init --yes
$ npm install apollo-server graphql

サーバ

File uploads - Apollo Server - Apollo GraphQL Docsをほぼそのまま使う。
若干の変更として、アップロードが成功したときにメッセージを表示するように変更。

file-uploads/index.js

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type File {
    filename: String!
    mimetype: String!
    encoding: String!
  }

  type Query {
    uploads: [File]
  }

  type Mutation {
    singleUpload(file: Upload!): File!
  }
`;

const resolvers = {
  Query: {
    uploads: (parent, args) => {},
  },
  Mutation: {
    singleUpload: (parent, args) => {
      return args.file.then(file => {
        console.log(`📁 File get ${file.filename}`);
        return file;
      });
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

サーバを起動する。

$ node file-uploads/index.js
🚀 Server ready at http://localhost:4000/

クライアント

アップロードするファイルの準備。

echo "FOO" > file-uploads/foo.txt

Altair GraphQL Clientでファイルをアップロードする。

それぞれ以下を入力しSend Requestを実行。

• URL

http://localhost:4000

• graphQL query

mutation($file: Upload!){
  singleUpload(file: $file){
    filename
    mimetype
    encoding
  }
}

• Choose file

foo.txt

• File name

file

成功すればサーバに以下のログが出力される。

📁 File get foo.txt