@grafbase/houdini

Houdini plugin for Grafbase that automatically handles Live Queries and Scalar definitions.

Getting Started

This setup requires you to already have Houdini installed and configured with SvelteKit.

1. Install the dependencies

npm install @grafbase/houdini graphql

2. Set your environment variables

Add the following to your project .env:

PUBLIC_GRAFBASE_API_URL=
GRAFBASE_API_KEY=
# If you're using Grafbase Auth you will
# need to configure these shared values:
GRAFBASE_ISSUER_URL=https://grafbase.com
GRAFBASE_JWT_SECRET=

3. Update Houdini client

Inside src/client.ts you will want to add the authorization header

import { HoudiniClient } from '$houdini'
import { PUBLIC_GRAFBASE_API_URL } from '$env/static/public'

// Token generated by your auth provider: https://grafbase.com/docs/reference/directives#auth
const token = '...'

export default new HoudiniClient({
  url: PUBLIC_GRAFBASE_API_URL,
  fetchParams() {
    return {
      headers: {
        authorization: `Bearer ${token}`
      }
    }
  }
})

You will need to authenticate users with a supported auth provider and pass that token with every request to your backend.

4. Update houdini.config.js to include @grafbase/houdini:

const config = {
  plugins: {
    'houdini-svelte': {},
    '@grafbase/houdini': {}
  },
  watchSchema: {
    url: 'env:PUBLIC_GRAFBASE_API_URL',
    headers: {
      'x-api-key': 'env:GRAFBASE_API_KEY'
    }
  }
}

export default config

5. Subscribe to data changes with the @live directive inside +page.gql:

# Query based on your grafbase/schema.graphql
query GetAllMessages @live {
  messageCollection(first: 100) {
    edges {
      cursor
      node {
        id
        author
        message
        createdAt
      }
    }
  }
}

6. Render @live query results inside +page.svelte:

<script lang="ts">
  import type { PageData } from './$houdini';
  export let data: PageData;
  $: ({ GetAllMessages } = data);
</script>

{#if $GetAllMessages.fetching}
	loading...
{:else if $GetAllMessages.errors?.length}
	{JSON.stringify($GetAllMessages)}
{:else}
	{JSON.stringify($GetAllMessages.data)}
{/if}