How to invalidate array of sluges in Next.js?

Question

Since 12.1.0 it is possible the On-demand Revalidation.

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Sending array of programIds, how can I invalidate array of slugs? I tried this:

export default async function handler(req, res) {
    // Check for secret to confirm this is a valid request
    if (req.query.secret !== process.env.NEXT_PUBLIC_SECRET_TOKEN) {
        return res.status(401).json({ message: 'Invalid token' })
    }

    try {
        const programIds: String[] = req.query.programId
        programIds.map((programId) =>
            await res.unstable_revalidate(`/hu/buyTicket/${programId}`)
        )
        
        return res.json({ revalidated: true })
    } catch (err) {
        // If there was an error, Next.js will continue
        // to show the last successfully generated page
        return res.status(500).send('Error revalidating')
    }
}

I got this error:

'await' expressions are only allowed within async functions and at the top levels of modules.

I don't know if this will fix it for you, but just looking at the error message, your problem is that your .map() is not async. Change is to: programIds.map(async (programId) => ... ) — Julius, Apr 09 '22 at 10:44
Cool, I'll make an answer so you can mark the question as answered — Julius, Apr 09 '22 at 10:56

score 1 · Accepted Answer · answered Apr 09 '22 at 11:02

.map does not respect await even if you use async. In your situation, you will receive a response before revalidation is completed, which is incorrect behavior.

The correct method should include the usage of Promise.all so that res.json is called only after all the revalidations are completed, and try/catch block can catch error correctly.

  await Promise.all(programIds.map(async (programId) =>
        await res.unstable_revalidate(`/hu/buyTicket/${programId}`)
  ))

How to invalidate array of sluges in Next.js?

1 Answers1