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)