Skip to Content

Houdini or: How I Learned to Stop Worrying and Love GraphQL exploding-head

It’s here. A fully-featured GraphQL client that seamlessly integrates with the framework of your choice.

Start with a schema. Write queries and let Houdini take care of the rest. Fully automatic and totally customizable. Declarative, Composable, Typesafe. First-class support for Fragments, Subscriptions, Pagination, List Mutations, Optimistic Responses, and so much more. You didn’t know you needed this.

+page.svelte
src > routes > items > +page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script lang=”ts”>
  import { graphql } from '$houdini'

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

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

This is all you need to get going with SSR.   🚀

Used in Production By

GraphQL, simplified

GraphQL makes a lot of promises but the other clients expect you to go though a silly amount of ceremony to see the benefits. Houdini integrates tightly in your existing tool chain to remove as much of the complexity as possible without compromising on features.

Great for Simple Cases, Amazing for Complex Ones

Whether you are a seasoned GraphQL developer or just starting out on your journey, Houdini will feel like a superpower. It leverages battle-tested patterns like fragment composition and connection-based pagination to deliver a developer experience you might not have known was even possible.

100% Typesafe

Houdini generates types for every document in your application. If you are a TypeScript person, you won't have to juggle any generic parameters or mess with complicated paths. If you prefer JSDocs, eveything just works.

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.