F.A.Q.

Here are some answers to common questions you might have while working with Houdini

Can I define graphql documents in external files?

Yes! You’ll just have to rely on the store apis for your documents and write your route’s loads manually. For more information on using your document’s stores check out Working with GraphQL guide.

What’s the best way to add a GraphQL endpoint to my application?

Simple answer, we recommend KitQL. For more information about our collaboration, head over to this blog post.

Can I use queries in server only load or endpoints?

Short answer: Yep! Just define your query in an external file and use the store api as described in Server only load or API route / endpoint.

Note that today, these two options returns only json data (not a store).

How does the plugin generate loads?

Consider this query:

<script lang="ts">
    import { graphql } from '$houdini'

    const SpeciesInfo = graphql(`
        query SpeciesInfo {
            species(id: 1) {
                name
                flavor_text
                sprites {
                    front
                }
            }
        }
    `)
</script>

<div>
    {$SpeciesInfo.data.info.species.name}
</div>

<script>
    import { graphql } from '$houdini'
    
    const SpeciesInfo = graphql(`
        query SpeciesInfo {
            species(id: 1) {
                name
                flavor_text
                sprites {
                    front
                }
            }
        }
    `)
</script>

<div>
    {$SpeciesInfo.data.info.species.name}
</div>

By looking at the contents of every graphql tag in a component, the plugin can extract the query names and then generate/transform that one file into these two:

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

    export let data: PageData

    $: ({ SpeciesInfo } = data)
</script>

<script>
    /* @type { import('./$houdini').PageData } */
    export let data
    
    $: ({ SpeciesInfo } = data)
</script>

import { SpeciesInfoStore } from '$houdini'
import type { PageLoad } from './$houdini'

export const load: PageLoad = async ({ event }) => {
    await SpeciesInfoStore.fetch({ event })

    return {
        SpeciesInfo: SpeciesInfoStore
    }
}

import { SpeciesInfoStore } from '$houdini'

/* @type { import('./$houdini').PageLoad } */
export const load = async ({ event }) => {
    await SpeciesInfoStore.fetch({ event })

    return {
        SpeciesInfo: SpeciesInfoStore,
    }
}

If you haven’t seen Houdini’s document stores before, please check out the Working with GraphQL guide.

How do I customize the fetching logic on a case-by-case basis?

You should use the metadata parameter in the document store to pass arbitrary information into your client’s network function. For more information, please visit the query store docs.

What is this Generated an empty chunk... warning from vite?

If you have a route directory that does not contain a +page.js file and does not have an inline query in your +page.svelte, the plugin will generate an empty +page.js file that is never used. This confuses vite hence the warning. Don’t worry - since this empty file is never imported there are no performance implications.

My IDE is complaining that the internal directives and fragments don’t exist.

Every plugin and editor is different so we can’t give you an exact answer but Houdini will write 2 files inside of the $houdini directory that contain all of the schema definitions that it relies on. Be default these files are located at $houdini/graphql/schema.graphql and $houdini/graphql/documents.gql. You can configure this value in your config file with definitionsPath.

Does Houdini support Framework X?

At the moment, Houdini only support SvelteKit and vanilla Svelte projects. If you are interested in integrating Houdini into another framework, please reach out! We are very interested in adding support for additional frameworks, we just don’t have an abundance of time 😅

Why “Houdini”?

Because the famous Harry Houdini was a magician and this library is making GraphQL complexity disappearing. What a nice magic trick! 🎩

How can you help?

You can help in various ways:

• Add a star to your github repo, it always helps in terms of visibility.
• Join us on discord to share tips & tricks, anwser questions, … be part of the community.
• Contribute to the code base. From fixing a typo to adding the support of a new framework!
• Sponsor us to keep the project growing.