Svelte ssr

[vladshcherbin]

Hey 👋

I was trying urql with svelte and managed to get it working. I've made a few tries to add ssr support in exchanges but failed.

Before making another attempt I'd like to ask if it's possible to use ssr with svelte in current version?

Thanks

urql version & exchanges:

• @urql/svelte: 0.3.0

[vladshcherbin]

Related issue with the error I get - sveltejs/sapper#1176, has linked bug issue sveltejs/svelte#3582

[afaur]

@vladshcherbin Best I can tell @urql/svelte is meant to be used inside svelte components (uses context api, etc), and sapper does not directly accommodate this (server side). If you want to use urql with sapper SSR you could use @urql/core.

Here is an example:

<script context='module'>
  import { createClient, dedupExchange, cacheExchange, fetchExchange, ssrExchange } from '@urql/core'
  import { pipe, subscribe } from 'wonka'

  const isServerSide = typeof window === 'undefined'

  const ssr = ssrExchange({
    isClient: !isServerSide,
    initialState: !isServerSide ? window.__URQL_DATA__ : undefined,
  })

  export async function preload(req) {
    if (isServerSide) {
      const client = createClient({
        url: 'https://0ufyz.sse.codesandbox.io',
        fetch: this.fetch,
        exchanges: [ dedupExchange, cacheExchange, ssr, fetchExchange ]
      })

      const q = `query { todos { id text complete } }`

      const todos = await new Promise(r => {
        const { unsubscribe } = pipe(
          client.query(q, {}),
          subscribe(result => { r(result.data.todos) })
        )
      })

      return { todos }
    }
  }
</script>

<script>
  export let todos = []
</script>

<ul>
  { #each todos as todo }
    <li>
      <span>ID: { todo.id }</span>
      <span>ID: { todo.text }</span>
      <span>Complete: { todo.complete }</span>
    </li>
  { /each }
</ul>