Skip to content
Merged
Show file tree
Hide file tree
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
Original file line number Diff line number Diff line change
Expand Up @@ -163,15 +163,15 @@ Both the argument and the return value are serialized with [devalue](https://git

### Refreshing queries

Any query can be updated via its `refresh` method:
Any query can be re-fetched via its `refresh` method, which retrieves the latest value from the server:

```svelte
<button onclick={() => getPosts().refresh()}>
Check for new posts
</button>
```

> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to refresh the query.
> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to update the query.

## form

Expand Down Expand Up @@ -271,6 +271,9 @@ import * as v from 'valibot';
import { error, redirect } from '@sveltejs/kit';
import { query, form } from '$app/server';
const slug = '';
const post = { id: '' };
/** @type {any} */
const externalApi = '';
// ---cut---
export const getPosts = query(async () => { /* ... */ });

Expand All @@ -286,6 +289,15 @@ export const createPost = form(async (data) => {
// Redirect to the newly created page
redirect(303, `/blog/${slug}`);
});

export const updatePost = form(async (data) => {
// form logic goes here...
const result = externalApi.update(post);

// The API already gives us the updated post,
// no need to refresh it, we can set it directly
+++await getPost(post.id).set(result);+++
});
```

The second is to drive the single-flight mutation from the client, which we'll see in the section on [`enhance`](#form-enhance).
Expand Down Expand Up @@ -542,6 +554,9 @@ export const addLike = command(v.string(), async (id) => {
`;

+++getLikes(id).refresh();+++
// Just like within form functions you can also do
// getLikes(id).set(...)
// in case you have the result already
});
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2191,6 +2191,13 @@ type RemotePrerenderFunction<Input, Output> = (

```dts
type RemoteQuery<T> = RemoteResource<T> & {
/**
* On the client, this function will update the value of the query without re-fetching it.
*
* On the server, this can be called in the context of a `command` or `form` and the specified data will accompany the action response back to the client.
* This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.
*/
set(value: T): void;
/**
* On the client, this function will re-fetch the query from the server.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,9 @@ This is useful for allowing trusted third-party services like payment gateways o

If the array contains `'*'`, all origins will be trusted. This is generally not recommended!

**Warning**: Only add origins you completely trust, as this bypasses CSRF protection for those origins.
> [!NOTE] Only add origins you completely trust, as this bypasses CSRF protection for those origins.

CSRF checks only apply in production, not in local development.

</div>
</div>
Expand Down