Automatically revalidate KV Store cache on change with Database Webhooks in Supabase

Supabase Function Hooks allow us to subscribe to change events in the database - such as insert, update and delete - and make a HTTP request with the changed data.

In this lesson, we refactor our revalidate route to handle inserts, updates and deletes.

Additionally, we create a Function Hook to subscribe to all change events on the articles table, and automatically send a POST request to the revalidate route of our Cloudflare Worker.

This automatically refreshes the KV store anytime a value is changed in the database, and decouples the revalidation of our cache, from our user requesting data. This means, theoretically, users should never have to wait for a request to the Supabase origin server, as the cache is automatically populated, updated and cleared to remain in sync with the database.

Code Snippets

Update Revalidate route to handle insert, update and delete

router.post(
  "/revalidate",
  withContent,
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const { type, record, old_record } = request.content;
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_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);

    return json({ received: true });
  }
);

Run wrangler development server

npx wrangler dev

Publish Cloudflare Worker with Wrangler CLI

npx wrangler publish

Resources

• Supabase Functions blog
• Supabase.js docs
• Wrangler CLI docs
• KV Storage docs