Skip to Content
Houdini Logo

The disappearing GraphQL client for the Svelte community.

  • The same API for Kit, Sapper, or vanilla Svelte
  • Normalized cache with declarative field updates and list mutations
  • Colocate data requirements or define operations in external files with generated stores
  • First-class support for advanced patterns like subscriptions and pagination
<script>
    import { query, graphql } from '$houdini'

    const { data } = query(graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `)
</script>

{#each $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 { query, graphql } from '$houdini'
    import { UserAvatar } from '~/components'

    const { data } = query(graphql`
        query AllUsers {
            users {
                ...UserAvatar
            }
        }
    `)
</script>

{#each $data.users as user}
    <UserAvatar {user} />
{/each}

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 { mutation, graphql } from '$houdini'

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

<button onClick={createProject} />

Type Safe

Generate TypeScript definitions for every document in your application.

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

    const { data } = query<AllTodoItems>(graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `)
</script>

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