svelte - Ways to make layout load data both reactive + changeable? - Stack Overflow

admin管理员组

文章数量:1202373

• 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?

本文标签： svelteWays to make layout load data both reactivechangeableStack Overflow