使用GraphQl的FileUpload在尝试上传客户端时将文件显示为无效输入

Question

我正在尝试将文件上传到Apollo GraphQL。使用上传标量与graphQlupload当前失败的客户端

type

export const typeDefs = gql`
  scalar Upload

  type File {
    url: String!
  }

突变＆amp;解析器

export const resolvers = {
  Upload: GraphQLUpload


   uploadFile(file: Upload!): File!


    uploadFile: async (_, { file }) => {
      const { createReadStream, filename } = await file;
      const stream = createReadStream();

      const { ext } = path.parse(filename)
      const name = ext + v4()

      const pathName = path.join(__dirname, `../public/images/${name}`)
      await stream.pipe(fs.createWriteStream(pathName))

      return {
        url: `http://localhost:5000/images/${name}`
      };
    },

客户端

export const UPLOAD_FILE = gql`
    mutation UploadFile($file: Upload!){
        uploadFile(file: $file){
            url
        }
    }
`

  const handleUpload = async () => {
    if (!image) return;

    try {
      const { data } = await uploadFile({
        variables: { file: image }
      })
      if (data) {
        console.log('res =>', data)
        handleCreateNewPost(data.uploadFile.url)
      }
    }
    catch (err) {
      console.log(err)
    }

当前我得到一个无效的输入错误：

{"errors":[{"message":"Variable \"$file\" got invalid value { path: \"Photo on 2021-09-07 at 1.34 PM.jpg\" }

image console.logged显示一个文件对象

File {path: 'Photo on 2021-09-07 at 1.34 PM.jpg', name: 'Photo on 2021-09-07 at 1.34 PM.jpg', lastModified: 1631036079471, lastModifiedDate: Tue Sep 07 2021 13:34:39 GMT-0400 (Eastern Daylight Time), webkitRelativePath: '', …}
path: "Photo on 2021-09-07 at 1.34 PM.jpg"
lastModified: 1631036079471
lastModifiedDate: Tue Sep 07 2021 13:34:39 GMT-0400 (Eastern Daylight Time) {}
name: "Photo on 2021-09-07 at 1.34 PM.jpg"
size: 134828
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File

Answer 1

遇到了同一问题。

问题在于我们的前端的阿波罗客户端，我们没有在客户端中包含上传链接。

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

...

const uploadLink = createUploadLink({ uri: process.env.GATSBY_APOLLO_URL })
  apolloLinks.push(uploadLink)


const client = new ApolloClient({
    link: from(apolloLinks),
    cache: new InMemoryCache(),
  })

还要注意，根据文档，您只能拥有一个这样的终止链接

Apollo Client can only have 1 terminating Apollo Link that sends the GraphQL requests; 
if one such as HttpLink is already setup, remove it.

因此，如果您的客户端中都有两个链接，则仍然会遇到相同的错误。