Instant serverless GraphQL backends with Grafbase
Tags: graphql, serverless, api, webdev
Published: 2022-08-26 14:19:12

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](https://grafbase.com/).**

![Grafbase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3nftwwy2gow29bwzel0.jpg)

[Grafbase](https://grafbase.com/) 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:

```graphql
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:

```graphql
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:

![Grafbase CLI Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo67qrvf8b163kmxyvb1.png)

## 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](https://github.com/), and [Grafbase](https://grafbase.com/join-the-waitlist). 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](https://docs.github.com/en/get-started/quickstart/create-a-repo) if you’ve not done this before. Committing your code will look a little something like:

```graphql
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.

![Import your repository to Grafbase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqcabtevqjzv21310o7h.png)

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.

![Import selected repository to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spyatk344r9p9qzdy9af.png)

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

Click **Deploy** to continue.

![Deploy to Grafbase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7shyqdxegkh8lppmbzvb.png)

**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.

![Grafbase Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viublq5zghlzphz3z8pc.png)

## 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:

```bash
git switch -c my-first-schema-change
```

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

```graphql
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:

```graphql
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](http://GitHub.com) — [here’s mine](https://github.com/notrab/dev-to-grafbase/pull/1) from earlier.

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

![Deployment success message from Grafbase GitHub Bot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guls6o92etd6f7c4w9us.png)

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:

![Grafbase schema changes overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikf5jbgwrynksp6lf4jk.png)

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.

![Grafbase production deployment overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy79blcy9dsev7xjenb1.png)

## Going further

If you’re keen to learn more about Grafbase, I’d recommend reading the [documentation](https://grafbase.com/docs). There’s support for OpenID Connect, and more.

Make sure to join the [community](https://grafbase.com/community) on Discord to share feedback, ideas, and what you’ve been building.

See you on Discord! ❤️