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"]
	}
}

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):

/// src/routes/myProifle/+page.ts

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

export const houdini_load = graphql`
	query MyProfile {
		viewer {
			id
		}
	}
`

export function 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:

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

<script>
	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 will have to add your types 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
				}
			}
		}
	`
);