Welcome to API Reference

Every GraphQL document in your Houdini application is driven by a Svelte store with specific methods for performing each task.

GraphQL Documents

query

Fetch data from the server

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

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

fragment

Reuse part of a query

$: data = fragment(user, graphql(`
    fragment UserAvatar on User {
        firstName
        lastName
        email
    }
`))

$: data = fragment(user, graphql(`
    fragment UserAvatar on User {
        firstName
        lastName
        email
    }
`))

mutation

Send updates to the server and keep the local cache up to date

const addFriend = graphql(`
    mutation FollowFriend {
        followFriend(id: 1) {
            friend {
                followed_by_viewer
            }
        }
    }
`)

const addFriend = graphql(`
    mutation FollowFriend {
        followFriend(id: 1) {
            friend {
                followed_by_viewer
            }
        }
    }
`)

subscription

Real-time updates

graphql(`
    subscription PostLiked {
        postLiked {
            post {
                like_count
            }
        }
    }
`)

graphql(`
    subscription PostLiked {
        postLiked {
            post {
                like_count
            }
        }
    }
`)

Runtime APIs

GraphQL Magic

A summary of the custom things houdini lets you do in your graphql documents

const setFavorite = graphql(`
    mutation SetFavorite {
        setFavoriteRecipe(id: 1) {
            recipe {
                ...Favorites_insert
            }
        }
    }
`)

const setFavorite = graphql(`
    mutation SetFavorite {
        setFavoriteRecipe(id: 1) {
            recipe {
                ...Favorites_insert
            }
        }
    }
`)

HoudiniClient

An overview of the options you can pass to the HoudiniClient constructor


    new HoudiniClient({
        url: "...",
        fetchParams({ session }) {
            return {
                headers: { }
            }
        }
    })


    new HoudiniClient({
        url: "...",
        fetchParams({ session }) {
            return {
                headers: { }
            }
        }
    })

Cache API

An overview of the programmatic cache API (for imperative updates)


    const user = cache.get("User", {
        id: 3
    })

    user.write({
        fragment: graphql(`
            fragment Update on User {
                firstName
            }
        `),
        data: {
            firstName: "Harry"
        }
    })


    const user = cache.get("User", {
        id: 3
    })

    user.write({
        fragment: graphql(`
            fragment Update on User {
                firstName
            }
        `),
        data: {
            firstName: "Harry"
        }
    })

Client Plugins

Everything you could want to know about HoudiniClient Plugins


    () => ({
        start(ctx, { next }) {
            console.log("hello world")
            next(ctx)
        }
    })


    () => ({
        start(ctx, { next }) {
            console.log("hello world")
            next(ctx)
        }
    })

Setup

Codegen Plugins

Everything you could want to know about Houdini Codegen Plugins


plugin('plugin_name', async () =>  {
    return {
        generate({ documents }) {
            // generate something
        }
    }
})


plugin('plugin_name', async () =>  {
    return {
        generate({ documents }) {
            // generate something
        }
    }
})

Config

The config file format

export default {
    apiUrl: 'http://localhost:4000',
    plugins: {
        'houdini-svelte': {}
    }
}

export default {
    apiUrl: 'http://localhost:4000',
    plugins: {
        'houdini-svelte': {}
    }
}

Vite Plugin

A powerful tool to enable Houdini's declarative API in your svelte+vite projects

// vite.config.js
import houdini from 'houdini/vite'

export default {
    plugins: [houdini(), ...],
}

// vite.config.js
import houdini from 'houdini/vite'

export default {
    plugins: [houdini(), ...],
}

Command Line

Command line tool commands and arguments

houdini generate --pull-schema

houdini generate --pull-schema