For the uninitiated Supabase is a open source Firebase alternative. That’s a rather bold statement and it has caused some long-time fans of Firebase, a Google product, to raise an eyebrow. Yet despite who’s talking about it or not one thing is for certain: Supabase is moving quick.

As of March 28th all new projects created within Supabase have access to GraphQL via an extension for Postgres. And projects that were created beforehand can install the extension themselves if desired. This includes free-tier clients of Supabase.com, the company building a brand around this open source tech.

To activate GraphQL simply enable the pg_graphql extension as described in the announcement post linked above and run the following SQL query in the SQL Editor on the Supabase site to automatically build a Schema based off your database:

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

Once completed you can immediately start using the GraphQL Playground to view the generated schema, schema documentation and to begin running GraphQL queries against your Supabase data as shown here:

You will need to provide an apiKey with sufficient privileges in order to execute GQL queries and the way to do that with the GraphQL Playground isn’t super intuitive so here are the steps spelled out:

1. Click HTTP HEADERS near the bottom of the window.
2. Enter the key like { "apiKey": "yourreallylongapikeyhere" }.
3. Click Reload Schema icon near the project URL.

To verify it’s working click Docs to view the documentation. If you do not see the expected docs, double-check your apiKey and try again. Once you’re able to see the Docs you can move on to a practical example.

Practical example

In this example we’ll be creating a table for demonstration purposes then dropping it when we’re done. Before you continue ensure the table name used is unique to your database, or create a new Supabase project for testing purposes before you continue (safest approach). If you do not, you may risk of modifying data you did not intend to.

Create a table called navigation in your database using the SQL Editor within Supabase and populate it with a few entities using the SQL below:

-- Create a table for Navigation Items
create table navigation (
  name varchar(35) not null unique check (char_length(name) > 0),
  href varchar(255) not null unique,
  weight smallint not null,
  primary key (name, href)
);

-- Populate Navigation Items
insert into navigation (name, href, weight)
  values ('Dashboard', '/dashboard', 1);

insert into navigation (name, href, weight)
  values ('Team', '/team', 2);

insert into navigation (name, href, weight)
  values ('Projects', '/projects', 3);

insert into navigation (name, href, weight)
  values ('Calendar', '/calendar', 4);

Once the table is created and populated, rebuild the graphql schema:

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

Then in the GraphQL Playground click Reload Schema and check the Docs again. You should now see docs for the navigation table created above:

• A query called navigationCollection with a description
• The description is a pageable collection of type navigation

If you’re familiar with GraphQL naming conventions you might have noticed the type generated called navigation is not correct. According to convention, type names should be PascalCase. Let’s remedy that by configuring pg_graphql to use inflection when building the schema.

To do so run the following in the SQL Editor:

-- Configure GraphQL name inflection
comment on schema public is e'@graphql({"inflect_names": true})';

Afterwards rebuild your GraphQL schema:

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

Then in the GraphQL Playground click Reload Schema and check the Docs again. You should now see docs for the table with a PascalCased type name:

• A query called navigationCollection with a description
• The description is a pageable collection of type Navigation

For field names such as name a href a similar rule applies only instead of becoming PascalCase they will become camelCase as described in the docs along with more advanced settings using a similar approach.

To disable inflection set inflect_names to false in the SQL statement above then rerun the last two queries. And when you’re finished you can delete the navigation table with the following SQL statement again using the editor:

-- Delete table for Navigation Items
drop table if exists navigation;

And, finally, rebuild your GraphQL schema if desired or consider disabling the pg_graphql extension if you no longer wish to use it.

Summary

I haven’t tested this yet using the Supabase Helm chart or even verified the functionality is there. But if it is that means this works for self-hosted Supabase running on Kubernetes before the feature has even moved out of beta.

Overall I’m very excited to see this as I’ve been looking for ways to improve the developer experience for users of my Svelte Headless UI Starter and Supabase with GraphQL will no doubt be a big win.

Those are the basics of activating and using GraphQL with Supabase. Simple and elegant. Consult the original Supabase GraphQL announcement and related docs to learn more about using this feature.