Typescript

Houdini is written in typescript and will generate types for all of your documents and special functions you define for houdini.

Configuration

In order to setup your project to take full advantage of Houdini’s generated types, you need to change your tsconfig file to look like the following:

{
	"compilerOptions": {
		"rootDirs": [".", "./.svelte-kit/types", "./$houdini/types"]
	}
}

Global Types

There are 3 different types that Houdini defines globally. It is useful to extend these values to fit your needs (for example, to get help filling out your session information):

declare namespace App {
    // user-specific information passed to each query
    interface Session {
        user?: {
            token: string;
        };
    }

    // used to thread information between plugins
    interface Stuff {}

    // used to pass one-off configuration for a request
    interface Metadata {
        doTheThing?: boolean | null;
    }
}

Queries

When working with Houdini’s generated load functions (whether in a route or component), you can import type definition for your variable functions and hooks from ./$houdini (a relative import):

import { graphql } from '$houdini'
import type { AfterLoadEvent } from './$houdini'

export const _houdini_load = graphql(`
    query MyProfile {
        viewer {
            id
        }
    }
`)

export function _houdini_afterLoad({ data }: AfterLoadEvent) {
    return {
        computedValue: data.MyProfile.viewer.id + '_new'
    }
}

Your PageData type will also come from ./$houdini since SvelteKit’s generated type definitions don’t know about the generated load:

<script lang="ts">
    import { PageData } from './$houdini'

    export let data: PageData

    $({ MyProfile } = data)
</script>

{$MyProfile.data.viewer.id}: {data.computedValue}

Inline Stores

If you are working with inline stores, you don’t have to provide types when using the graphql function:

import { graphql } from '$houdini'

const store = graphql(`
	query AllItems {
		items {
			id
			text
		}
	}
`)

If you are using graphql as a template tag, you will have to provide type signatures explicitly:

import { type AllItemsStore, graphql } from '$houdini'

const store: AllItemsStore = graphql`
	query AllItems {
		items {
			id
			text
		}
	}
`

Fragments

To use inline fragments inside your components, you need to receive the parent query as a prop. Remember to set the type of your fragment by importing it.

import { fragment, graphql, type PostContent } from '$houdini'

export let post: PostContent

$: data = fragment(
	post,
	graphql(`
		fragment PostContent on Post {
			content
			tags {
				nodes {
					name
				}
			}
		}
	`)
)