- I am returning a bunch of data from my +layout.ts
- I want the data to change when the url changes
- I also want to be able to modify filter, search, tag etc from the UI via input, dropdown elements
+layout.ts
type NewsFilter = 'latest' | 'likes' | 'dislikes' | 'trending'type LayoutLoadReturnType = { filter: NewsFilter; id: string | undefined; latestNewsPromise: Promise<{status: number; data: Array<{id: string; author: string; title: string; description: string;}>}>; search: string; symbolNames: {status: number, Array<{id: string; name: string; symbol: string}>}; symbolRanks: {status: number, Array<{id: string; rank: number; symbol: string}>}; tag: {id: string; name: string; symbol: string} | undefined; title: string | undefined; urlFriendlyTag: string;};export const load: LayoutLoad = ({ data, fetch, params, url }): LayoutLoadReturnType => { const filter = (url.searchParams.get('filter') as NewsFilter) || 'latest'; const id = params.id; const search = url.searchParams.get('search') || ''; const title = params.title; const urlFriendlyTag = params.tag || 'all'; const { symbolNames, symbolRanks } = data; const tag = getTagFromUrlFriendlyTag(urlFriendlyTag, symbolNames.data); let endpoint; if (typeof id !== 'undefined'&& id !== null && isValidId(id)) { endpoint = getNewsListWithItemEndpoint(filter, id, undefined, undefined, search, tag); } else { endpoint = getNewsListEndpoint(filter, undefined, undefined, search, tag); } return { filter, id, latestNewsPromise: fetch(endpoint).then((r) => r.json()), search, symbolNames, symbolRanks, tag, title, urlFriendlyTag };};What have I tried?
Option 1
- When I change the URL due to some action below, the values dont change+layout.svelte
<script lang="ts">const {children, data}=$props();let filter = $state(data.filter);let search = $state(data.search);let tag = $state(data.tag);let urlFriendlyTag = $state(data.urlFriendlyTag);let newsItems = $state([]);data.latestNewsPromise.then((items) => { newsItems.push(...items)})async function loadMore() { const {data} = await fetch(getNextPageEndpoint()); newsItems.push(...items)}</script><input bind:value="search" /><a href="/news/?filter=likes">View liked news</a><a href="/news/?filter=trending">View trending news</a><!-- ... Options to navigate to news items with different tags via url -->Option 2
- I cannot change the values anymore+layout.svelte
<script lang="ts">const {children, data}=$props();let filter = $derived(data.filter);let search = $derived(data.search);let tag = $derived(data.tag);let urlFriendlyTag = $derived(data.urlFriendlyTag);let newsItems = $state([]);data.latestNewsPromise.then((items) => { newsItems.push(...items)})async function loadMore() { const {data} = await fetch(getNextPageEndpoint()); newsItems.push(...items)}</script><input bind:value="search" /><a href="/news/?filter=likes">View liked news</a><a href="/news/?filter=trending">View trending news</a><!-- ... Options to navigate to news items with different tags via url -->- How do I make it both reactive and modifiable?