goto() only replaces url, does not replace slot content

[wvhulle]

Hi,

I have a +layout.file in which I execute a goto when a select element is selected. Unfortunately, the goto changes the the url in the url bar but does not change the contents of the page in the <slot> element.

If I prefix a second goto statement to a route higher in the hierarchy, it works. How can I debug this goto statement? It doesn't output anything I can use to find out why the navigation doesn't happen.

[eltigerchino]

Hi wvhulle, this sounds to me like an issue with your +layout.svelte file as you've said there's no issue when you navigate to a route higher in the hierarchy (where the layout doesn't apply).

Could you post an example of what your layout file looks like? I think that may help shed more light on this issue.

[wvhulle]

the goto in question is inside the jumpToOperation function

[eltigerchino]

Are all the goto functions causing the same issue or is it only one of them?

[wvhulle]

Are all the goto functions causing the same issue or is it only one of them?

The one on the data tab doesn't work at all, but the one on the metadata tab works partially, changing only part of the data and leaving some artifacts in the slot behind between goto's.

[wvhulle]

I found out that on the data tab I was loading some data and showing it but not reactive to the export let data, I am trying to figure out how to make it reactive to the data.

[eltigerchino]

I found out that on the data tab I was loading some data and showing it but not reactive to the export let data, I am trying to figure out how to make it reactive to the data.

If it's an object, you have to re-assign the entire object to make it reactive (compared to just changing the values inside the object).

[intensr]

i have somehow the same case i try to change the page programatically.
after a setTimeout function fires i use a conditionally reactive if block for to do it.
for me the same thing happens that goto function changes the url but a fresh data fetch seems not to happen (my page is a dynamic route e.g. /blog/[slug])

did you figure it out how to make the data part of the dynamic page reactive? if so can u post an example how you did it ?

[eltigerchino]

Hi intensr,

Can you post an example of what your code looks like? Is the data not updating or is the if block not reactive?

[intensr]

I reduced my component a little bit to make a point, I hope its readable. I'm using svelte with sanity (contenthub) and groq (querylanguage) on the data layer.

Generally speaking I have a component which has a setTimeout function and after the timer has finished the page (projectpage) should switch to another project page, like an "automatic next project"-component. The timerfunction is abstracted in a store. I use the reactive if function to trigger the goto function. After the function got triggered the page stays the same unfortunantly. I think i need to invalidate the current data before, currently figuring it out but dont know how it should be done exactly.

// routes/work/[slug]/+page.svelte

<script lang="ts">
	import PortableCases from '$lib/components/Portable/PortableCases.svelte';
	import SectionCaseNext from '$lib/components/SectionCaseNext/SectionCaseNext.svelte';

	/** @type {import('./$types').PageData} */
	export let data: any;
	const content = data?.content;
</script>

<PortableCases value={content?.content} />
<SectionCaseNext />

// routes/work/[slug]/+page.ts

import { client } from '$lib/utils/sanity';

export async function load({ params }: any) {
	const slug = params?.slug;

	const newParams = {
		slug: '/work/' + slug
	};

	if (!slug) {
		return {
			status: 404
		};
	}

	const content = await client.fetch(
		`*[_type == "case" && page.slug.current == $slug][0] {
			...,
			content[] {
				...,
				children[] {
					...
				}
			},
			caseNext {
				case-> {
					...
				}
			}
		}`,
		newParams
	);

	if (content) {
		return {
			status: 200,
			content
		};
	}

	console.log(console.warn('404'));
	return {
		status: 404
	};
}

// lib/components/section-component.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { isComplete } from '$lib/stores/caseTimer';

	$: if ($isComplete) {
		goto('/work/plastic2beans');
	}
</script>
...

[eltigerchino]

// routes/work/[slug]/+page.svelte

<script lang="ts">
	import PortableCases from '$lib/components/Portable/PortableCases.svelte';
	import SectionCaseNext from '$lib/components/SectionCaseNext/SectionCaseNext.svelte';

-	/** @type {import('./$types').PageData} */
-	export let data: any;
+	import type { PageData } from './$types';
+	export let data: PageData;
-	const content = data?.content;
+	$: ({content} = data);
</script>

<PortableCases value={content?.content} />
<SectionCaseNext />

content needs to be reactively re-assigned when data changes

[intensr]

u are an absolute boss! thank you