文件上传后返回空对象 - Apollo graphql

Posted 2023-03-08

【中文标题】文件上传后返回空对象 - Apollo graphql

【英文标题】：Returning empty object after file upload - Apollo graphql

【发布时间】：2020-04-03 06:27:28

【问题描述】：

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

已尝试解决方案

https://github.com/jaydenseric/graphql-upload/issues/73 Apollo-Server-Express not receiving Upload 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)
    
  

【参考方案1】：

我正在从 apollo-boost 导入 Apollo 客户端以设置 createUploadLink 我需要从 apollo-client 而不是 apollo-boost 导入 apollo 客户端，如本期所述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);
  
);

【讨论】：

我面临同样的问题：/

今天试试，能告诉我你的服务器配置是什么吗？