houdini

houdini copied to clipboard

At the moment, if a user wants to use the preprocessor to generate a load function they must define their queries inline and use the appropriate "inline" function for the runtime. It would be nice to be able to somehow tell the preprocessor to generate a load function for a store.

An example api:

<script context="module">
    import ViewerProfileStore from '$houdini/stores/ViewerProfile'

    export const routeStore = ViewerProfileStore
</script>

{$ViewerProfileStore.data.viewerProfile.firstName}

I put my notes here, because I want to explore this later 👍

Inline

It relies on TemplateExpression prefixed with graphql

<script>
    import { query, graphql } from '$houdini'

    const { data } = query(graphql`
        query AllTodoItems {
            items {
                text
            }
        }
    `)
</script>

External

With:

<script>
    import { GQL_AllTodoItems } from '$houdini'

    $: browser && GQL_AllTodoItems.fetch()
</script>

How to identify a store? 1.0 prefix GQL_ 2.1 method .fetch(

• It's a query
• having flag SSR?
• having flag Blocking
• No need context
• No need event

2.2 method .mutate(

• It's a mutation
• No need context

...

unforunately matching the GQL_ prefix doesn't work for users that are importing stores directly or creating their own. If we had some kind of module-level variable that we could look for, we could just generate the code to reference that variable so we wouldn't have to be very clever

I'm not sure what you mean by module-level variable?

Anycase, we need a mechanism to say "Hey, on this store please do this and that preprocessor part". Like an Opti-In preprocessor function.

I think we need a bit of usage to see in what direction to go.

i meant something like this 👇 the important part being that the variable is exported from the module context. SvelteKit uses this pattern in a few places as a way to provide configuration for the route (for example, when disabling prerendering).

<script context="module">
    import ViewerProfileStore from '$houdini/stores/ViewerProfile'

    export const routeStore = ViewerProfileStore
</script>

The preprocessor would just have to look for this variable and if its defined, it could generate the necessary logic. Because its a fixed name that acts as the API, the generated code does not have to figure out what name to use and instead can just generate code using routeStores

Just a heads up for people, support for this will be added as part of the upcoming work to support the new KitQL api 👍