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}