Skip to Content
Houdini Logo

The disappearing GraphQL client for SvelteKit.

  • Normalized cache with declarative field updates and list mutations
  • Colocate data requirements or define operations in external files
  • First-class support for advanced patterns like subscriptions and pagination
<!-- src/routes/items/+page.svelte -->

<script>
    import { graphql } from '$houdini'

    const allItems = graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `
</script>

{#each $allItems.data.items as item}
    <div>{item.text}</div>
{/each}

Automatic Load Generation

Houdini's vite plugin can hide all of the details you don't care about when fetching your query. This is everything it takes for SSR 👉 

<!-- src/routes/items/+page.svelte -->

<script>
    import { graphql } from '$houdini'

    const allItems = graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `
</script>

{#each $allItems.data.items as item}
    <div>{item.text}</div>
{/each}

Composable

Your components can define what data they need to do their job by and you can mix them together however you want. 

<script>
    import { graphql, fragment } from '$houdini'

    export let user

    $: userInfo = fragment(user, graphql`
        fragment UserAvatar on User {
            avatar
        }
    `)
</script>


<img src={$userInfo.avatar} />

Declarative

Updates to your application cache are made with a set of declarative fragments that avoid the surgical logic necessary to keep your application up to date. 

<script>
    import { graphql } from '$houdini'

    const createProject = graphql`
        mutation CreateProject {
            createProject(name: "houdini") {
                project {
                    ...All_Projects_insert
                }
            }
        }
    `
</script>

<button onClick={createProject.mutate} />

Type Safe

Generate TypeScript definitions for every document in your application. 

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

    const store: AllTodoItemsStore = graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `
</script>

{#each $data.items as item}
    <div>{item.text}</div>
{/each}