文件上传后返回空 object - Apollo graphql

Question

将文件上传到服务器后返回一个空的 object。我已经尝试了 inte.net 上的所有解决方案。 但仍然没有发现我的代码有什么问题。

尝试解决方案

• https://github.com/jaydenseric/graphql-upload/issues/73
• Apollo-Server-Express 未收到上传 Object

客户端设置

const httpLink = createUploadLink({
  uri: 'http://localhost:5000/graphql',
})

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

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
  onError: ({ networkError, graphQLErrors }) => {
    console.log("graphQLErrors", graphQLErrors);
    console.log("networkError", networkError);
  },
})

客户端突变

  const [createAd, { loading }] = useMutation(gql`
    mutation createAd($file: Upload!) {
      createAd(file: $file) {
        message
      }
    }
  `, {
    onCompleted(data) {
      console.log(data)
    }, onError(data) {
      console.log(data)
    }
  })


  const handleUploadFile = ({
    target: {
      validity,
      files: [file]
    }
  }) => {
    if (validity.valid) {
      console.log(file)
      createAd({ variables: { file } }).then(() => {
        apolloClient.resetStore()
      })
    }}



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

服务器 graphql 架构

type Mutation {
  createAd(file: Upload!): Return!
}

type Return {
  data: String,
  message: String,
  error: String
}

服务器突变

  async createAd(_, {file}, { request }) {
    try {
      console.log('-- runs --')
      console.log(file) // returning empty object
      const photo = await file
      console.log(photo) // still returning empty object, whats wrong?

      return {
        message: 'uploadeding',
        data: `tesst ${JSON.stringify(photo)}`
      }
    } catch (err) {
      console.log(err)
    }
  }

Answer 1

我正在从 apollo-boost 导入 Apollo 客户端以设置 createUploadLink 我需要从 apollo-client 导入 apollo 客户端而不是 apollo-boost，如本期所述https://github.com/jaydenseric/apollo-upload-client/issues /114

我将设置更改为

import ApolloClient from "apollo-client"; // here where I did the mistake 
import { ApolloProvider } from "@apollo/react-hooks";
import { InMemoryCache } from "apollo-cache-inmemory";
import { setContext } from "apollo-link-context";
import { createUploadLink } from "apollo-upload-client";

const link = createUploadLink({
  uri: "http://localhost:5000/graphql"
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("token");
  return {
    headers: {
      ...headers,
      authorization: token
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(link),
  cache: new InMemoryCache(),
  onError: ({ networkError, graphQLErrors }) => {
    console.log("graphQLErrors", graphQLErrors);
    console.log("networkError", networkError);
  }
});

Answer 2

当我使用nestjs ( apollo-server-express ) 和graphql-upload时出现同样的问题。

通过删除uploads: false从 GraphQL 选项修复（可能使用apollo-server-express内置上传方法），并将这些行添加到package.json ：

"resolutions": {
    "fs-capacitor": "^6.x.x",
    "graphql-upload": "^13.0.0"
},