Skip to content

update docs for the fetch api #407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 12 additions & 15 deletions documentation/docs/04-preloading.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,53 +45,51 @@ The `load` function receives two arguments — `page` and `session`.

So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/blog/some-post?foo=bar&baz`, the following would be true:

* `page.path === '/blog/some-post'`
* `page.params.slug === 'some-post'`
* `page.query.foo === 'bar'`
* `page.query.baz === true`
- `page.path === '/blog/some-post'`
- `page.params.slug === 'some-post'`
- `page.query.foo === 'bar'`
- `page.query.baz === true`

`session` can be used to pass data from the server related to the current request, e.g. the current user. By default it is `undefined`. [Seeding session data](docs#Seeding_session_data) describes how to add data to it.


#### api

In browsers, you can use `fetch` to make AJAX requests, for getting data from your server routes (among other things). On the server it's a little trickier — you can make HTTP requests, but you must specify an origin, and you don't have access to cookies. This means that it's impossible to request data based on the user's session, such as data that requires you to be logged in.

To fix this, SvelteKit provides `api` methods, which work on the server as well as in the client:
To fix this, SvelteKit provides `fetch` in the arguments:

```html
<script context="module">
export async function load() {
const res = await api.get(`server-route.json`);
export async function load({ fetch }) {
const res = await fetch(`server-route.json`);

// ...
}
</script>
```

It is important to note that `load` may run on either the server or in the client browser. Code called inside `load` blocks:
- should run on the same domain as any upstream API servers requiring credentials
- should not reference `window`, `document` or any browser-specific objects
- should not reference any API keys or secrets, which will be exposed to the client

- should run on the same domain as any upstream API servers requiring credentials
- should not reference `window`, `document` or any browser-specific objects
- should not reference any API keys or secrets, which will be exposed to the client

### Return values

If you return a Promise from `load`, 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`).


#### error

If the user navigated to `/blog/some-invalid-slug`, we would want to render a 404 Not Found page. We can do that with `this.error`:

```html
<script context="module">
export async function load({ page, session }) {
export async function load({ page, session, fetch }) {
const { slug } = page.params;

const res = await api.get(`blog/${slug}.json`);
const res = await fetch(`blog/${slug}.json`);

if (res.status === 200) {
const article = await res.json();
Expand All @@ -105,7 +103,6 @@ If the user navigated to `/blog/some-invalid-slug`, we would want to render a 40

The same applies to other error codes you might encounter.


#### redirect

You can abort rendering and redirect to a different location with `this.redirect`:
Expand Down