Build realtime GraphQL backends with Grafbase
Tags: graphql, realtime, livequery
Published: 2023-01-17 08:43:55

> This article was published on Tuesday, January 17, 2023 by [Jamie Barton](https://graphql.wtf) @ [The Guild Blog](https://the-guild.dev/)

**The Guild** has made working with realtime
[GraphQL Subscriptions and Live Queries](/blog/subscriptions-and-live-queries-real-time-with-graphql)
easy over the last few years thanks to plugins that work out of the box with
[GraphQL Yoga](/graphql/yoga-server).

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

```graphql
# grafbase/schema.graphql

type Post @model {
  title: String!
  slug: String! @unique
}
```

In 2021, [Laurin Quast](https://twitter.com/n1rual) 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!

```graphql
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](https://grafbase.com/docs/realtime/live-queries#server-sent-events) with the
patch to update the current query state.

The event is in the format of
[JSON Patch](https://grafbase.com/docs/realtime/live-queries#json-patch):

```json
{
  "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](https://www.apollographql.com/docs/react/) and
[URQL](https://formidable.com/open-source/urql/), you can add Live Queries with the following
packages:

*   [`@grafbase/apollo-link`](https://www.npmjs.com/package/@grafbase/apollo-link)
*   [`@grafbase/urql-exchange`](https://www.npmjs.com/package/@grafbase/urql-exchange)

Developers not using either of those libraries can still use Live Queries with the native
[`EventSource`](https://grafbase.com/docs/realtime/live-queries#eventsource) API.

## Try It Now!

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

```bash
npx grafbase init
```

Once you've modelled your data using the [schema](https://grafbase.com/docs/schema/overview) you can
run your backend locally to build:

```bash
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**