Apollo-Server-Express没有收到上载对象 [英] Apollo-Server-Express not receiving Upload Object

问题描述

我正在尝试使用apollo-server-express和apollo-client上传文件.但是，当文件对象传递到解析器时，它始终为空.我可以在客户端上看到该文件，但不能在服务器端上看到.我该如何解决?

I'm trying to upload a file using apollo-server-express and apollo-client. However, when the file object is passed to the resolver it is always empty. I can see the file on the client, but not the server side. How can I resolve this ?

我的模式

  type File {
    id: ID
    path: String
    filename: String
    mimetype: String
  }

  extend type Query {
    getFiles: [File]
  }

  extend type Mutation {
    uploadSingleFile(file: Upload!): File
  }

我的解析器

  Mutation: {

    uploadSingleFile: combineResolvers(
      isAuthenticated,
      async (parent, { file }, { models, user, storeUpload }, info) => {
        console.log('Resolver-> uploadSingleFile')
        console.log(file) // Will return empty, { }
        const x = await file
        console.log(x) // Will also return empty, { }
        const storedFile = storeUpload(file)
        return storedFile
      }
    ),

  },

我的客户端查询文件

export const UPLOAD_SINGLE_FILE = gql`
  mutation uploadSingleFile($file: Upload!) {
    uploadSingleFile(file: $file) {
      id
    }
  }
`

我的客户端界面

import React from 'react'

// GQL
import { useApolloClient, useMutation } from '@apollo/react-hooks'
import { UPLOAD_SINGLE_FILE } from '../../queries'

const FileUpload = props => {

  const [uploadSingleFile, uploadSingleFileResult] = useMutation(UPLOAD_SINGLE_FILE, {
    onCompleted(uploadSingleFile) {
      console.log('Completed uploadSingleFile')
    }
  })

  const apolloClient = useApolloClient()

  const handleUploadFile = ({
    target: {
      validity,
      files: [file]
    }
  }) => {
    console.log('Uploading file...')
    if(validity.valid) {
      console.log('Valid')
      console.log(file.name)
      uploadSingleFile({ variables: { file } })
      .then(() => {
        apolloClient.resetStore()
      })
    }
    else console.log('Invalid file')      
  }

  return(
        <input type="file" required onChange={handleUploadFile} />
  )
}

export default FileUpload

已更新

我的前端设置是:

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
})

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token')
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

推荐答案

您需要使用适当的链接与您的Apollo客户端以启用文件上传.最简单的方法是使用 createUploadLink .它可以作为createHttpLink的替代产品，因此只需换出功能，您就可以使用了.

You need to utilize the appropriate Link with your Apollo Client in order to enable file uploads. The easiest way to do that is by using createUploadLink from apollo-upload-client. It functions as a drop-in replacement for createHttpLink, so just swap out the functions and you'll be good to go.

const httpLink = createUploadLink({
  uri: 'http://localhost:4000/graphql',
})
const authLink = ...
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

这篇关于Apollo-Server-Express没有收到上载对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！