Query Supabase from Cloudflare Worker

📹 Video

Supabase JS is an NPM package which provides a simple interface from JavaScript to our Supabase project. It allows us to query and mutate data using its Object Relational Mapping (ORM) syntax, and subscribe to realtime events.

In this video, we install the Supabase JS package and create a new client using our project's URL and Anon Key. These can be found in the Supabase dashboard for our project, under Settings > API.

We store these values as secrets in our Cloudflare account, and use them to instantiate a new Supabase client.

Additionally, we write a query to select all of our articles from our Supabase instance, and send them back as the response from our Cloudflare Worker.

In order to send a JSON response, we first stringify the object we get back from Supabase, and then set a Content-Type header to notify the browser that this will be a type of application/json.

Code Snippets

Install Supabase JS

npm i @supabase/supabase-js

Create a Cloudflare secret

npx wrangler secret put NAME

Add a secret for SUPABASE_URL

npx wrangler secret put SUPABASE_URL

Run wrangler development server

npx wrangler dev

Add a secret for SUPABASE_ANON_KEY

npx wrangler secret put SUPABASE_ANON_KEY

Query data from Supabase

const { data } = await supabase.from("articles").select("*");

Send JSON response

return new Response(JSON.stringify(data), {
  headers: {
    "Content-Type": "application/json",
  },
});

Resources

• Selecting data with Supabase JS
• Introducing Secrets and Environment Variables to Cloudflare Workers
• Cloudflare docs for sending JSON responses

---

👉 Next lesson

---

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