Instant serverless GraphQL backends with Grafbase

Building GraphQL backends has always involved a considerable amount of wiring together a bunch of dependencies. It doesn’t matter if you’re solving the n+1 problem with DataLoader, or subscribing to data changes with GraphQL Subscriptions, it’s been a challenge for many years to get it right.

Libraries and frameworks like Yoga, Strawberry, Apollo, and many more have given us some great foundations.

As a developer I’ve loved learning from the open source community by exploring how others do it on GitHub, and then applying that knowledge to my own projects. Most importantly, I’ve always learned from my mistakes which have gone on to help me build better servers.

But, there comes a time where building your own backend gets increasingly difficult. I often find myself at some point asking;

• How do I manage CI/CD?
• How do I handle caching?
• How do I see what schema changes are breaking?
• How do I check this works in production, without pushing to production?
• Where do I host this?
• Is my database in the same location as my API?

For many years I’ve used Heroku Pipelines, and where possible used AWS to host my serverless GraphQL. But all of that required setup, configuration, and things I had to invest time to manage.

Today I’d like to walkthrough creating a serverless GraphQL backend with Grafbase.

Grafbase provides a seamless developer experience for building backends. Your backend is deployed to the edge.

Getting started

Inside a new or existing project directory, run npx grafbase init.

Then add to grafbase/schema.graphql a schema for a new Todo model:

type Todo @model {
  id: ID!
  title: String!
  complete: Boolean!
}

Now you’re done! That’s all you need to build instant GraphQL backends.

To run the backend locally, run npx grafbase dev. Now head to [http://localhost:4000](http://localhost:4000) to try it out.

From there you can use GraphQL in the way you’re used to!

Let’s create a new Todo using the todoCreate mutation:

mutation {
  todoCreate(input: { title: "Hello Dev.to!", complete: false }) {
    todo {
      id
      title
      complete
    }
  }
}

That’s it!

I’ve gone ahead and made a simple cheatsheet to share with your friends and colleagues:

Deploy to production with GitHub

Running Grafbase locally is great, but what about when you want to deploy to production?

You’ll want to make sure you have an account with GitHub, and Grafbase. Grafbase is currently in private beta, but you can request access to join from the homepage.

You’ll next want to commit your code to a new GitHub repository. You can read the docs if you’ve not done this before. Committing your code will look a little something like:

git remote add origin https://github.com/notrab/dev-to-grafbase.git
git branch -M main
git push -u origin main

ℹ️ https://github.com/notrab/dev-to-grafbase is the URL of my repo.

Import your repository

Once you’ve logged into Grafbase, it’ll look a little something like the image below. Here we’ll click Import your repository to get started.

Next you’ll want to find the repository from your personal, or organization account. Here I’m searching for the repository dev-to-grafbase I created previously.

Click Import to continue.

Once you’ve imported the repository, Grafbase will automatically detect grafbase/schema.graphql and import your schema.

Click Deploy to continue.

That’s it! You now have a GraphQL backend deployed to the edge with Grafbase. 🎉

From the Grafbase Dashboard you can discover your API endpoint, API Keys, Branches, and the hosted Playground to execute GraphQL operations.

Propose changes to the schema with Pull Requests

Just like you would use GitHub to propose changes to code with Pull Requests, you can use GitHub to suggest changes to grafbase/schema.graphql and Grafbase will automatically deploy a new serverless GraphQL backend at the edge!

To get started, create a new branch. If you’re using the command line, it’ll look a little something like this:

git switch -c my-first-schema-change

Now inside of grafbase/schema.graphql add description to your Todo model:

type Todo @model {
  id: ID!
  title: String!
  description: String
  complete: Boolean!
}

Save the file, commit, and push to GitHub. If you’re using the command line, it’ll look something like this:

git commit -am 'feat: add description field'
git push

Next you’ll want to create a new Pull Request. You can do this via the command line, or GitHub.com — here’s mine from earlier.

Grafbase will then comment on the Pull Request with the deployment status:

Clicking on the link provided by Grafbase will take you to that branch inside of your projects dashboard.

From there you can see an overview of the changes (new field added), and the endpoint for that specific change:

That’s it! How cool. A fully isolated deployment preview for your schema change. You can then use this endpoint to test against your frontend to make sure everything works before merging with production.

Once you’re happy that the changes can be added, merge the Pull Request in GitHub, and Grafbase will automatically merge the changes to your production backend API.

Going further

If you’re keen to learn more about Grafbase, I’d recommend reading the documentation. There’s support for OpenID Connect, and more.

Make sure to join the community on Discord to share feedback, ideas, and what you’ve been building.

See you on Discord! ❤️