介紹

ApolloData的Client 的Upload套件，也是同一個作者開發的連結在最底下 apollo-upload-client

安裝

npm install apollo-upload-client apollo-link graphql

程式碼

import { createUploadLink } from 'apollo-upload-client'

const link = createUploadLink(/* Options */)

Options選項

includeExtensions (boolean): 切換發送extensions set 到GraphQL服務器 (default: false).
uri (string): GraphQL endpoint URI (default: /graphql).
credentials (string): 覆蓋 fetchOptions.credentials.
headers (object): 合併和覆蓋 fetchOptions.headers.
fetchOptions (object): fetch init; 上傳時要求被覆蓋.
fetch (function): Fetch API to use (default: Global fetch).

單一檔案上傳 要把target.files[0] 加上[0]

import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

export default graphql(gql`
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      id
    }
  }
`)(({ mutate }) => (
  <input
    type="file"
    required
    onChange={({ target }) =>
      target.validity.valid && mutate({ variables: { file: target.files[0] } })
    }
  />
))

多個檔案上傳 多了input multiple target.files不需要使用 index ,gql的定義 形態要定義[Upload!]!
意思是上傳的型態是陣列!的意思是非必要

import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

export default graphql(gql`
  mutation($files: [Upload!]!) {
    uploadFiles(files: $files) {
      id
    }
  }
`)(({ mutate }) => (
  <input
    type="file"
    multiple
    required
    onChange={({ target }) =>
      target.validity.valid && mutate({ variables: { files: target.files } })
    }
  />
))

React Native 的部分，包得更方便使用 單一檔案使用ReactNativeFile 多個檔案使用ReactNativeFile.list(形態陣列) 這樣就好了，前端的部分就這樣就完成了

import { ReactNativeFile } from 'apollo-upload-client'

const file = new ReactNativeFile({
  uri: '…',
  type: 'image/jpeg',
  name: 'photo.jpg'
})

const files = ReactNativeFile.list([
  {
    uri: '…',
    type: 'image/jpeg',
    name: 'photo-1.jpg'
  },
  {
    uri: '…',
    type: 'image/jpeg',
    name: 'photo-2.jpg'
  }
])

總結

這個套件前端的部分也是寫少少的code，這邊要注意options的uri跟apollodataClient的 graphql預設值都是/graphql但如果 apolloClient預設值有更改 這邊的 uri也要改一下要mapping

https://github.com/jaydenseric/apollo-upload-client