The disappearing GraphQL clients.

➕ houdini-plugin-svelte-global-stores

This package provides global stores for houdini's svelte bindings.

Setup

To use this plugin, add it to the list of plugins in houdini.config.js:

/// <references types="houdini-svelte">
/// <references types="houdini-plugin-svelte-global-stores">

/** @type {import('houdini').ConfigFile} */
const config = {

  plugins: {
    'houdini-plugin-svelte-global-stores': {
      prefix: 'GQL_',
      generate: ['mutation', 'subscription', 'fragment']
    },
    'houdini-svelte': {}
  }

};

export default config;

The following configuration options are available:

• prefix (optional, default: GQL_): The default prefix of your global stores. This lets your editor provide autocompletion with just a few characters.
• generate (optional, default: ['mutation', 'subscription', 'fragment']). Note that by default, 'Query' is omitted on purpose. You can also pass "all" to generate all stores.

Usage

This plugin allows you to import a globally accesible store for your external documents. It's important to be careful when using global stores on the server since it can result in data leaking across requests.

# src/lib/queries/MyAwesomeQuery.gql

query MyAwesomeQuery {
    viewer {
        isAwesome
    }
}

// src/routes/myRoute/+page.js
import { GQL_MyAwesomeQuery } from '$houdini'

Note the prefix GQL_ is to enable easy autocompletion in your editor - give it a try!

Generating Loads For Stores

You can now tell the houdini plugin to generate loads for your stores. To do this, you need to export a houdini_load variable from your +page.js/ts file:

// src/routes/myProfile/+page.ts

import { GQL_MyQuery, GQL_Query1, GQL_Query2 } from '$houdini'

export const houdini_load = GQL_MyQuery
// or
export const houdini_load = [GQL_Query1, GQL_Query2]

Fragments example

Fragments stores can be created from your external documents by using the .get method on the global store in $houdini:

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

    // the reference will get passed as a prop
    export let user

    // load the the required UserAvatar for this component
    $: data = GQL_UserAvatar.get(user)
</script>

<img src={$data.profilePicture} />

Endpoints

Using a query store inside of an endpoint looks very similar to the load function: just pass the event you are handed in your route function:

import { GQL_MyQuery } from '$houdini'

export async function get(event) {
    const { data } = await GQL_MyQuery.fetch({ event })

    return {
        body: {
            data
        }
    }
}

HoudiniGraphQL.com 🚀