Skip to content

Instantly share code, notes, and snippets.

@sastan
Created April 14, 2021 20:56
Show Gist options
  • Save sastan/7e8215862cafa562f4f00b260d3cc76c to your computer and use it in GitHub Desktop.
Save sastan/7e8215862cafa562f4f00b260d3cc76c to your computer and use it in GitHub Desktop.
sveltekit + urql (minimal version)
<script context="module">
import { get, readable } from 'svelte/store'
import { createClient, operationStore } from '@urql/svelte'
import { browser, dev } from '$app/env'
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ fetch, context }) {
const client = await createClient({
// Pass in the fetch from sveltekit to have access to serialized requests during hydration
fetch,
dev: browser && dev,
})
return {
context: {
...context,
client,
// Works just like query from @urql/svelte
query: async (query, variables, context) => {
const store = operationStore(query, variables, context)
const result = await client.query(store.query, store.variables, store.context).toPromise()
Object.assign(get(store), result)
return store
},
},
props: { client }
}
}
</script>
<script>
import { setClient } from '@urql/svelte'
/**
* @type {import('@urql/svelte').Client}
*/
export let client
setClient(client)
</script>
<slot />
<script context="module">
export async function load({ context }) {
return {
props: {
todos: await context.query(
// String or TypedDocument or ...
`query ....`,
),
},
}
}
</script>
<script>
import { query } from '@urql/svelte'
/**
* @type {import('@urql/svelte').OperationStore}
*/
export let todos
// Setup subscription for the lifetime of the component
query(todos)
</script>
@jycouet
Copy link

jycouet commented Apr 14, 2021

Thx for the gist

Unfortunately it's not running out of the box. (I'm new to urql, but I think it's the lib to use!!! :))

Few points:

  • I added url: 'my graphql endpoint' in createClient function
  • dev is not a valid ClientOptions type, so I commented it.
  • Then, I get this error
Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:649)
    at setContext (index.mjs:679)
    at setClient (context.ts:11)
    at instance ($layout.svelte:51)
    at init (index.mjs?v=8c6ad2ab:1474)
    at new $layout ($layout.svelte:51)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:240)
    at new Proxy<$layout> (proxy.js:340)
    at create_fragment (root.svelte:36)
  • I tried to wrap it in an onMount, but it's still the same thing.

Any idea?

@sastan
Copy link
Author

sastan commented Apr 15, 2021

I know why. I'll post an example repo shortly.

@sastan
Copy link
Author

sastan commented Apr 15, 2021

@jycouet
Copy link

jycouet commented Apr 15, 2021

It's working very well. Thx a lot.
I will dig into svelte.config.cjs & package.json to see what what wrong before.

Thank you again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment