From b17c2932cb9a576dcb8177f73c4926b1e9fb8fd9 Mon Sep 17 00:00:00 2001
From: sanconley <52422885+sanconley@users.noreply.github.com>
Date: Wed, 30 Oct 2019 15:02:36 -0700
Subject: [PATCH 1/2] Example of how to use data from preload
It took me longer than I'd like to admit to figure out to use the data returned from the preload function. I couldn't find anything in the docs, so hopefully this helps someone.
---
site/content/docs/04-preloading.md | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/site/content/docs/04-preloading.md b/site/content/docs/04-preloading.md
index bdbd70a6f..f9e796e64 100644
--- a/site/content/docs/04-preloading.md
+++ b/site/content/docs/04-preloading.md
@@ -15,6 +15,13 @@ As seen in the [routing](docs#Routing) section, page components can have an opti
return { article };
}
+
+
+
+{article.title}
+
```
It lives in a `context="module"` script — see the [tutorial](https://svelte.dev/tutorial/module-exports) — because it's not part of the component instance itself; instead, it runs *before* the component is created, allowing you to avoid flashes while data is fetched.
@@ -37,7 +44,7 @@ So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/bl
### Return value
-If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
+If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object. The value will be available within the components as props.
When Sapper renders a page on the server, it will attempt to serialize the resolved value (using [devalue](https://github.com/Rich-Harris/devalue)) and include it on the page, so that the client doesn't also need to call `preload` upon initialization. Serialization will fail if the value includes functions or custom classes (cyclical and repeated references are fine, as are built-ins like `Date`, `Map`, `Set` and `RegExp`).
From 2a754aa33405e17dcad222fb5fe17bd6b5b48cb1 Mon Sep 17 00:00:00 2001
From: Conduitry
Date: Tue, 25 Feb 2020 21:19:50 -0500
Subject: [PATCH 2/2] tweak wording
---
site/content/docs/04-preloading.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/04-preloading.md b/site/content/docs/04-preloading.md
index f9e796e64..6a98c0306 100644
--- a/site/content/docs/04-preloading.md
+++ b/site/content/docs/04-preloading.md
@@ -44,7 +44,7 @@ So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/bl
### Return value
-If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object. The value will be available within the components as props.
+If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object. In both cases, the values in the object will be passed into the components as props.
When Sapper renders a page on the server, it will attempt to serialize the resolved value (using [devalue](https://github.com/Rich-Harris/devalue)) and include it on the page, so that the client doesn't also need to call `preload` upon initialization. Serialization will fail if the value includes functions or custom classes (cyclical and repeated references are fine, as are built-ins like `Date`, `Map`, `Set` and `RegExp`).