From 221e0d62657874eb67b2dcaf9d44f59e5d4851a1 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 13 Jan 2023 17:19:17 +1100 Subject: [PATCH 1/3] docs(svelte-query): Expand SSR docs --- docs/svelte/ssr.md | 10 ++++++++++ .../svelte/auto-refetching/src/routes/+layout.ts | 1 + examples/svelte/hydration/src/routes/+layout.ts | 1 + .../src/routes/+layout.ts | 1 + examples/svelte/playground/src/routes/+layout.ts | 1 + examples/svelte/star-wars/src/routes/+layout.ts | 1 + .../svelte/star-wars/src/routes/films/+page.svelte | 2 +- packages/svelte-query/static/emblem-light.svg | 13 ------------- 8 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 examples/svelte/auto-refetching/src/routes/+layout.ts create mode 100644 examples/svelte/hydration/src/routes/+layout.ts create mode 100644 examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts create mode 100644 examples/svelte/playground/src/routes/+layout.ts create mode 100644 examples/svelte/star-wars/src/routes/+layout.ts delete mode 100644 packages/svelte-query/static/emblem-light.svg diff --git a/docs/svelte/ssr.md b/docs/svelte/ssr.md index 956f6135c1..770dcc33ce 100644 --- a/docs/svelte/ssr.md +++ b/docs/svelte/ssr.md @@ -5,6 +5,14 @@ title: SSR and SvelteKit Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit. +## Caveat + +SvelteKit defaults to rendering routes with SSR. Unless you are using one of the below solutions, you need to disable SSR. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. + +One way to achieve this is to `import { browser } from '$app/environment'` and add `enabled: browser` to the options of `createQuery`. This will set the query to disabled on the server, but enabled on the client. + +Another way to achieve this is using page options. For that page or layout, you should set `export const ssr = false` in either `+page.ts` or `+layout.ts`. You can read more about using this option [here](https://kit.svelte.dev/docs/page-options#ssr). + ## Using `initialData` Together with SvelteKit's [`load`](https://kit.svelte.dev/docs/load), you can pass the data loaded server-side into `createQuery`'s' `initialData` option: @@ -38,6 +46,7 @@ export const load: PageLoad = async () => { Pros: - This setup is minimal and this can be a quick solution for some cases +- Works with both `+page.ts`/`+layout.ts` and `+page.server.ts`/`+layout.server.ts` load functions Cons: @@ -108,3 +117,4 @@ Pros: Cons: - Requires more files for initial setup +- Works with only `+page.ts`/`+layout.ts` load functions diff --git a/examples/svelte/auto-refetching/src/routes/+layout.ts b/examples/svelte/auto-refetching/src/routes/+layout.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/examples/svelte/auto-refetching/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false; diff --git a/examples/svelte/hydration/src/routes/+layout.ts b/examples/svelte/hydration/src/routes/+layout.ts new file mode 100644 index 0000000000..77ab0a02eb --- /dev/null +++ b/examples/svelte/hydration/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = true; diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false; diff --git a/examples/svelte/playground/src/routes/+layout.ts b/examples/svelte/playground/src/routes/+layout.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/examples/svelte/playground/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false; diff --git a/examples/svelte/star-wars/src/routes/+layout.ts b/examples/svelte/star-wars/src/routes/+layout.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/examples/svelte/star-wars/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false; diff --git a/examples/svelte/star-wars/src/routes/films/+page.svelte b/examples/svelte/star-wars/src/routes/films/+page.svelte index 45069a3da8..3a7cb24713 100644 --- a/examples/svelte/star-wars/src/routes/films/+page.svelte +++ b/examples/svelte/star-wars/src/routes/films/+page.svelte @@ -6,7 +6,7 @@ return await res.json() } - query = createQuery({ + const query = createQuery({ queryKey: ['films'], queryFn: getFilms, }) diff --git a/packages/svelte-query/static/emblem-light.svg b/packages/svelte-query/static/emblem-light.svg deleted file mode 100644 index a58e69ad5e..0000000000 --- a/packages/svelte-query/static/emblem-light.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - emblem-light - Created with Sketch. - - - - - - - - \ No newline at end of file From 36d4e06da176e6caf624968f874b4789947b8ffd Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 13 Jan 2023 17:23:32 +1100 Subject: [PATCH 2/3] Expand wording --- docs/svelte/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte/ssr.md b/docs/svelte/ssr.md index 770dcc33ce..40e0fde3da 100644 --- a/docs/svelte/ssr.md +++ b/docs/svelte/ssr.md @@ -7,7 +7,7 @@ Svelte Query supports two ways of prefetching data on the server and passing tha ## Caveat -SvelteKit defaults to rendering routes with SSR. Unless you are using one of the below solutions, you need to disable SSR. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. +SvelteKit defaults to rendering routes with SSR. Unless you are using one of the below solutions, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. One way to achieve this is to `import { browser } from '$app/environment'` and add `enabled: browser` to the options of `createQuery`. This will set the query to disabled on the server, but enabled on the client. From 6da7ee7d6f32044f20f5c2b961282df748dae405 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 13 Jan 2023 18:55:57 +1100 Subject: [PATCH 3/3] Run prettier --- examples/svelte/auto-refetching/src/routes/+layout.ts | 2 +- examples/svelte/hydration/src/routes/+layout.ts | 2 +- .../svelte/optimistic-updates-typescript/src/routes/+layout.ts | 2 +- examples/svelte/playground/src/routes/+layout.ts | 2 +- examples/svelte/star-wars/src/routes/+layout.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/svelte/auto-refetching/src/routes/+layout.ts b/examples/svelte/auto-refetching/src/routes/+layout.ts index a3d15781a7..62ad4e4f47 100644 --- a/examples/svelte/auto-refetching/src/routes/+layout.ts +++ b/examples/svelte/auto-refetching/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = false; +export const ssr = false diff --git a/examples/svelte/hydration/src/routes/+layout.ts b/examples/svelte/hydration/src/routes/+layout.ts index 77ab0a02eb..b40fb51719 100644 --- a/examples/svelte/hydration/src/routes/+layout.ts +++ b/examples/svelte/hydration/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = true; +export const ssr = true diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts index a3d15781a7..62ad4e4f47 100644 --- a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts +++ b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = false; +export const ssr = false diff --git a/examples/svelte/playground/src/routes/+layout.ts b/examples/svelte/playground/src/routes/+layout.ts index a3d15781a7..62ad4e4f47 100644 --- a/examples/svelte/playground/src/routes/+layout.ts +++ b/examples/svelte/playground/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = false; +export const ssr = false diff --git a/examples/svelte/star-wars/src/routes/+layout.ts b/examples/svelte/star-wars/src/routes/+layout.ts index a3d15781a7..62ad4e4f47 100644 --- a/examples/svelte/star-wars/src/routes/+layout.ts +++ b/examples/svelte/star-wars/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = false; +export const ssr = false