Как лучше всего загрузить страницу без обновления с помощью graphql и динамической маршрутизации. У меня есть файл с именем kindergarten
, который отлично загружается, не обновляя всю страницу:
<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}
а также у меня есть еще одна страница под названием [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}
Когда я нажимаю ссылку на kindergarten
странице, она переходит на подстраницу, но обновляет весь сайт.
Как мне оптимизировать файл [slug].svelte
, чтобы предотвратить обновление страницы?
Поскольку я новичок Svelte и Sveltekit приветствуют любые идеи по оптимизации всего кода.
target=blank
в моемkindergarten.svelte
файле, который, когда я нажимаю ссылку, которая открывается в новой вкладке, на этой вкладке, когда я нажимаю на другие ссылки, страница не загружается без обновления! Это немного сбивает с толку! - person Sarah Diba   schedule 26.06.2021