I am getting a GraphQL error "Error: Cannot return null for non-nullable field ImageType.name." Why"

Viewed 25

I am getting a GraphQL error "Error: Cannot return null for non-nullable field ImageType.name." when I try to upload an image to the backend. In the client I am using React, @apollo/client for the frontend, storing the images in Cloudinary before passing the payload sent back from Cloudinary server to store in my backend.

For some reason the profileImageUpload method is not receiving the name prop and is throwing an error. Here is the code below

Here is my image type defs

const {
  GraphQLObjectType,
  GraphQLID,
  GraphQLString,
  GraphQLSchema,
  GraphQLList,
  GraphQLNonNull,
  GraphQLEnumType,
  GraphQLBoolean,
} = require("graphql");

// Image Type
const ImageType = new GraphQLObjectType({
  name: "ImageType",
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: new GraphQLNonNull(GraphQLString) },
  }),
}); 

Here is my Edit.js file where I am uploading from

let name, url;
const [
    profileImageUpload,
    { data: imageData, loading: loadingImageData, error: errorImageData },
  ] = useMutation(PROFILE_IMAGE_UPLOAD, {
    variables: {
      id,
      name,
    },
  });

const handleUpdateProfileImage = async () => {
    try {
      //append image to FormData
      const form_data = new FormData();
      form_data.append("file", imageHolder);
      form_data.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

      // Save image to cloudinary
      const response = await axios.post(
        `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload`,
        form_data
      );

      // Here is the response after saving image to Cloudinary
      console.log(response);

      name = response.data.original_filename;
      url = response.data.url;

      //Loging values correctly
      console.log({ id, name });

      ----->HERE IS WHERE THE PROBLEM IS, NAME IS NOT PARSED TO profileImageUpload method
      await profileImageUpload(id, name);

      console.log({ id, name });

      console.log("Image Successfully sent to backend for handling");

      // })      
      
    } catch (error) {
      console.log(error);
    }
  };


And here is the error

Error: Cannot return null for non-nullable field ImageType.name.
    at new ApolloError (index.ts:58:1)
    at QueryManager.ts:246:1
    at both (asyncMap.ts:30:1)
    at asyncMap.ts:19:1
    at new Promise (<anonymous>)
    at Object.then (asyncMap.ts:19:1)
    at Object.next (asyncMap.ts:31:1)
    at notifySubscription (module.js:132:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.next (module.js:225:1)
0 Answers
Related