I'm trying to create an image uploader in my application. My idea was to use the Cloudinary API to post data and then take the URL from the response and INSERT it into my DB. I'd like this to happen within a graphql resolver function - applied logic as follows:
const uploadFile = async ({ file, menu_item_id, menu_id, organization_id, organization_name }, context) => {
const insertIntoDB = async ({ public_id: cloudinary_id, secure_url: image_url }) => {
const query = `INSERT INTO "um"."images" (cloudinary_id, image_url, menu_item_id, menu_id, organization_id) VALUES ($1, $2, $3, $4, $5) RETURNING *`
const params = [cloudinary_id, image_url, menu_item_id, menu_id, organization_id]
try {
const result = await context.pool.query(query, params)
return result.rows[0]
} catch (error) {
console.log(error)
throw error
}
}
const cloudinaryUpload = async (stream, organization_id, organization_name) => {
const streamLoad = cloudinary.uploader.upload_stream(
{
tags: organization_id,
folder: organization_name,
},
(error, result) => {
if (result) {
insertIntoDB(result)
} else {
console.log('error ', error)
}
}
)
stream.pipe(streamLoad)
}
const processCloudinaryUpload = async (file, organization_id, organization_name) => {
const { filename, mimetype, createReadStream } = await file
const stream = await createReadStream()
await cloudinaryUpload(stream, organization_id, organization_name)
}
await processCloudinaryUpload(file, organization_id, organization_name)
}
The logic in the resolver works. The image gets stored in cloudinary, and a row in my DB gets saved.
The problem occurs when I try to execute the useMutation
hook in the frontend of the application. Because the resolver has to make a round trip first to the cloudinary API to get the cloudinary_id used to insert into the DB, it seems the useMutation hook returns prematurely and I get null
before the final database operation occurs.
I would love to have some insight as to what I'm doing wrong here. Appreciate you all for taking the time to help!