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

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

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

Extra Bits

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

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

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

Setup

Config

The config file format

export default {
    schemaPath: './schema.graphql',
    sourceGlob: 'src/**/*.svelte',
    module: 'esm',
    framework: 'kit',
    apiUrl: 'http://localhost:4000'
}

export default {
    schemaPath: './schema.graphql',
    sourceGlob: 'src/**/*.svelte',
    module: 'esm',
    framework: 'kit',
    apiUrl: 'http://localhost:4000'
}

SvelteKit 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