技术Sep 19, 20191
Apollo-Client 文件上传

使用apollo-client上传文件

apollo 文件上传

依赖

  • apollo-client
  • apollo-link
  • apollo-upload-client
  • apollo-cache-inmemory

客户端创建

apolloClient.js

import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client'
import { ApolloLink, from } from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'

const authLink = new ApolloLink((operation: Operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: getToken(),
    },
  })
  return forward(operation)
})

const uploadLink = createUploadLink({
  uri: `${API_URL}`,
})

export const apolloClient = new ApolloClient({
  link: from([authLink, uploadLink]), // uploadLink一定要放最后
  cache: new InMemoryCache(),
})

使用

uploadFile.js

import gql from 'graphql-tag'
import { apolloClient } from 'apolloClient'

export function uploadFile(file) {
  const query = gql`
    mutation($file: Upload!) {
      uploadFile(file: $file) {
        id
        attachname
        filename
      }
    }
  `

  return apolloClient.mutation({
    mutation,
    variables: {
      file,
    },
  })
}
0