Katerina Skroumpelou
a7563e9fe6
* Use latest 2.x version of `@supabase/supabase-js` in all examples * Use `latest` version of `@supabase/ssr` in all examples * Remove lock files from examples * Add examples lock files in .gitignore The rationale is: - Lock files are not actively maintained/updated (or the versions in the package.json files for that matter) - They pin an arbitrary version (from the end-user perspective) - Removes the need to manually update the versions and reinstall - Consistency <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Chores** * Broadened Supabase SDK dependency version constraints across example projects for greater flexibility with compatible updates * Updated some SSR package dependencies to track latest releases * Added gitignore rules for dependency lock files in example directories <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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
- 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.