Simplify building realtime applications with GraphQL Live Queries

Building realtime applications can be a daunting task due to the complexity of building a scalable realtime backend that integrates easily with your frontend.

Grafbase makes building realtime applications easy with GraphQL Live Queries.

Today, we’re excited to announce a new way to achieve realtime with the @live directive.

The concept of GraphQL Live Queries has been an ongoing discussion for many years with no official specification yet. Live Queries have been an attractive solution for ensuring GraphQL clients are up-to-date with the latest server state, but due to the lack of specification, the implementation differs from provider to provider.

We’re pleased to announce that we won’t be adding to that confusion. You can integrate Live Queries using a method that the open-source community has been familiar with for years already thanks to the work The Guild has been doing.

One of the biggest selling points of using Live Queries is the ability to convert existing GraphQL queries to realtime by just adding the @live directive.

Here is a typical schema you may find for a Guestbook application:

type Message @model {
  author: String!
  message: String!
}

Grafbase automatically generates GraphQL queries and mutations models using the @model directive.

This means we can execute the following Live Query to get all messages:

query GetAllMessages($first: Int!) @live {
  messageCollection(first: $first) {
    edges {
      node {
        id
        author
        message
        createdAt
      }
    }
  }
}

Now any time someone executes a GraphQL mutation to create, update or delete a message, Grafbase will automatically update the data via Server-Sent Events (SSE).

These events contain payloads in the format of a JSON Patch which contains information on how to transform the current state to the new state — if you were to use polling or subscriptions then you would end up over-fetching more data than you need to.

{
  "patch": [
    {
      "op": "add",
      "path": "/messageCollection/edges/3",
      "value": {
        "node": {
          "id": "message_01GJMDWJ2M6WWTM26S7C1KKYBE",
          "title": "GraphQL live queries are easy with Grafbase!"
        }
      }
    }
  ],
  "revision": 1
}

The biggest struggle until now with adopting GraphQL Live Queries has been the complicated setup of wiring various libraries, utilities, handling reconnections, errors, and more.

Today we announce the release of two new packages that make it even easier than before to integrate Live Queries into your app:

• @grafbase/apollo-link
• @grafbase/urql-exchange

These packages automatically handle JSON patching and reconnecting. If you aren't using Apollo Client or URQL you can still use the native EventSource API to handle SSE as you would any other realtime API.

Watch

Live Queries are free to use and available today. Get started with the Grafbase CLI for a production-like local development setup, with zero config:

npx grafbase init