qQuery

Not like jQuery. A GraphQL Fetcher & Cache for Svelte Kit

UnderConstruction.gif

More information in this space soon. API is very much in flux rn.

Preview

🪄 Magic Mode

Magic mode is the preferred way of using gQuery. Not because it's magical, but because it's easy.

1. Initialize G

export const g = new GFetch({
	path: Environment.apiURL //whatever your api url is here
})

2. Add GraphQL Codegen Plugin

docs coming soon

3. Run GraphQL Codegen

docs coming soon

4. Use that thang

<script context="module" lang="ts">
	import { getSeriesList } from '../whatever'

	export async function load() {
		await getSeriesList({
			limit: 0
		})
		return {}
	}
</script>

<script lang="ts">
	import { gCache } from '@leveluptuts/gQuery'

	// $: console.log($gCache.seriesList)
</script>

Manual Mode

I guess if you want to do it this way you can.

gFetch

The graphql fetcher client.

1. Initialize

export const g = new GFetch({
	path: Environment.apiURL
})

Fetch

const seriesList = ({ variables}) =>
		g.fetch<SeriesListQuery>({
			queries: [{ query: SeriesListDoc, variables }],
		})

Cache and Fetch

export async function getSeriesList(variables) {
	await gQuery('seriesList', { query: seriesList, variables })
}

Use

<script context="module" lang="ts">
	import { getSeriesList } from '../whatever'

	export async function load() {
		await getSeriesList({
			limit: 0
		})
		return {}
	}
</script>

<script lang="ts">
	import { gCache } from '@leveluptuts/gQuery'

	// $: console.log($gCache.seriesList)
</script>

FAQ / WTF

Q? How tf do I update the cache?

It's a Svelte Writable Store. So after a mutation you can quickly and easily manually update the cache.

Q? Can't you update the cache magically for me?

Maybe? If you want to be in charge of writing that bit, the door is open 😼

1.9 KiB Raw Blame History