变量“$file”的值无效 {};上传值无效答案

【问题标题】：Variable "$file" got invalid value {}; Upload value invalid变量“$file”的值无效 {};上传值无效
【发布时间】：2021-02-15 20:44:05
【问题描述】：

我正在使用来自 graphql-request 的 GraphQLClient 向我的服务器发送请求。我正在尝试通过执行以下操作上传文件：

const graphQLClient = new GraphQLClient('http://localhost:4000/graphql', {
    credentials: 'include',
    mode: 'cors',
});
const source = gql`
    mutation uploadImage($file: Upload!) {
        uploadImage(file: $file)
    }
`;
const file: RcFile = SOME_FILE; // RcFile (from antd) extends File
await graphQLClient.request<{uploadImage: boolean}>(source, { file });

但是，当我以这种方式向服务器发送请求时，会出现以下错误：

GraphQLError: Variable \"$file\" got invalid value {}; Upload value invalid

这是我的请求在控制台中的样子：

operations: {
    "query":"\n mutation uploadProfileImage($file: Upload!){\n uploadProfileImage(file: $file)\n }\n",  
    "variables":{"file":null}
}
map: {"1":["variables.file"]}
1: (binary)

还有其他人遇到过这个问题吗？我似乎无法将文件上传到我的后端。

【问题讨论】：

console.log(file) ?
File { uid: "rc-upload-1604388578610-2", name: "images.jpg", lastModified: 1604388587004, lastModifiedDate: Tue Nov 03 2020 01:29:47 GMT-0600 (Central Standard Time), webkitRelativePath: "", name: "images.jpg" size: 4040 type: "image/jpeg" uid: "rc-upload-1604388578610-2" webkitRelativePath: ""
此服务器是否支持正确上传graphql？ ... 突变应该定义返回类型/字段
我在后端使用 typegraphql 和 graphql-upload：@Mutation(() => Boolean) async uploadImage( @Arg('file', () => GraphQLUpload) upload: UploadType): Promise<boolean> { ... }
更像......它使用邮递员工作吗？

标签： javascript node.js file-upload graphql antd

【解决方案1】：

我通过在 ApolloServer 配置中将上传选项设置为 false 解决了这个问题。

new ApolloServer({ schema, context, uploads: false })

然后使用来自graphql-upload 的graphqlUploadExpress() 中间件。

app.use(graphqlUploadExpress({ maxFileSize: 10000, maxFiles: 10 }));

希望这可以帮助遇到我遇到同样问题的任何人?

【讨论】：

我正在尝试同样的事情，但收到错误消息：“POST body 丢失。你忘记使用 body-parser 中间件了吗？”。你遇到过吗？

【解决方案2】：

这取决于你使用的 ApolloClient。

1- 如果使用 import { ApolloClient } from 'apollo-client' 必须使用“createUploadLink”而不是“createHttpLink”的意思，

import { createUploadLink } from 'apollo-upload-client'
const httpLink = createUploadLink({
  uri: httpEndpoint,
})

2- 如果使用 createApolloClient，请确定这个包：

import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
``
You do not need to set anything and Upload work complete.

【讨论】：

【解决方案3】：

除了接受的答案中描述的ApolloServer 实现（并澄清@Masoud 的答案）之外，请确保您还有以下使用apollo-upload-client 的客户端实现：

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from 'apollo-upload-client';

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

【讨论】：