1.4.3 • Published 7 months ago

houdini-plugin-svelte-global-stores v1.4.3

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

➕ 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 🚀

1.4.3

7 months ago

1.4.2

7 months ago

1.4.1

7 months ago

1.4.0

8 months ago

1.3.5

8 months ago

1.3.4

8 months ago

1.3.3

8 months ago

1.3.2

9 months ago

1.3.1

10 months ago

1.3.0

11 months ago

1.2.60

1 year ago

1.2.63

12 months ago

1.2.64

12 months ago

1.2.61

1 year ago

1.2.62

1 year ago

1.2.57

1 year ago

1.2.58

1 year ago

1.2.59

1 year ago

1.3.0-next.0

11 months ago

1.2.49

1 year ago

1.2.48

1 year ago

1.2.52

1 year ago

1.2.53

1 year ago

1.2.50

1 year ago

1.2.51

1 year ago

1.2.56

1 year ago

1.2.54

1 year ago

1.2.55

1 year ago

1.2.47

1 year ago

1.2.46

1 year ago

1.2.45

2 years ago

1.2.44

2 years ago

1.2.43

2 years ago

1.2.42

2 years ago

1.2.41

2 years ago

1.2.40

2 years ago

1.2.39

2 years ago

1.2.38

2 years ago

1.2.37

2 years ago

1.2.36

2 years ago

1.2.35

2 years ago

1.2.28

2 years ago

1.2.29

2 years ago

1.2.30

2 years ago

1.2.31

2 years ago

1.2.34

2 years ago

1.2.32

2 years ago

1.2.33

2 years ago

1.2.12

2 years ago

1.2.13

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.16

2 years ago

1.2.17

2 years ago

1.2.14

2 years ago

1.2.15

2 years ago

1.2.18

2 years ago

1.2.19

2 years ago

1.2.20

2 years ago

1.2.23

2 years ago

1.2.24

2 years ago

1.2.21

2 years ago

1.2.22

2 years ago

1.2.27

2 years ago

1.2.25

2 years ago

1.2.26

2 years ago

1.2.20-next.1

2 years ago

1.2.23-next.0

2 years ago

1.2.20-next.0

2 years ago

1.2.9

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.6-next.0

2 years ago

1.2.0

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0-next.1

2 years ago

1.2.0-next.0

2 years ago

1.1.4-react.0

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.2.0-react.1

2 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1-next.0

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.2

3 years ago

1.0.0-next.19

3 years ago

1.0.1

3 years ago

1.0.0-next.18

3 years ago

1.0.0

3 years ago

1.0.0-next.17

3 years ago

1.0.0-next.16

3 years ago

1.0.0-next.11

3 years ago

0.20.1

3 years ago

1.0.0-next.10

3 years ago

0.20.0

3 years ago

1.0.0-next.15

3 years ago

1.0.0-next.14

3 years ago

1.0.0-next.13

3 years ago

1.0.0-next.12

3 years ago

1.0.0-next.2

3 years ago

1.0.0-next.22

3 years ago

1.0.0-next.21

3 years ago

1.0.0-next.20

3 years ago

1.0.0-next.24

3 years ago

1.0.0-next.23

3 years ago

0.20.4

3 years ago

0.20.3

3 years ago

0.20.2

3 years ago

1.0.0-next.3

3 years ago

1.0.0-next.4

3 years ago

1.0.0-next.5

3 years ago

1.0.0-next.6

3 years ago

1.0.0-next.7

3 years ago

1.0.0-next.8

3 years ago

1.0.0-next.9

3 years ago

1.0.0-next.1

3 years ago

1.0.0-next.0

3 years ago

0.19.4

3 years ago

0.19.3

3 years ago

0.19.2

3 years ago

0.19.1

3 years ago

0.19.0

3 years ago