Sveltekit에서 페이지 쿼리 스트링 업데이트하기

최근에 스벨트킷에서 현재 페이지에서 쿼리 스트링 파라미터만 업데이트 할 필요가 생겼다.

예를 들어, 현재 페이지가 /posts이고, 쿼리 스트링 파라미터가 page=1이라고 하자. 이 때 정렬을 위한 쿼리 스트링 파라미터를 추가하고 싶다면, /posts?page=1&sort=asc와 같이 쿼리 스트링 파라미터를 추가해야 한다.

이 때, page 파라미터는 유지하고 sort 파라미터만 추가하고 싶다면 어떻게 해야 할까?

goto

우선 스벨트킷에서 페이지 이동을 programatical하게 하기 위해서는 goto 함수를 사용하면 된다.

import { goto } from '$app/navigation';

//  `goto` 함수는 서버에서 호출할 수 없다.
if (typeof window !== undefined) {
    goto('/posts?page=1&sort=asc');
}

하지만 goto만 가지고는 현재 페이지의 쿼리 스트링 파라미터를 알 수 없다. 따라서 스토어에서 page를 가져와야 한다.

page

page 스토어는 현재 페이지와 관련된 정보를 가지고 있다. 이 스토어를 사용하면 현재 페이지의 쿼리 스트링 파라미터를 알 수 있다.

위 내용을 종합하면 아래와 같이 쿼리 스트링 파라미터를 업데이트 할 수 있다.

import { page } from '$app/stores';
import { goto } from '$app/navigation';

//  `goto` 함수는 서버에서 호출할 수 없다.
if (typeof window !== 'undefined') {
    // $page.url을 직접 수정하면 안된다.
    // https://github.com/sveltejs/kit/issues/2785#issuecomment-967790973
    const query = new URLSearchParams($page.url.searchParams);
    if (asc) query.set('sort', 'asc');
    else query.delete('sort');
    goto(`?${query.toString()}`);
}