sveltekit + urql (minimal version)

$layout.svelte

<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 />

index.svelte

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

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?

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

Here you go: https://github.com/sastan/sveltekit-urql-example

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.