Query Supabase from Cloudflare Worker
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
Jon Meyers: [0:00] Type npm i -- for install -- and then @supabase/supabase-js. We can then open up our worker and import { createClient } from '@supabase/supabase-js'. Then inside our fetch handler function here, we can create a new supabase instance by calling createClient and passing it our Supabase url and our anonKey. [0:28] Now, we could just declare these as plain text variables if we had RLS turned on on our table, but since we don't, we want to store these values as secrets in Cloudflare. Let's head over to our Supabase dashboard and go to Settings, and then API, and then copy our project URL from here.
[0:45] Then in our terminal, we can say npx wrangler secret put to declare a new secret. This one is going to be SUPABASE_URL. Now, we can paste in the value for our secret, and that has successfully uploaded our secret to Cloudflare.
[1:01] Let's also grab our anonKey from our Supabase dashboard and create a new secret for SUPABASE_ANON_KEY and paste that value from our dashboard. We can now run npx wrangler dev to start our development server again. Now, these environment variables are automatically injected into our fetch function as the second parameter.
[1:23] We can destructure SUPABASE_URL and SUPABASE_ANON_KEY. We can then pass those along to our createClient function. Now, we can make a request for some data from Supabase by saying await supabase.from. We then specify which table we would like to select these rows from.
[1:41] In this case, articles and then we chain on a .select to declare which columns we would like to get back. In this case, we want all of the columns and so we're just going to use *. We can then send these articles back as our response by replacing our "Hello eggies" text here with our data.
[1:57] This is a JSON object, and the response is expecting a string. We just need to stringify this data object. Then we also need to send across some headers to say that the Content-Type for this response is application/json. Now, if we navigate to our Cloudflare Worker, we'll see that big JSON object coming back from Supabase.
[2:20] If we decided that we were ready to publish our First blog, we could update our First blog row to have is_published set to true. If we refresh our Worker, we'll see that our First blog has jumped down to the bottom, but now is_published is set to true.
You are correct! I got this updated. Thank you.
What's the JSON / API testing browser extension that you're running here? Looks ace
Code Snippets install supabase has a issue, it should be npm i @supabase/supabase-js