0

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!

devjacks
  • 59
  • 6
  • 1
    You await `processCloudinaryUpload`, but then don't actually return any value from your resolver. Additionally, if you have to use callbacks, like `upload_stream`, you need to correctly wrap those in a Promise that you then await as well. You should check cloudinary's API -- most libraries that use callbacks also support a way to directly work with Promises instead. – Daniel Rearden Jul 27 '20 at 10:11
  • Thank you so much Daniel Rearden! – devjacks Jul 27 '20 at 18:01

0 Answers0