SSR with sveltekit

[Tiim]

Hi everyone

I'm trying to implement SSR with my SvelteKit project using urql. I found the SSR Exchange in the docs, but that does not really help me because I don't know where I could store the initial state.

As far as I understood, the queries must also execute during SSR for the exchange to collect the initial state, but in my experience sveltekit doesn't wait until the graphql queries are finished:

<script>
	import { getContextClient, gql, queryStore } from '@urql/svelte';

	const client = getContextClient();

	$: gqlStore = queryStore({
		client,
		query: QUERY,
		variables: {  },
		context: {
			additionalTypenames: ['event'],
		},
	});
</script>

<pre>{JSON.stringify(gqlStore.data, null, 2)}</pre>

Has anyone found a working solution to server side rendering with urql and sveltekit?

[Tiim]

I have tried to search around a bit more and have not found much for now.

Thinking about how sveltekit allows loading of data in the load function and injecting the results as props to the page it would be amazing if the queryStore function had a parameter initialData where an initial value for the query could be supplied. This might look something like this:

+page.js

export function load({}) {
  const client = ...;
  const queryResult = client.query(QUERY, {...}).toPromise(); // no need to await
  return {
    queryResult
  }
}

+page.svelte

<script>
import ...;
export let data;
$: gqlStore = queryStore({
  client,
  query: QUERY
  initialData: data.queryResult  // this line would maybe pre-populate the cache and prevent an initial network request from the client.
})
</script>

[Tiim]

I found a way to manually implement a way to specify the initial data. I wrote a blog post how to do that here.

[farin]

Thanks for your effort.
Facing same issue now and it's painful compared to Vue Nuxt3 approach where SSR magically works without effort.

[farin]

@Tiim I spent some time exploring the topic and hopefully find solution which fits best my needs

What I expect

• reactive urql store as you mention in blog post. In other words easy fetch on page param change
• not using +page.server.ts, it makes request proxied through server. I want direct query to qraphql backend.
• "lazy" queries - wait for them on server but do not block client transition (show loading state)

Let' look at my solution:

+page.svelte
I want to keep original urql store semantic. The trick is in factory method provided by loader which can buiid store based on params

<script lang="ts">
  import { page } from '$app/stores'

  export let data: any
  $: query = data.createQueryStore($page)
  $: myobj = $query.data?.myobj
</script>

{#if $query.fetching}
    <p>Loading...</p>
  {:else if $query.error}
    <p>Oh no... {$query.error.message}</p>
  {:else}
    <h1>{myobj.name}</h1>
  {/if}

+page.ts
loader calls generic method, with specific query and variables mapping

export async function load(event: PageLoadEvent) {
  return {
    createQueryStore: await queryStoreFactory(event, (page) => ({
      query: DetailQuery,
      variables: { id: page.params.id }
    }))
  }
}

lib/urql.ts
All magic is here
If "lazy" is not needed, initialRender tracking can be omited
server needs to wait for first query - we want all data ready for server served page
client initial render must wait - because event.fetch works (avoid duplicate request) only if awaited in loaded
client page transition returns store without wait -> page is rendered immediately and data loaded asynchronously

import { browser } from '$app/environment'
import { PUBLIC_API_URL } from '$env/static/public'
import {
  createClient,
  queryStore,
  type AnyVariables,
  type Client,
  type QueryArgs
} from '@urql/svelte'
import type { OperationResultStore, Pausable } from '@urql/svelte/dist/types/common'
import { tick } from 'svelte'
import type Page from '../routes/+page.svelte'

interface AnyPageLoadEvent {
  fetch: typeof fetch
  params: Record<string, string>
}

export type QueryStoreArgsProvider<Data = any, Variables extends AnyVariables = AnyVariables> = (
  page: Page | AnyPageLoadEvent
) => Omit<QueryArgs<Data, Variables>, 'client'>

export type QueryStoreFactory<Data = any, Variables extends AnyVariables = AnyVariables> = (
  page: Page
) => OperationResultStore<Data, Variables> & Pausable

export function getClient(event?: AnyPageLoadEvent): Client {
  if (browser && (window as any)._urqlClient) return (window as any)._urqlClient

  const client = createClient({
    url: PUBLIC_API_URL + '/graphql/',
    fetch: event?.fetch
  })
  if (browser) {
    ;(window as any)._urqlClient = client
  }
  return client
}

async function waitForQuery(queryStore: OperationResultStore) {
  return new Promise<void>((resolve) => {
    const unsub = queryStore.subscribe(async (r) => {
      if (!r.fetching) {
        await tick()
        unsub()
        resolve()
      }
    })
  })
}

export function isInitialRender(): boolean {
  return !(window as any)._sveltekit_rendered
}

export function afterInitialRender(): void {
  ;(window as any)._sveltekit_rendered = true
}

export async function queryStoreFactory<Data = any, Variables extends AnyVariables = AnyVariables>(
  event: AnyPageLoadEvent,
  argsProvider: QueryStoreArgsProvider<Data, Variables>,
  lazyOnClient = true
): Promise<QueryStoreFactory<Data, Variables>> {
  const client = getClient(event)

  const factory = (page: Page | AnyPageLoadEvent) => {
    return queryStore({
      ...argsProvider(page),
      client
    } as QueryArgs<Data, Variables>)
  }

  // initial page render must be also awaited
  // because event.fetch replay saved requests only if awaited from load(), not later
  if (lazyOnClient && browser && !isInitialRender()) {
    return factory
  }

  // call factory to have store to wait for, but memoize it because page isself call it too
  let initialStore = factory(event)
  await waitForQuery(initialStore)
  return (page: Page | AnyPageLoadEvent) => {
    if (initialStore) {
      try {
        return initialStore
      } finally {
        initialStore = null
      }
    }
    return factory(page)
  }
}

The last piece is root layyout
notify initial render is over
/routes/+layuout.svelte
onMount(() => afterInitialRender())

[ladislavrolnik]

Hi folks, I am experimenting with @farin solution but I am using +page.server.ts
and problem is following. Promise<QueryStoreFactory<Data, Variables>> or AKA function passed from
my Form Actions in return statement.

export const actions = {
	login: async (event: RequestEvent) => {
		const { request } = event;
		const anyEvent = event as AnyPageLoadEvent;
		const data = await request.formData();
		const formData = Object.fromEntries(data);
		const username = data.get('username');
		const password = data.get('password');
		if (!username || !password) {
			return {
				message: 'Username and password are required'
			};
		}
		return {
			success: true,
			createQueryStore: await queryStoreFactory(FetchType.Mutation, anyEvent, (page) => ({
				query: LoginDoc,
				variables: { username: 'lackorol', password: 'lackorol' }
			}))
		};
	}
};

I am getting Error: Data returned from action inside /auth is not serializable: Cannot stringify a function (data..createQueryStore)
Dont know how was your solution functioning before but there is no possible pass to load server function anything except POJO.

I have tried

			createQueryStore: (
				await queryStoreFactory(FetchType.Mutation, anyEvent, (page) => ({
					query: LoginDoc,
					variables: {username: 'lackorol', password: 'lackorol'}
				}))
			).toString()

so stringify function with toString() and then

in my +page.svelte

<script lang="ts">
  import Login from "../../components/auth/Login.svelte";
	import { page } from "$app/stores";

  export let form;
  $: query = 	Function(form?.createQueryStore).call(null, $page);
</script>

but query is undefined...any help or is my reasoning correct that I need to somehow pass function as string from server to client?

[GraemeF]

We are using svelte-kit's fetch to make sure the data is only fetched once. We execute queries only to update the urql cache, and we only render what's in the cache.

If a query is likely to be fast:

1. In +page.ts/load, execute the query and await the data using toPromise, but discard the result because we are just using it to populate the urql cache and capture the fetch response
2. Svelte-kit's fetch will capture the request and include the response in the page sent to the client
3. In +page.svelte, use queryStore to execute the query again using the cache-only fetch policy, but this time it will be fast because the captured network response is already in the page. The urql cache will be populated with the data and the page will be kept up-to-date as the cache is updated

If a query is likely to be slow:

1. In +page.ts/load don't do anything
2. In +page.svelte, use queryStore to execute the query using the cache-and-network fetch policy

There may be a downside to this that hasn't become apparent yet...

[farin]

@GraemeF using very similar approach in our current approach. With small differences.

• routes doesn't care about policies. If query is slow, then is fetched when onMount resolved and all is initiated from component.
• when it is your "fast" query - then fetch is initiated from load.ts.
• policies are taken in account under the hood - SSR or browser first page render - network-first (= render page on server), then when load() running in browser after navigation. then uses cache-only in load, and network-first in component if not in cache

still query is always declared only at one place (in load or in component) and custom wrapper around it makes all dirty work. It's little bit compiicated inside but work pretty nice then.