Apollo-Server-Express не получает объект загрузки - PullRequest
Новая
       6

Apollo-Server-Express не получает объект загрузки

0 голосов
/ 08 ноября 2019

Я пытаюсь загрузить файл, используя apollo-server-express и apollo-client. Однако, когда объект файла передается распознавателю, он всегда пуст. Я вижу файл на клиенте, но не на стороне сервера. Как я могу решить эту проблему?

Моя схема 

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

  extend type Query {
    getFiles: [File]
  }

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

My Resolver 

  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(),
})

1 Ответ

0 голосов
/ 08 ноября 2019

Вам необходимо использовать соответствующую ссылку с клиентом Apollo, чтобы разрешить загрузку файлов. Самый простой способ сделать это - использовать createUploadLink из apollo-upload-client. Он работает в качестве замены для createHttpLink, поэтому просто поменяйте местами функции, и все будет в порядке. 

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