How do I access state from +layout.svelte inside +layout.ts or conditionally load data inside +layout.ts

[slidenerd]

• New to svelte and sveltekit so please bear with me
• I have a master detail layout in sveltekit (list of items and detail shown side by side on desktop and shown separately on mobile)
• The main challenge is that the urls change when filter or search is changed and item is clicked
• The list has infinite scrolling that keeps adding more and more items as we go down
• When I click on an item from page 1 it works but clicking on an item from any other page breaks the app

The Problem

• Similarly typing the URL of any item in the address bar directly works

• But typing the URL of any item in the address bar from page 2 breaks the app

URL Structure

src
└── routes
    └── (news)
        └── [[news=newsMatcher]]
            ├── [[tag]]
            ├── +layout.server.ts
            ├── +layout.svelte
            ├── +layout.ts
            └── +page.svelte
                └── [id=idMatcher]
                    └── [title]
                        └── +page.svelte

CodeSandbox Link

• You can find the codesandbox link here

• Keep in mind that this sandbox may not work on Firefox and may also have issues with ublock origin or adblock, best to run it on a different browser that you may have installed but don't use much

+layout.ts

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 {
		mapNameNoSpecialCharsToSymbolName,
		mapSymbolNoSpecialCharsToSymbolName,
		symbolNames,
		symbolRanks
	} = data;

	const endpoint = getNewsListFirstPageEndpoint(filter, search);

	return {
		filter,
		id,
		latestNewsPromise: fetch(endpoint).then((r) => r.json()),
		mapNameNoSpecialCharsToSymbolName,
		mapSymbolNoSpecialCharsToSymbolName,
		search,
		symbolNames,
		symbolRanks,
		title
	};
};

+layout.svelte

<script lang="ts">
	import '$lib/css/main.css';
	import { page } from '$app/state';
	import { MediaQuery } from 'svelte/reactivity';
	import type { NewsItem } from '$lib/types/NewsItem.js';
	import { isDetailRoute } from '$lib/functions';
	import {
		getNewsListNextPageEndpoint,
		getNewsListWithItemNextPageEndpoint
	} from '$lib/endpoints/backend';
	import { getNewsDetailEndpoint, getNewsListEndpoint } from '$lib/endpoints/frontend.js';
	import { goto } from '$app/navigation';
	import type { NewsFilter } from '$lib/types/NewsFilter.js';

	const large = new MediaQuery('min-width: 800px');
	const { children, data } = $props();
	const hasNoDetailSelected = $derived.by(() => {
		return (
			page.url.pathname === '/' ||
			page.url.pathname === '/news' ||
			page.url.pathname === `/news/${page.params.tag}`
		);
	});

	const filter = $derived(data.filter);
	const id = $derived(data.id);
	const search = $derived(data.search);
	const title = $derived(data.title);

	let newSearch = $state('');

	const newsItems: NewsItem[] = $state([]);
	const mapNewsItemIdToTrue = new Map<string, boolean>();
	const cursor: { lastFeedItemId: string | undefined; lastPubdate: string | undefined } = {
		lastFeedItemId: undefined,
		lastPubdate: undefined
	};

	$effect(() => {
		data.latestNewsPromise.then((items) => {
			appendNewsItems(items.data, mapNewsItemIdToTrue);
			updateCursor();
		});
		return () => {
			// If I don't clear the items they keep accumulating and changing filters doesn't work
			clear();
		};
	});

	function appendNewsItems(items: NewsItem[], mapNewsItemIdToTrue: Map<string, boolean>) {
		for (let i = 0; i < items.length; i++) {
			const item = items[i];
			if (!mapNewsItemIdToTrue.get(item.id)) {
				newsItems.push(item);
				mapNewsItemIdToTrue.set(item.id, true);
			}
		}
	}

	function clear() {
		newsItems.splice(0, newsItems.length);
		cursor.lastFeedItemId = undefined;
		cursor.lastPubdate = undefined;
		mapNewsItemIdToTrue.clear();
	}

	function updateCursor() {
		const lastItem = newsItems[newsItems.length - 1];
		if (lastItem) {
			cursor.lastFeedItemId = lastItem.id;
			cursor.lastPubdate = lastItem.pubdate;
		}
	}

	async function showMore() {
		try {
			const { lastFeedItemId, lastPubdate } = cursor;

			let endpoint;
			if (isDetailRoute(page.params.id, page.params.title)) {
				endpoint = getNewsListWithItemNextPageEndpoint(cursor, filter, id, search);
			} else {
				endpoint = getNewsListNextPageEndpoint(cursor, filter, search);
			}

			const response = await fetch(endpoint);
			const { data: items }: { data: NewsItem[] } = await response.json();
			appendNewsItems(items, mapNewsItemIdToTrue);
			updateCursor();
		} catch (error) {
			console.log(error);
		}
	}

	function onFilterChange(e: Event) {
		const newFilterValue = (e.target as HTMLSelectElement).value;
		let to;
		if (isDetailRoute(page.params.id, page.params.title)) {
			to = getNewsDetailEndpoint(newFilterValue as NewsFilter, id, search, title);
		} else {
			to = getNewsListEndpoint(newFilterValue as NewsFilter, search);
		}
		return goto(to);
	}

	function onSearchChange(e: KeyboardEvent) {
		if (e.key === 'Enter') {
			let to;
			if (isDetailRoute(page.params.id, page.params.title)) {
				to = getNewsDetailEndpoint(filter as NewsFilter, id, newSearch, title);
			} else {
				to = getNewsListEndpoint(filter as NewsFilter, newSearch);
			}
			return goto(to);
		}
	}
</script>

<header>
	<div>
		<a href="/">TestNewsApp</a>
	</div>
	<div>
		On desktop, list + detail are shown side by side, on mobile you'll see either the list or the
		detail depending on the url
	</div>
</header>

{#if large.current}
	<main style="flex-direction:row;">
		<div class="list">
			<section class="panel">
				<span>Filter: {filter}</span>
				<span>Search: {search}</span>
			</section>
			<br />
			<div class="panel">
				<section class="list-filter" onchange={onFilterChange}>
					<select>
						{#each ['latest', 'likes', 'dislikes', 'trending'] as filterValue}
							<option selected={filter === filterValue}>{filterValue}</option>
						{/each}
					</select>
				</section>
				<section>
					<input
						placeholder="Search for 'china'"
						type="search"
						name="search"
						value={search}
						oninput={(e: Event) => {
							newSearch = (e.target as HTMLInputElement).value;
						}}
						onkeydown={onSearchChange}
					/>
				</section>
			</div>

			<nav>
				{#await data.latestNewsPromise}
					<span>Loading items...</span>
				{:then}
					{#each newsItems as newsItem, index (newsItem.id)}
						<div class="list-item" class:selected={page.params.id === newsItem.id}>
							<a
								data-sveltekit-preload-data="off"
								href={getNewsDetailEndpoint(filter, newsItem.id, search, newsItem.title)}
								>{index + 1} {newsItem.title}</a
							>
						</div>
					{:else}
						<div>
							No items to display under the current {filter}
							{search} Maybe try changing them?
						</div>
					{/each}
				{/await}
				<footer>
					<button onclick={showMore}>Show More</button>
				</footer>
			</nav>
		</div>
		<div class="detail">
			{@render children()}
		</div>
	</main>
{:else if !large.current && hasNoDetailSelected}
	<main style="flex-direction:column;">
		<div class="list">
			<section class="panel">
				<span>Filter: {filter}</span>
				<span>Search: {search}</span>
			</section>
			<br />
			<div class="panel">
				<section class="list-filter" onchange={onFilterChange}>
					<select>
						{#each ['latest', 'likes', 'dislikes', 'trending'] as filterValue}
							<option selected={filter === filterValue}>{filterValue}</option>
						{/each}
					</select>
				</section>
				<section>
					<input
						placeholder="Search for 'china'"
						type="search"
						name="search"
						value={search}
						oninput={(e: Event) => {
							newSearch = (e.target as HTMLInputElement).value;
						}}
						onkeydown={onSearchChange}
					/>
				</section>
			</div>
			<nav>
				{#await data.latestNewsPromise}
					<span>Loading items...</span>
				{:then}
					{#each newsItems as newsItem, index (newsItem.id)}
						<div class="list-item" class:selected={page.params.id === newsItem.id}>
							<a
								data-sveltekit-preload-data="off"
								href={getNewsDetailEndpoint(filter, newsItem.id, search, newsItem.title)}
								>{index + 1} {newsItem.title}</a
							>
						</div>
					{:else}
						<div>
							No items to display under the current {filter}
							{search} Maybe try changing them?
						</div>
					{/each}
				{/await}
				<footer>
					<button onclick={showMore}>Show More</button>
				</footer>
			</nav>
		</div>
	</main>
{:else}
	<div class="detail">
		{@render children()}
	</div>
{/if}

<style>
	main {
		background-color: lightgoldenrodyellow;
		display: flex;
		flex: 1;
		overflow: hidden;
	}
	.list {
		background-color: lightyellow;
		flex: 1;
		overflow-y: auto;
		padding: 1rem;
	}
	.list-item {
		border-bottom: 1px dotted lightgray;
		padding: 0.5rem 0;
	}
	.detail {
		background-color: lightcyan;
		flex: 1;
	}
	.panel {
		display: flex;
		font-size: x-small;
		justify-content: space-between;
	}
	.selected { 
		background-color: yellow;
	}
</style>

• This is the file I believe that may have some issue
• It loads fresh data for every request and this load function is called everytime the URL changes
• What needs to happen somehow is that when the filter or search changes while navigating to a list it loads fresh data
• But when navigating to the detail route , it checks if the id is present in the list of items we currently have and only issues a fetch request if that id doesn't exist

Questions

• Documentation says keep load functions pure
• It also says avoid shared state on the server
• How do I accesss news items inside +layout.ts or conditionally load data here so that it doesn't fire a fetch request every single time the URL changes?

[david-plugge]

Because you reference url.searchParams.get('...') the load function is now reactive to search param changes. You can wrap those lines with untrack to disable that feature
See https://svelte.dev/docs/kit/load#Rerunning-load-functions-Untracking-dependencies

[slidenerd]

so lets say we untrack them completely for changes to filter and search. what happens when you directly type a url such as /?filter=likes&search=china in the address bar. This would trigger server side rendering right?

[david-plugge]

Correct