You can use Sequin to build Superblocks apps on top of APIs like Salesforce and HubSpot. Sequin will sync your API data to a Postgres database so you can write your integration in SQL. Changes you make to your database records will be applied to the API and your database at the same time.

While Superblocks has several out-of-the-box integrations, it’s much faster to build with their Postgres adapter. You don’t have to worry about rate limits and SQL is both familiar and expressive.

​
Setup a Sequin sync

Before you can use Sequin with Superblocks, you’ll need to create a sync. Sequin will guide you through authenticating, selecting the data you want to sync, and connecting to your database. Read our getting started guide for step-by-step instructions.

​
Create a Postgres integration on Superblocks

An integration on Superblocks is a connection to a database or API.

Sequin uses a Postgres Proxy to interface with your Sequin-synced tables. The Proxy lets Sequin capture inserts, updates, and deletes you make in your database and commit them to the API.

To add Sequin’s Postgres Proxy as a Superblocks integration, you can treat it as a regular Postgres database and enter the connection details in the resource configuration:

Step 1: Go to your Superblocks dashboard and select Integrations from the left-hand menu.

Step 2: From the Available section, find Postgres and click on Add.

Step 3: In the configuration page that opens, give your resource a name and paste the host, database name, database username, and database password from the Connection instructions tab of your Sequin dashboard:

Step 4: Finally, Click Save.

Sequin’s Postgres Proxy captures inserts, updates, and deletes and sends them to the upstream API. The Proxy can add a bit a of latency depending on the closeness between your database and the nearest Proxy. For the fastest reads, you can use a second “read-only” Superblocks integration that’s pointed directly at your database. Then, you’d use both integrations in your app, one for reads and the other for mutations. We only recommend doing this as an advanced optimization after your Superblocks app is built and in production.

​
Using the Postgres integration in Superblocks

Now, Sequin is syncing your API data to Postgres. You’ve also connected Superblocks to Postgres via Sequin’s Proxy. To query this data in your Superblocks app, go back to your Superblocks dashboard and create a new app:

Step 1: Click on Create New from your Superblocks dashboard.

Step 2: Enter a name and select the type as Application. This creates the new app and opens it in edit mode.

Step 3: From the left-hand menu, select Add Components and drag and drop a container to the canvas.

Step 3: Next, drag and drop a table component inside the container.

Step 4: Select Add Backend API from the bottom of the window.

Step 5: Choose the integration you created in the previous section.

Step 6: Give the API call a name.

Step 7: In the Operation section, enter a query to retrieve your data.

For instance, if you were using the Bug Tracker template on Airtable, you can use the following query to retrieve a list of bugs:

select 
    bugs_and_issues.id, 
    bugs_and_issues.name,
    bugs_and_issues.description, 
    bugs_and_issues.priority, 
    bugs_and_issues.status, 
    bugs_and_issues.created_time 
from 
    bugs_and_issues;

Step 8: Click on the table. In the Table Data section, choose the new query you just created. This should populate the table with the data from the underlying data source.

​
Writing back to the API

With Sequin, you can also mutate records via your database. Inserts, updates, and deletes you make to Sequin-synced tables are first applied to the API. If they pass validation, they’re committed to your database.

To write your first mutation query, click on Add Backend API from the bottom of your page and select the Postgres integration you created earlier.

When creating a new mutation query, you can choose the Run SQL operation to write your own SQL query. Alternatively, you can choose the Insert, Update, or Delete rows with form operation to build your query in a GUI. Read more about executing SQL queries on Superblocks here.

Continuing with the bug tracker example, the query below allows a user to update the details of a bug selected in the table component using a Run SQL query:

You can see that there’s a bit of JavaScript to strip off unwanted characters for the priority column. When using the Tag column type for a table in Superblocks, it adds the selected value inside an array. If you try writing this to the database, it throws an error. To avoid this for the priority column, you must convert the selected value to a string and remove all characters except alphabets.

​
Displaying Errors

When Sequin’s Proxy encounters an error trying to apply your mutation in the upstream API, the Proxy returns a standard Postgres error. There’s no additional configuration required on Superblocks to display these errors since Sequin’s Proxy returns a standard API response message containing the Postgres error.

​
Next steps

You can now use Superblocks to build on top of sources like Salesforce, Airtable, and HubSpot. If you have any questions, please reach out to us.

SupabaseWindmill