Returning empty object after file upload - Apollo graphql

Question

After uploading a file to the server returning an empty object. I have tried all the solution on the internet. but still didn't find what's wrong in my code.

solution tried

client setup


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

client mutation

  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} />

Server graphql schema

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

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

Server mutation

  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)
    }
  }

U.A · Accepted Answer · 2019-12-14 04:29:28Z

1

I was importing Apollo client from apollo-boost to setup the createUploadLink I need to import apollo client from apollo-client not apollo-boost, as said in this issue https://github.com/jaydenseric/apollo-upload-client/issues/114

I change my setup to

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);
  }
});

answered Dec 14, 2019 at 4:29

U.A

3,4233 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Loki Over a year ago

Im facing the same issue :/

Loki Over a year ago

Will try today, and could you tell me what is your configuration for server ?

naiij · Accepted Answer · 2022-02-26 08:59:52Z

0

same problem when I work with nestjs (apollo-server-express) and graphql-upload.

fixed by remove uploads: false from GraphQL Options (maybe use apollo-server-express builtin upload method), and add these lines to package.json:

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

answered Feb 26, 2022 at 8:59

naiij

1

Collectives™ on Stack Overflow

Returning empty object after file upload - Apollo graphql

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related