介紹

ApolloData 有位大大開發了 apollo upload 套件，這個套件有分前後端先來介紹Server Part如何設定使用

Server Part npm
https://www.npmjs.com/package/apollo-upload-server

apollo-upload-server 的部分程式碼說明 主要是在 endpoint grpahql 把 apolloUploadExpresss 加入

import { apolloUploadExpress } from 'apollo-upload-server'
 
// …
 app.use(
  '/graphql',
  bodyParser.json(),
  apolloUploadExpress(/* Options */),
  graphqlExpress(/* … */)
)

apolloUploadExpress 的 options有
maxFieldSize (integer): 不是 multipart form 傳來的檔案大小;預設值1 MB
maxFileSize (integer): 檔案最大Size 預設是無限大建議要設定避免ServerGG
maxFiles (integer): 如果同時最大的上傳數量 預設是無限大建議要設定避免ServerGG

定義schema (typeDefs) 與 resovler

import { makeExecutableSchema } from 'graphql-tools'
import { GraphQLUpload } from 'apollo-upload-server'
 
const schema = makeExecutableSchema({
  typeDefs: [`scalar Upload`],
  resolvers: {
    Upload: GraphQLUpload
  }
})

使用擴展的 方法定義 upload ， import { GraphQLScalarType } from 'graphql'

export const GraphQLUpload = new GraphQLScalarType({
  name: 'Upload',
  description:
    '擴展Upload型別補充,文件上傳的 promise ，解析包含`stream`，`filename`，`mimetype`和`encoding`的對象',
  parseValue: value => value,
  parseLiteral() {
    throw new Error('不支持上傳的文字')
  },
  serialize() {
    throw new Error('上傳不支持序列化')
  }
})

當request是 match multipart/form-data 的時候就做檔案處理 processRequest

export const apolloUploadExpress = options => (request, response, next) => {
  if (!request.is('multipart/form-data')) return next()
  processRequest(request, options)
    .then(body => {
      request.body = body
      next()
    })
    .catch(next)
}

processRequest的部分主要使用 busboy在處理檔案的部分 這部分Server Part2再來說明

https://github.com/mscdex/busboy

總結

在使用ApolloData 一樣在Client的部分，透過 multipart/form-data 到 graphql endpoint ，apollo-upload-server 提供的 apolloUploadExpress option 記得要設定檔案的大小與數量避免主機被攻擊