Database API Integration
Connect to Supabase database using Cloudflare Workser's Database Integrations (beta)
Supabase is an open source Firebase alternative and a PostgreSQL database service that offers real-time functionality, database backups, and extensions. With Supabase, developers can quickly set up a PostgreSQL database and build applications.
Database Integrations allow you to connect to a database from your Worker by getting the right configuration from your database provider and adding it as secrets to your Worker.
Set up an integration with Supabase
To set up an integration with Supabase:
You need to have an existing Supabase database to connect to. Create a Supabase database or have an existing database to connect to Supabase and load data from.
Create a
countriestable with the following query. You can create a table in your Supabase dashboard in two ways:Use the table editor, which allows you to set up Postgres similar to a spreadsheet.
Alternatively, use the SQL editor:
CREATE TABLE countries (id SERIAL PRIMARY KEY,name VARCHAR(255) NOT NULL )Insert some data in your newly created table. Run the following commands to add countries to your table:
INSERT INTO countries (name) VALUES ('United States');
INSERT INTO countries (name) VALUES ('Canada');
INSERT INTO countries (name) VALUES ('The Netherlands')
Add the Supabase database integration to your Worker:
Log in to the Cloudflare dashboard and select your account.
In Account Home, select Workers & Pages.
In Overview, select your Worker.
Select Integrations > Supabase.
Follow the setup flow, selecting the database created in step 1.
In your Worker, install the
@supabase/supabase-jsdriver to connect to your database and start manipulating data:
npm install @supabase/supabase-jsThe following example shows how to make a query to your Supabase database in a Worker. The credentials needed to connect to Supabase have been automatically added as secrets to your Worker through the integration.
import { createClient } from '@supabase/supabase-js';
export default {
async fetch(request, env) {
const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
const { data, error } = await supabase.from("countries").select('*');
if (error) throw error;
return new Response(JSON.stringify(data), {
headers: {
"Content-Type": "application/json",
},
});
},
};To learn more about Supabase, refer to Supabase’s official documentation.
Worker Template
import { createClient } from "@supabase/supabase-js";
export default {
async fetch(request, env) {
// Initializing Supabase client with URL and key from environment variables
const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
try {
// Fetching data from Supabase
let { data: dataFromDatabase, error } = await supabase
.from('table_name')
.select('some_column,other_column');
// Throwing an error if there is one
if (error) {
throw new Error(error.message);
}
// Transforming fetched data into a format required for Framer Charts
const chartsData = transformDataForFramerCharts(dataFromDatabase);
// Returning the processed data
return new Response(JSON.stringify(chartsData), {
status: 200,
headers: { "Content-Type": "application/json" }
});
} catch (error) {
// Handling errors during the request
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
headers: { "Content-Type": "application/json" }
});
}
}
}
// Function to transform raw data into a format compatible with Framer Charts
function transformDataForFramerCharts(originalData) {
// Defining the name for data labels
const dataLabels = "some_column"
// Defining labels for the dataset
const datasetLabels = ["other_column"]
// Initializing labels and datasets for Framer Charts
const labels = [];
const datasets = {};
// Sorting the original data by label
originalData.sort((a, b) => {
return a[dataLabels].localeCompare(b[dataLabels]);
});
// Iterating through the data to build the structure required by Framer Charts
originalData.forEach(item => {
const formattedDate = item[dataLabels]
labels.push(formattedDate);
datasetLabels.forEach(label => {
if (!datasets[label]) {
datasets[label] = {
label: label,
data: []
};
}
datasets[label].data.push(item[label]);
});
});
// Converting the datasets object into an array format
const datasetsArray = Object.values(datasets);
// Returning the organized data, suitable for Framer Charts
return {
labels: labels,
datasets: datasetsArray
};
}This script is a Cloudflare Worker script primarily designed for interacting with a Supabase database and transforming the retrieved data into a format suitable for Framer Charts. Here is an explanation of its main components and functionalities:
Supabase Client Initialization:
Initializes the Supabase client using
SUPABASE_URLandSUPABASE_KEYfrom the environment variables.
Data Retrieval and Error Handling:
Selects specific columns from the
table_nametable in the Supabase database.If there is an error, such as a database connection or query issue, it captures these errors and returns a 500 Internal Server Error response.
Data Transformation:
The
transformDataForFramerChartsfunction transforms the raw data retrieved from the database into a format required by Framer Charts.It first sorts the data and then builds
labelsanddatasetssuitable for Framer Charts.
Response Return:
After successful processing, it returns a JSON response containing the transformed data.
Regarding specific data samples for the transformation
Sample Data Before Transformation:
Assume the original data retrieved from the Supabase database is as follows:
[
{"some_column": "2023-01-01", "other_column": 100},
{"some_column": "2023-01-02", "other_column": 200}
]Sample Data After Transformation:
After processing by the
transformDataForFramerChartsfunction, the data is transformed into the following format, suitable for use in Framer Charts:
{
"labels": ["2023-01-01", "2023-01-02"],
"datasets": [
{
"label": "other_column",
"data": [100, 200]
},
]
}This transformation makes the data ready for direct use in chart plotting, like line charts or bar graphs, where labels represent the data points on the x-axis (dates in this example), and datasets contain the y-axis values for each data point.
Database API Integration
Connect to Supabase database using Cloudflare Workser's Database Integrations (beta)
Supabase is an open source Firebase alternative and a PostgreSQL database service that offers real-time functionality, database backups, and extensions. With Supabase, developers can quickly set up a PostgreSQL database and build applications.
Database Integrations allow you to connect to a database from your Worker by getting the right configuration from your database provider and adding it as secrets to your Worker.
Set up an integration with Supabase
To set up an integration with Supabase:
You need to have an existing Supabase database to connect to. Create a Supabase database or have an existing database to connect to Supabase and load data from.
Create a
countriestable with the following query. You can create a table in your Supabase dashboard in two ways:Use the table editor, which allows you to set up Postgres similar to a spreadsheet.
Alternatively, use the SQL editor:
CREATE TABLE countries (id SERIAL PRIMARY KEY,name VARCHAR(255) NOT NULL )Insert some data in your newly created table. Run the following commands to add countries to your table:
INSERT INTO countries (name) VALUES ('United States');
INSERT INTO countries (name) VALUES ('Canada');
INSERT INTO countries (name) VALUES ('The Netherlands')
Add the Supabase database integration to your Worker:
Log in to the Cloudflare dashboard and select your account.
In Account Home, select Workers & Pages.
In Overview, select your Worker.
Select Integrations > Supabase.
Follow the setup flow, selecting the database created in step 1.
In your Worker, install the
@supabase/supabase-jsdriver to connect to your database and start manipulating data:
npm install @supabase/supabase-jsThe following example shows how to make a query to your Supabase database in a Worker. The credentials needed to connect to Supabase have been automatically added as secrets to your Worker through the integration.
import { createClient } from '@supabase/supabase-js';
export default {
async fetch(request, env) {
const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
const { data, error } = await supabase.from("countries").select('*');
if (error) throw error;
return new Response(JSON.stringify(data), {
headers: {
"Content-Type": "application/json",
},
});
},
};To learn more about Supabase, refer to Supabase’s official documentation.
Worker Template
import { createClient } from "@supabase/supabase-js";
export default {
async fetch(request, env) {
// Initializing Supabase client with URL and key from environment variables
const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
try {
// Fetching data from Supabase
let { data: dataFromDatabase, error } = await supabase
.from('table_name')
.select('some_column,other_column');
// Throwing an error if there is one
if (error) {
throw new Error(error.message);
}
// Transforming fetched data into a format required for Framer Charts
const chartsData = transformDataForFramerCharts(dataFromDatabase);
// Returning the processed data
return new Response(JSON.stringify(chartsData), {
status: 200,
headers: { "Content-Type": "application/json" }
});
} catch (error) {
// Handling errors during the request
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
headers: { "Content-Type": "application/json" }
});
}
}
}
// Function to transform raw data into a format compatible with Framer Charts
function transformDataForFramerCharts(originalData) {
// Defining the name for data labels
const dataLabels = "some_column"
// Defining labels for the dataset
const datasetLabels = ["other_column"]
// Initializing labels and datasets for Framer Charts
const labels = [];
const datasets = {};
// Sorting the original data by label
originalData.sort((a, b) => {
return a[dataLabels].localeCompare(b[dataLabels]);
});
// Iterating through the data to build the structure required by Framer Charts
originalData.forEach(item => {
const formattedDate = item[dataLabels]
labels.push(formattedDate);
datasetLabels.forEach(label => {
if (!datasets[label]) {
datasets[label] = {
label: label,
data: []
};
}
datasets[label].data.push(item[label]);
});
});
// Converting the datasets object into an array format
const datasetsArray = Object.values(datasets);
// Returning the organized data, suitable for Framer Charts
return {
labels: labels,
datasets: datasetsArray
};
}This script is a Cloudflare Worker script primarily designed for interacting with a Supabase database and transforming the retrieved data into a format suitable for Framer Charts. Here is an explanation of its main components and functionalities:
Supabase Client Initialization:
Initializes the Supabase client using
SUPABASE_URLandSUPABASE_KEYfrom the environment variables.
Data Retrieval and Error Handling:
Selects specific columns from the
table_nametable in the Supabase database.If there is an error, such as a database connection or query issue, it captures these errors and returns a 500 Internal Server Error response.
Data Transformation:
The
transformDataForFramerChartsfunction transforms the raw data retrieved from the database into a format required by Framer Charts.It first sorts the data and then builds
labelsanddatasetssuitable for Framer Charts.
Response Return:
After successful processing, it returns a JSON response containing the transformed data.
Regarding specific data samples for the transformation
Sample Data Before Transformation:
Assume the original data retrieved from the Supabase database is as follows:
[
{"some_column": "2023-01-01", "other_column": 100},
{"some_column": "2023-01-02", "other_column": 200}
]Sample Data After Transformation:
After processing by the
transformDataForFramerChartsfunction, the data is transformed into the following format, suitable for use in Framer Charts:
{
"labels": ["2023-01-01", "2023-01-02"],
"datasets": [
{
"label": "other_column",
"data": [100, 200]
},
]
}This transformation makes the data ready for direct use in chart plotting, like line charts or bar graphs, where labels represent the data points on the x-axis (dates in this example), and datasets contain the y-axis values for each data point.