Page load without refresh in svelte and dynamic routing - graphql

Question

What is the best way to load a page without refreshing using graphql and dynamic routing.
I have a file called kindergarten that loads perfectly without refreshing the whole page :
<script context="module">
import { gql, GraphQLClient } from 'graphql-request'
export async function load() {
const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
headers: {},
})
const query = gql`
query MyQuery {
terms(where: { taxonomies: CATEGORY }) {
nodes {
slug
name
termTaxonomyId
}
}
}
`
const { terms } = await graphcms.request(query)
return {
props: {
posts: terms.nodes,
},
}
}
</script>
<script>
import { SITE_NAME } from '$lib/store.js'
let date = new Date()
const [month, day, year] = [
date.getMonth() + 1,
date.getDate(),
date.getFullYear(),
]
export let posts = []
</script>
<svelte:head>
<title>Sample Title - {SITE_NAME}</title>
<meta
name="description"
content="Sample description [Update: {year}/{month}/{day}]" />
</svelte:head>
{#each posts as post (post.termTaxonomyId)}
<a
tax-id={post.termTaxonomyId}
href="/kindergarten/province/{post.slug}"
target="blank">
{post.name}
</a>
<br />
{/each}
and also I have another page called [slug].svelte :
<script context="module">
import { gql, GraphQLClient } from 'graphql-request'
export async function load(ctx) {
let slug = ctx.page.params.slug
const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
headers: {},
})
const query = gql`
query MyQuery {
terms(where: { taxonomies: CATEGORY, slug: "${slug}" }) {
nodes {
name
description
}
}
}
`
const { terms } = await graphcms.request(query)
return { props: { slug, post: terms.nodes } }
}
</script>
<script>
import { SITE_NAME } from '$lib/store.js'
export let slug
export let post
</script>
<svelte:head>
<title>{post[0].name} - {SITE_NAME}</title>
</svelte:head>
<h1>Slug : {slug}</h1>
{#each post as data}
<p>Name: {data.name}</p>
<br />
{#if data.description}
<p>Description: {data.description}</p>
{:else}
<p>Ther is no Description</p>
{/if}
{/each}
When I click a link on kindergarten page it goes to the subpage but refreshes the whole site.
How can I optimize the [slug].svelte file to prevent refreshing the page?
As I'm new to Svelte and Sveltekit, any ideas for optimizing the whole code is appreciated.

Answer 1

You're linking to a new page, so it makes sense it refreshes, because it's going to a whole new page ([slug].svelte). It sounds like you're trying to load data into your kindergarten.svelte page? In that case, make a component, not a page, where you can pass in data to the component, and the component will be updated, rather than the entire page. Check out an example from the docs here: https://svelte.dev/tutorial/component-bindings