supabase/examples/caching/with-cloudflare-workers-kv

Use waitUntil to perform work after Cloudflare Worker returns response

📹 Video

The waitUntil function allows us to continue performing work in our Cloudflare Worker, after a response has been sent back to the client.

In this lesson, we modify the revalidate route to send a response immediately, and then continue on to fetch new data and refresh our KV store.

Finally, we use the Thunder Client extension to simulate a POST request to the revalidate route, and confirm that this receives a response before the cache is updated.

Code Snippets

Update Revalidate route to respond immediately

router.post(
  '/revalidate',
  withContent,
  async (request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, ARTICLES }, context) => {
    const updateCache = async () => {
      const { type, record, old_record } = request.content
      const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)

      if (type === 'INSERT' || type === 'UPDATE') {
        await writeTo(ARTICLES, `/articles/${record.id}`, record)
      }

      if (type === 'DELETE') {
        await ARTICLES.delete(`/articles/${old_record.id}`)
      }

      const { data: articles } = await supabase.from('articles').select('*')
      await writeTo(ARTICLES, '/articles', articles)
      console.log('updated cache')
    }

    context.waitUntil(updateCache())

    console.log('sending response')

    return json({ received: true })
  }
)

Run wrangler development server

npx wrangler dev

Resources

• Cloudflare waitUntil docs
• Supabase.js docs
• Wrangler CLI docs
• KV Storage docs
• Thunder Client VS Code extension

---

Enjoying the course? Follow Jon Meyers on Twitter and subscribe to the YouTube channel.