Working with SvelteKit, Houdini and GraphQL Live Queries

Houdini GraphQL is a fully-featured GraphQL client that seamlessly integrates with SvelteKit. Houdini automatically adds types for any fragment, mutation, query or live query inside your application.

When data changes in your application by other users, there's no way to know this updated without another trip back to the server.

In this guide we will explore adding GraphQL Live Queries to an existing SvelteKit application using the @grafbase/houdini library to switch connection types depending on the query executed.

You will want to follow this guide to configure SvelteKit, Houdini and Grafbase.

Make sure you have your Grafbase backend running before following this guide:

npx grafbase dev

If you haven't already, install the Grafbase plugin for Houdini:

npm install @grafbase/houdini

Make sure to add this to the plugins array inside houdini.config.js:

const config = {
  watchSchema: {
    url: 'http://localhost:4000/graphql',
  },
  plugins: {
    'houdini-svelte': {},
    '@grafbase/houdini': {},
  },
}

You can now use the @live directive with any query and Houdini will automatically listen for changes using server-sent events.

Update the file src/routes/+page.gql file to use the @live directive:

query GetAllMessages @live {
  messageCollection(first: 100) {
    edges {
      node {
        id
        body
        createdAt
      }
    }
  }
}

That's it! Houdini will automatically switch between a regular HTTP request and one that keeps the connection alive with server-sent events.