mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 07:50:20 +08:00
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>
76 lines
2.3 KiB
Markdown
76 lines
2.3 KiB
Markdown
# Query Supabase from Cloudflare Worker
|
|
|
|
**[📹 Video](https://egghead.io/lessons/cloudflare-query-supabase-from-cloudflare-worker?af=9qsk0a)**
|
|
|
|
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**
|
|
|
|
```bash
|
|
npm i @supabase/supabase-js
|
|
```
|
|
|
|
**Create a Cloudflare secret**
|
|
|
|
```bash
|
|
npx wrangler secret put NAME
|
|
```
|
|
|
|
**Add a secret for SUPABASE_URL**
|
|
|
|
```bash
|
|
npx wrangler secret put SUPABASE_URL
|
|
```
|
|
|
|
**Run wrangler development server**
|
|
|
|
```bash
|
|
npx wrangler dev
|
|
```
|
|
|
|
**Add a secret for SUPABASE_PUBLISHABLE_KEY**
|
|
|
|
```bash
|
|
npx wrangler secret put SUPABASE_PUBLISHABLE_KEY
|
|
```
|
|
|
|
**Query data from Supabase**
|
|
|
|
```javascript
|
|
const { data } = await supabase.from('articles').select('*')
|
|
```
|
|
|
|
**Send JSON response**
|
|
|
|
```javascript
|
|
return new Response(JSON.stringify(data), {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
```
|
|
|
|
## Resources
|
|
|
|
- [Selecting data with Supabase JS](https://supabase.com/docs/reference/javascript/select)
|
|
- [Introducing Secrets and Environment Variables to Cloudflare Workers](https://blog.cloudflare.com/workers-secrets-environment/)
|
|
- [Cloudflare docs for sending JSON responses](https://developers.cloudflare.com/workers/examples/return-json/)
|
|
|
|
---
|
|
|
|
[👉 Next lesson](https://github.com/dijonmusters/supabase-data-at-the-edge/tree/main/04-proxy-supabase-requests-with-cloudflare-workers-and-itty-router)
|
|
|
|
---
|
|
|
|
Enjoying the course? Follow Jon Meyers on [Twitter](https://twitter.com/jonmeyers_io) and subscribe to the [YouTube channel](https://www.youtube.com/c/jonmeyers).
|