強制的にページのデータをリロードさせる方法

sveltekitでは現在にいる同じページのリンクをクリックする際に、データは自動的に更新されません。要は+page.server.tsのロード関数が実行されないです。

例をいうと今はページ/hoge1にいて、そのページに/hoge1へのリンクがあるとしよう、その時に/hoge1をクリックするとページの一番上には飛びますが、データは更新されないです。

解決方法としては下記の通りdata-sveltekit-reloadタグをつけることで、挙動はrel="external"をつけるのと同じ効果のように見えます。

<a data-sveltekit-reload href="/hoge1">Path</a>

ただこの方法だとページ全体がリロードされます。

もう一つの方法invalidateを使うことです。
https://kit.svelte.dev/docs/modules#$app-navigation-invalidate (このリンクの内容を単体で読むとわけわからなくなるので下のと合わせて読むことをお勧めします。
https://kit.svelte.jp/docs/load#rerunning-load-functions-manual-invalidation

  • invalidate単体だと指定するするload関数だけが実行されます。
  • invalidateAllだとそのページとかかわるすべてのload関数が実行されます。
<a on:click={() => invalidateAll()} href="/hoge1">Path</a>

ただその方法だと挙動がちょっと怪しくて、複数の/hoge1のタブを開く場合はすべての/hoge1がリロードされてしまいます。(少なくともchrome+sveltekit2.5.5のDEV環境ではそうなる)また、/hoge2などには影響しません。

1
0
0 件のコメント

ページの最後