Houdini 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
            }
        }
    }
`)

Extra Bits

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
            }
        }
    }
`)

Setup

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