Build realtime GraphQL backends with Grafbase

The Guild has made working with realtime GraphQL Subscriptions and Live Queries easy over the last few years thanks to plugins that work out of the box with GraphQL Yoga.

However, there are developers who don't want the hassle of building a backend, managing deployments, configuring continuous integration, juggling connection pooling, and more. Thankfully, there are solutions designed to abstract all the hard work.

Grafbase (opens in a new tab) was built to manage all of the above. You get a distributed GraphQL API at the edge by creating a single grafbase/schema.graphql file in your project.

Your schema contains models with special directives to relate data, set default values, validation, and more.

# grafbase/schema.graphql
 
type Post @model {
  title: String!
  slug: String! @unique
}

In 2021, Laurin Quast (opens in a new tab) introduced a collection of packages to support the use of GraphQL Live Queries on the server and client.

Today, Grafbase is happy to announce it now supports GraphQL Live Queries!

This means that all you need to do to start using GraphQL Live Queries is add @live to your query!

query @live {
  postCollection(first: 10) {
    edges {
      node {
        id
        title
      }
    }
  }
}

The @live directive will observe any changes to the data and send a message using Server-Sent Events (opens in a new tab) with the patch to update the current query state.

The event is in the format of JSON Patch (opens in a new tab):

{
  "patch": [
    {
      "op": "add",
      "path": "/postCollection/edges/3",
      "value": {
        "node": {
          "id": "post_01GJMDWJ2M6WWTM26S7C1KKYBE",
          "title": "Instant serverless GraphQL backends"
        }
      }
    }
  ],
  "revision": 1
}

Together with The Guild, Grafbase is also releasing 2 new packages (with more on the way) to further abstract the effort needed to implement Live Queries on the frontend.

Starting with support for Apollo Client (opens in a new tab) and URQL (opens in a new tab), you can add Live Queries with the following packages:

• @grafbase/apollo-link (opens in a new tab)
• @grafbase/urql-exchange (opens in a new tab)

Developers not using either of those libraries can still use Live Queries with the native EventSource (opens in a new tab) API.

Try It Now!

You can try Live Queries by building your own backend in one simple command:

npx grafbase init

Once you've modelled your data using the schema (opens in a new tab) you can run your backend locally to build:

npx grafbase dev

About Grafbase

Grafbase is the easiest way to build and deploy GraphQL backends. Go from idea to production in seconds, without spending time on infrastructure.

• Build backends with GraphQL SDL as configuration
• Spin up instant preview environments with every PR
• Build locally with the CLI — npx grafbase dev
• Deployed to the edge with no cold starts
• Add granular permissions for users (and groups)
• Build collaborative multiplayer apps faster with Live Queries

Similar articles

Flutter GraphQL | The Guild

Brick is an open source package that provides offline support for GraphQL in Flutter

Tim Shedor • Jan 25th 2023

GraphQL Cursor Pagination with PostgreSQL

An SQL based approach for understanding and implementing GraphQL Cursor Pagination.

Laurin Quast • Feb 15th 2023

Introducing Schema Policy in Hive

New GraphQL-Hive feature for enfocring best-practices and schema-design styles.

Dotan Simha • May 16th 2023

GraphQXL - The Missing GraphQL Language Extension?

GraphQXL, a new language for building big and scalable GraphQL server-side schemas

Gabriel Musat • Dec 12th 2022