GraphQL Live Queries with Houdini

GraphQL Live Queries with Houdini

Earlier this year Grafbase introduced Realtime GraphQL with Live Queries.

The release also included first-class support for Apollo Client and URQL. Both of these packages wrapped the vanilla EventSource API to automatically handle reconnecting and JSON Patch.

Today, we're extemely happy to announce that Houdini GraphQL now supports Live Queries!

Houdini recently introduced an API for Client Plugins that allows any developer to customize the runtime behaviour of your application's documents.

This plugin architecture made way for Grafbase to be the first official client plugin that adds realtime capabilities to Svelte + Houdini leveraging server-sent events.

Once you've installed and configured the plugin, you can add the @live directive to any query to make it live!

<script lang="ts">
  import { graphql } from '$houdini'

  const GetAllMessages = graphql(`
    query GetAllMessages @live {
      messageCollection(first: 100) {
        edges {
          node {

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