Allowing a multipart (image) upload through GraphQL for Elixir backend - reactjs

Question

I was hoping to get a clearer understand where I may be going wrong. Sorry if I ask a lot of questions since I feel a bit lost and been stuck for about a week on this one.
Currently, I've changed the package I was using for linking with apollo-client. The previous package was apollo-link-http and now I'm using apollo-absinthe-upload-link since I read it allows for image upload.
It's done as follows
const httpLink = createLink({
uri: 'http://localhost:4000/api',
credentials: 'same-origin',
fetch,
fetchOptions
});
There wasn't any change to sending information to the backend but I do continue to be lost in regards to uploading an image. The purpose of this image is to upload to the cloud then save the url information with the product details.
I'm using a hook as const [ images, setImages ] = useState([]); and an input of <input type="file" placeholder="Upload Image" onChange={handleUploadImage} />
The purpose of the onChange function is to set the image information to the images property. When we send the mutation to the backend, the way it's done is as follows
const buildForm = () => {
let storeID = 2;
const fileData = fileList.fileList.map((file) => {
return file.originFileObj;
});
const data = new FormData();
data.append('fileData', images);
debugger;
return {
productName,
productDescription,
productPrice,
productType,
isReturnable,
storeID,
fileData: data
};
};
when it goes, within my console I'm getting an error of Uncaught (in promise) Error: GraphQL error: Argument "fileData" has invalid value $fileData. and I'm seeing on the backend the key fileData having an empty object as its value. I was hoping to get some advice on what might be wrong or what I should consider. If someone mentioned CURL please explain since I have no idea what that means in regards to GraphQL and sending a mutation. Thank you for the help on this matter.
P.S - The mutation call that is being used is
export const CREATE_PRODUCT_MUTATION = gql`
mutation CreateProduct(
$storeID: Int!
$productName: String!
$productDescription: String!
$productPrice: Decimal!
$productType: Int!
$isReturnable: Boolean!
$fileData: Upload!
) {
createProduct(
product: {
productName: $productName
productDescription: $productDescription
productPrice: $productPrice
productType: $productType
isReturnable: $isReturnable
}
storeId: $storeID
fileData: $fileData
) {
id
productName
productDescription
productPrice
}
}
`;
UPDATE - Network return request
{"errors":[{"locations":[{"column":0,"line":2}],"message":"Argument \"fileData\" has invalid value $fileData."}]}
Backend Schema
#desc "List a new product"
field :create_product, :product do
arg(:product, :new_product)
arg(:store_id, :integer)
arg(:file_data, non_null(:upload))

Answer 1

apollo-absinthe-upload-link expects a variable of type File or Blob (see here), but you are passing fileData as type FormData.
Since your input type is file, you could do:
const handleUploadImage = (event) => setImages(event.target.files);
const buildForm = () => ({
productName,
productDescription,
productPrice,
productType,
isReturnable,
storeID: 2,
fileData: images[0],
});
References:
file-selector
react-dropzone