变量"$file“获得无效值{}；上传值无效

Question

我正在使用GraphQLClient从graphql-request发送请求到我的服务器。我试图通过以下操作上传一个文件：

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)

还有其他人有这个问题吗？我似乎不能上传文件到我的后端。

Answer 1

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

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

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

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

希望这能帮助那些遇到我同样问题的人。

Answer 2

这取决于您使用的ApolloClient。

1-如果使用来自‘阿波罗-客户’的导入{ ApolloClient }，则必须使用"createHttpLink而不是“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.

Answer 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'
  }),
});