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 extremely 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 {
            author
            message
            createdAt
          }
        }
      }
    }
  `)
</script>

• View on NPM
• Getting started guide
• Read the documentation
• Browse SvelteKit example
• Browse plugin source on GitHub

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