d8bd6b047c
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated examples and guides to use Supabase publishable (client) keys instead of anon keys for client-side usage across frameworks and platforms. * Renamed environment variable examples and .env templates to reflect publishable key naming. * Adjusted sample requests and client-init examples to send/use the publishable key via the apikey header where applicable. * Updated references from service_role to secret for server-side credential guidance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: fadymak <fady@fadymak.com>
2.3 KiB
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_PUBLISHABLE_KEY
npx wrangler secret put SUPABASE_PUBLISHABLE_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
Enjoying the course? Follow Jon Meyers on Twitter and subscribe to the YouTube channel.