Realtime GraphQL with Live Queries

Grafbase now supports GraphQL Live Queries!

GraphQL backends built with Grafbase now support Live Queries out of the box — learn more.

Grafbase uses server-sent events to update @live queries with a JSON patch payload to derive the current state of what changed in the backend for the current query.

You can get started using the playground locally and the dashboard with the @live directive:

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

Now when data is created, updated or deleted, Grafbase will update clients listening with a patch similar to the following:

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

We've also made it easier to implement Live Queries on the client with three new packages:

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

Developers not using either of those can still use the native EventSource API.

Watch

Watch

• Documentation
• Apollo example
• URQL example
• SvelteKit + Houdini example

• The GraphQL Playground has been updated to use the same as that inside the Grafbase Dashboard.
• The CLI now supports using a template flag with the init command.
• Fixes a race condition when updating items that resulted in stale responses.
• Fixes a missing field issue when creating nested relations.
• Fixes @default directive.

We'd love to hear your feedback and ideas, so join us on Discord.