--- title: "Use Netlify Edge functions to query Supabase through Polyscale" description: "Query a Supabase database at The Edge with Netlify Edge functions, using Polyscales cache to deliver queries closer to our users" source: "https://www.netlify.com/blog/querying-supabase-from-the-edge-with-polyscale/" last_updated: "2026-07-10T21:19:12.000Z" --- With the release of [Netlify Edge Functions](https://www.netlify.com/blog/edge-functions-explained/), the Netlify team has been focused on [helping surface](https://edge-functions-examples.netlify.app/) the constantly growing list of ways to utilize The Edge. Edge Functions allow you to serve content from the CDN server closest to the user. With just a bit of JavaScript or TypeScript, developers can use edge functions to modify network requests at the edge so it’s closer to your site visitors around the globe. I had personally heard a lot of really solid use-cases around localization and internationalization, but was curious what the story around data delivery was. Our friends at PolyScale were able to shed some light on the growing need to make sure that not only are your web pages being served closer to your users, but your database interactions as well. Polyscale is a Global Database Cache as a Service. Scale low latency database reads globally, without deploying servers or writing code. They also allow you to bring your own database, which in this tutorial will be a Postgres DB through Supabase. Our goal today will be to query some “product” data from Supabase, but with PolyScale cache as the first touch point inside of an edge function. At the end you will be able to bring edge functions using PolyScale to any project and make your interactions with your database… _********************blazingly fast********************_ 😏. ## Prerequisites Before getting started you’ll need accounts with: - [Github](https://github.com/) - [Netlify](https://www.netlify.com/) - [PolyScale](https://www.polyscale.ai/) - [Supabase](https://supabase.com/) We’re going to be using VSCode, so it will be helpful to have the following extensions installed: - [Deno](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno) - [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) We’ll also be taking advantage of a few CLI’s throughout the tutorial: - [Github CLI](https://docs.github.com/en/github-cli/github-cli/quickstart) - [Astro CLI](https://docs.astro.build/en/reference/cli-reference/) - [Netlify CLI](https://docs.netlify.com/cli/get-started/) ## Scaffold the base project To build this project, we’re going to use Astro as our framework. Thankfully the Astro team has built a really great CLI experience to make sure we have all the things we need to get up and running swiftly. Let’s get our project started using the Astro CLI. ``` yarn create astro ``` ..or using `npx` ``` npx create-astro@latest ``` This will launch you into their CLI wizard, where you can decide the needs for your project scaffold and get going. For the purpose of this tutorial, choose the base Typescript configuration and recommended settings. ![image](https://cdn.sanity.io/images/o0o2tn5x/production/24f52ad4b1c9eb191edc8af61a6b2d7742b591ed-994x430.gif?w=450) ## Pushing to Github and deploying on Netlify Let’s initialize a repo so we can track our changes and deploy live to the web as we go. Start off with a quick command to initialize the repository. ``` git init ``` Then let’s get all of our current changes added and pushed to the main branch, so we can create a repo. ``` git add .git commit -m "Initial commit" ``` Now, using the Github CLI we can create our repo and push our code to it. ``` gh repo create {your-project-name} -s=. -r=upstream --public --push ``` This command will: - create your repo - name it (make sure to replace {your-project-name} with the value you want) - set the remote of our repo to upstream - designate the repo as public - push up our commits …all in one command! We can see that everything is successful by running ``` gh repo view -w ``` We’re going to create a new project on Netlify, with our new repo as the base by connecting the new git repository we just created to your Netlify account. Thankfully Netlify makes this _quick and neat_. Run this next command at the root of your project directory. ``` netlify init ``` .. and fill in the prompts as they come: - **What would you like to do?** `Create & configure a new site` - **Team:** `YOUR_TEAM` - **Site name (optional):** `CHOOSE_UNIQUE_SITE_NAME` The Netlify CLI will auto-detect that you’re using Astro, so the following prompts will be pre-filled. Hit enter to use the defaults. - **Your build command (hugo build/yarn run build/etc):** `(astro build)` - **Directory to deploy (blank for current dir):** `(dist)` - **Netlify functions folder:** `(netlify/functions)` This will return an Admin URL and base URL link in the console and move on to a few more prompts: - Authenticate Github through Netlify - leave build command blank (default) - leave netlify functions folder blank (default) Once all that is done, run a command to view our site in the Netlify UI. ``` netlify open ``` In less than 10 commands, we’ve pushed to Github with a full CI/CD pipeline for Netlify deploys. _Sweet_ 😏! ## Create the Supabase database With our project code ready, we can move on to setting up the services we’ll be using. Before moving on create a Supabase account. Once you’re logged in you will land on the Dashboard. Select ****************************************Create a new project****************************************. Fill in the fields shown below and click ******************************************Create a new project.****************************************** The ********Create a new Project******** page will have some fields we’ll need to fill in before selecting to create the project. ![image](https://cdn.sanity.io/images/o0o2tn5x/production/a2d66f946971fd2b4d4df2eccc05f2c6ee49332f-1340x1284.png?w=450) After a few minutes, your database should be provisioned and ready to start creating tables and entries inside of it. Let’s go ahead and click the ************************Table Editor************************ button and create our schema. Create a new table, named products. Keeping everything else as is, we’ll set up our columns for a product: Next, set the name and price columns to non-nullable values to make sure we’ve always got at least that data available to us when we query. Now all that’s left is to grab a few values we’ll need to configure PolyScale and we’re done with Supabase for now! Navigate to project settings → Database then copy from the **Connection info** section at the top.: - Host - Database name - Port - user (or username as PolyScale will call it) - password (the one we created earlier for the database) ![image](https://cdn.sanity.io/images/o0o2tn5x/production/60da68f8e4ff88a619dc35a48fc27c96ef7af592-2706x764.png?w=450) ## Set up the PolyScale Cache Next up on our list to create our PolyScale cache. PolyScale caches database data locally to users reducing latency, accelerating read performance, and scaling throughput. Navigate to [PolyScale’s website](https://polyscale.ai) and create your account. Once you’re logged in and on the Dashboard, select the ******************New Cache****************** button. Once your cache is created, click ************Connect************ to navigate to the page containing our connection details. ![image](https://cdn.sanity.io/images/o0o2tn5x/production/77bf89d1508646c96c9cd9d21af1d387dd0cdcdc-1924x118.png?w=450) Copy your connection URI into your editor of choice, where you can replace Username, Password, and Database using the Supabase values we copied previously. - user (or username as you’re seeing PolyScale name it) - password (same one from earlier) - database → postgres We’ll need these to create the connection URI for the PolyScale cache. It will look like → `postgres://postgres:testingpolyscale@psedge.global:5432/postgres?application_name=b17486c3-0f61-4358-8f0b-ea78ed6f6a1d` To finish things out let’s hop over the Netlify UI and save our environment variables so our edge function has access to them and we’re not storing sensitive data in the code. ![image](https://cdn.sanity.io/images/o0o2tn5x/production/7d8e3224c465354877501b215a48c6c304771d24-1888x888.png?w=450) ## Create an Edge function to query the DB If you’ve never interacted with [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/) before, you should take some time to check out [Deno](https://deno.land/manual@v1.28.2/introduction). Deno is a JavaScript and Typescript runtime with secure defaults and a great developer experience. Deno is the runtime Netlify uses for edge functions, unlike Netlify’s serverless functions that use Node. We’re ready to create our edge function and start querying our data! Create a new `netlify` folder at the base of the project. Afterwards, create the `edge-functions` folder inside of your new `netlify` folder! Now, Inside your `edge-functions` folder, create a file named `getProducts.ts`. Your file structure should now resemble the image below: ![image](https://cdn.sanity.io/images/o0o2tn5x/production/2fcfe6d552f1eec98eb5229932e2dacd7d8cf673-642x1964.png?w=450) We can delete the HTML that lives in `/src/pages/index.astro` and replace it with this code: ``` ---import Layout from "../layouts/Layout.astro";---

Serving products from the Edge

 ```