Expand documentation on SSR hydration with SvelteKit #68

Jakeii · 2022-01-20T19:03:58Z

I saw this wasn't documented but found that it works great, so have expanded the documentation, very similar to the next.js/react-query approach

Jakeii · 2022-01-21T15:15:36Z

Actually, i discovered the approach I used in the example doesn't quite work as expected. I did figure it out though, will update very soon.

amen-souissi

...

Jakeii · 2022-01-25T19:45:31Z

@amen-souissi So I've discovered 2 things, one is that SvelteKit does the (de)hydration automatically when using the fetch passed to the load function, which is worth a mention.

The other is that unless I'm missing something, using svelte-query's hydration is a bit inelegant for a few reasons:

As far as I can see, for the same QueryClient instance to be available in all load functions it needs to be created in __layout.svelte's load and passed around via stuff (or another means), as the getContext/setContext used in useQueryClient/useQuery doesn't seem to work during SSR.
The Hydrate Component can't be used as the re-hydration would be too late, as load runs in the browser too so the prefetched requests would also run in the browser, but we can call the hydrate function 'manually' in __layout.svelte's load.
The only the only way to get the dehydratedState from various components' load during SSR to _layout.svelte's load during browser rendering is the session store (not really a big issue) (stuff doesn't work for some reason)

This is the sort of thing we're ending up with:

// __layout.svelte
<script context="module">
  import { hydrate, QueryClient } from '@sveltestack/svelte-query';

  export function load({ stuff, session }) {
    const { dehydratedState } = session; // dehydratedState is set in the session during SSR

    const queryClient = new QueryClient();

    hydrate(queryClient, dehydratedState); // 

    stuff.queryClient = queryClient; // save a reference to the hydrated queryClient instance so it can be used in other components' `load`

    return { props: {queryClient}};
  }

<script>
  import { QueryClientProvider } from '@sveltestack/svelte-query';

  export const queryClient;
</script>

<QueryClientProvider client={queryClient}>
	<slot />
</QueryClientProvider>

// pages/posts.svelte
<script context="module">
  import { dehydrate, QueryClient, useQuery } from 'react-query';

export async function load({ session }) {
  const queryClient = stuff.queryClient; // access the queryClient, during SSR it won't have been hydrated but when loaded in the browser it will

  await queryClient.prefetchQuery('posts', getPosts)

  session.dehydratedState = dehydrate(queryClient);  // save the dehydratedState in the session during SSR so it can be accessed in the browser
  }
}
</script>
<script>
  const queryResult = useQuery('posts', getPosts) // by the time we get here hydration will have happend
</script>

10p-freddo · 2022-02-01T07:50:29Z

@Jakeii super helpful, thanks!

Are you able to build successfully when you import hydrate and dehydrate in the way you indicated? If I try to import either of them from @sveltestack/svelte-query, the dev server runs but I can't complete a build:

"hydrate" cannot be exported from ../../node_modules/@sveltestack/svelte-query/svelte/queryCore/core/hydration.js as it is a reexport that references itself.

This appears to work instead, with the caveat that you lose the type declarations:

import { hydrate } from '@sveltestack/svelte-query/svelte/queryCore/hydration';

Jakeii · 2022-02-04T14:14:31Z

@Jakeii super helpful, thanks!

Are you able to build successfully when you import hydrate and dehydrate in the way you indicated? If I try to import either of them from @sveltestack/svelte-query, the dev server runs but I can't complete a build:

"hydrate" cannot be exported from ../../node_modules/@sveltestack/svelte-query/svelte/queryCore/core/hydration.js as it is a reexport that references itself.

This appears to work instead, with the caveat that you lose the type declarations:
import { hydrate } from '@sveltestack/svelte-query/svelte/queryCore/hydration';

strange, building works fine for me, what version of sveltekit are you using?

10p-freddo · 2022-02-08T20:28:25Z

1.0.0-next.250

I haven't investigated because the workaround is simple enough, but it is strange, indeed.

Jakeii · 2022-02-10T19:11:06Z

@ghughes started happening to me randomly, hopefully the fix can be merged soon #76

johnny-mh · 2022-04-04T16:17:03Z

Here is my solution. it work well with pagination.

// __layout.svelte

<script lang="ts">
    import { session } from '$app/stores';
    import { Hydrate, QueryClient, QueryClientProvider } from '@sveltestack/svelte-query';

    const queryClient = new QueryClient({
        // If you don't pass staleTime. then fetching 1 page on first render.
        // So pass 5 minutes for 1st render
        defaultOptions: { queries: { refetchOnWindowFocus: false, staleTime: 60000 } }
    });
</script>

<QueryClientProvider client={queryClient}>
    // Get state from server from session
    <Hydrate state={$session.dehydratedState}>
        <slot />
    </Hydrate>
</QueryClientProvider>

// /consults/[page].svelte

<script lang="ts" context="module">
    import { browser } from '$app/env';
    import { useQuery, dehydrate, QueryClient, type QueryFunction } from '@sveltestack/svelte-query';

    let origin = '';

    export async function load({ url, params, session }) {
        // Create the QueryClient on server only for prefetching
        if (!browser) {
            origin = url.origin;

            const queryClient = new QueryClient();
            await queryClient.prefetchQuery(`consults/${params.page}`, getConsults);
            
            // Return stuff here isn't help to send state to `__layout.svelte`
            // So using session for deliver it to client side `__layout.svelte`
            session.dehydratedState = dehydrate(queryClient);
        }

        return {};
    }

    const getConsults: QueryFunction<GetConsultResponse, string> = async ({ queryKey }) => {
        const pageStr = /consults\/(\d+)/.exec(queryKey[0])![1];
        const page = Number(pageStr || '1');
        const res = await fetch(`${origin}/api/consults/${page}`);

        return res.json();
    };
</script>

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

    $: pageNum = Number($page.params.page);
    $: result = useQuery(`consults/${pageNum}`, getConsults);

    function onSetPage(e: CustomEvent) {
        goto(`/consults/${e.detail}`);
    }
</script>

{#if $result.isLoading}
loading!
{:else}
done!
{/if}

It does not fetching fist time on render 1 page. when click 2page. it fetching 2nd page.

at last. click 1 page it fetching 1 page. but it does not fetch first render :)

NatoBoram

A year late isn't too late!

Ok but this is literally the only resource on SSR for Svelte Query.

... I hope it works?

NatoBoram · 2023-01-12T21:47:33Z

docs/src/pages/guides/ssr.md

+Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s' `initialData` option:
+
+```markdown


Suggested change

```markdown

```svelte

NatoBoram · 2023-01-12T21:48:36Z

docs/src/pages/guides/ssr.md

+### Using `initialData`
+
+Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s' `initialData` option:


Suggested change

Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s' `initialData` option:

Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s `initialData` option:

NatoBoram · 2023-01-12T21:49:49Z

docs/src/pages/guides/ssr.md

+- Wrap your app component with `<Hydrate>` and pass it the `dehydratedState` prop from `pageProps`
+
+```markdown


Suggested change

```markdown

```svelte

NatoBoram · 2023-01-12T21:50:16Z

docs/src/pages/guides/ssr.md

+
+```markdown
+// __layout.svelte


Suggested change

// __layout.svelte

// +layout.svelte

NatoBoram · 2023-01-12T21:50:59Z

docs/src/pages/guides/ssr.md

+- Create a new `QueryClient` instance
+- Prefetch the data using the clients `prefetchQuery` method and wait for it to complete
+- Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `__layout.svelte`


Suggested change

- Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `__layout.svelte`

- Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `+layout.svelte`

NatoBoram · 2023-01-12T21:54:56Z

docs/src/pages/guides/ssr.md

+// pages/posts.svelte
+<script context="module">
+  import { dehydrate, QueryClient, useQuery } from 'react-query';


NatoBoram · 2023-01-12T21:54:58Z

docs/src/pages/guides/ssr.md

+
+```markdown
+// pages/posts.svelte


Suggested change

// pages/posts.svelte

// pages/posts/+page.svelte

NatoBoram · 2023-01-12T21:55:12Z

docs/src/pages/reference/hydration/HydrateComp.md

-import { Hydrate } from '@sveltestack/svelte-query/hydration'
+```markdown
+<script>
+import { Hydrate } from '@sveltestack/svelte-query'


Suggested change

import { Hydrate } from '@sveltestack/svelte-query'

import { Hydrate } from '@sveltestack/svelte-query'

NatoBoram · 2023-01-12T21:56:44Z

docs/src/manifests/manifest.json

@@ -356,4 +356,4 @@
      ]
    }
  ]
-}
+}


Suggested change

}

}

NatoBoram · 2023-01-12T22:00:53Z

docs/src/pages/guides/ssr.md

+}
+</script>
+<script>


There's a mix of <script> and <script lang="ts">; it would be nice if it could all be <script lang="ts"> so it can be useful to both JavaScript users with /** @type {} */ and to TypeScript users with import type {}.

docs: expand on SSR hydration with SvelteKit

a40e66b

amen-souissi approved these changes Jan 22, 2022

View reviewed changes

amen-souissi added the documentation Improvements or additions to documentation label Jan 22, 2022

amen-souissi requested changes Jan 22, 2022

View reviewed changes

NatoBoram reviewed Jan 12, 2023

View reviewed changes

		Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s' `initialData` option:

		```markdown

		### Using `initialData`

		Together with SvelteKit's [`load`](https://kit.svelte.dev/docs#loading), you can pass the data you fetch to `useQuery`'s' `initialData` option:

		- Wrap your app component with `<Hydrate>` and pass it the `dehydratedState` prop from `pageProps`

		```markdown

	- Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `__layout.svelte`
	- Use `dehydrate` to dehydrate the query cache and pass it to the page via the `dehydratedState` prop. This is the same prop that the cache will be picked up from in your `+layout.svelte`

	import { Hydrate } from '@sveltestack/svelte-query'
	import { Hydrate } from '@sveltestack/svelte-query'

@@ @@ -356,4 +356,4 @@ @@
                     ]
                   }
                 ]
-              }
+              }

Expand documentation on SSR hydration with SvelteKit #68

Are you sure you want to change the base?

Expand documentation on SSR hydration with SvelteKit #68

Uh oh!

Conversation

Jakeii commented Jan 20, 2022

Uh oh!

Jakeii commented Jan 21, 2022

Uh oh!

amen-souissi left a comment

Choose a reason for hiding this comment

Uh oh!

Jakeii commented Jan 25, 2022

Uh oh!

10p-freddo commented Feb 1, 2022

Uh oh!

Jakeii commented Feb 4, 2022

Uh oh!

10p-freddo commented Feb 8, 2022

Uh oh!

Jakeii commented Feb 10, 2022

Uh oh!

johnny-mh commented Apr 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NatoBoram left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

johnny-mh commented Apr 4, 2022 •

edited

Loading