SvelteKit에서 호스트 이름 없이 fetch하기

최근 SvelteKit으로 개인 취미 프로젝트를 진행하면서 이것저것을 알아가고 있다. 글 쓰기 순서가 잘못된 것 같지만, SvelteKit에서 URL에서 호스트 이름 없이 상대경로 혹은 절대경로 만으로 fetch 하는 방법에 대해 정리해 본다.

 

왜 이런 글이 탄생하게 되었냐면 fetch를 호스트 이름 없이 호출하면 아래와 같은 식의 오류가 발생하는 것을 경험했기 때문이다.

Error: Cannot use relative URL (/foo/bar) with global fetch — use `event.fetch` instead

이 오류가 발생하는 코드는 아래와 같은 식이다. 참고로 서버 API 용도로 만들어 둔 코드라 GET을 구현하고 있는 예다.

export async function GET({ params }) {
    const response = await fetch('/foo/bar');
    ...
}

이걸 해결 못하면 상당히 귀찮은 일이 생길 것 같다. 개발용으로 일일이 localhost라는 이름을 붙여주다 실제로 프로덕션으로 디플로이 할 때도 일일이 고쳐줘야 되고 실수로 안 고치면 에러가 날 테고 말이다. 물론 설정이나 환경변수로 따로 빼내면 되겠지만 그 설정도 적절한 시기에 수정이 이뤄지지 않으면 프로덕션 단계에서 에러를 겪을 테니 말이다.

 

이 문제 해결을 위해 약간 삽질을 했다. 다행히도 쉽게 해결할 수 있다. 사실 오류 메시지에 힌트가 있는데 이에 익숙하지 않은 이에겐 전혀 힌트가 되지 못했다는 게 문제였을지도 모르겠다.

 

해결하기

문제의 함수에서 매개변수를 통해 fetch를 얻어올 수 있다. 다음과 같은 식으로 말이다.

export async function GET({ params, fetch }) {
    const response = await fetch('/foo/bar');
    ...
}

이렇게 하니 위의 오류는 나타나지 않고 정상적으로 동작하는 것을 확인하였다. 물론 server API 뿐만 아니라 페이지 대부분에서 동일한 방식으로 구현이 가능할 것이다.

 

아마도 오류 메시지에 적힌 힌트가 위처럼 쓰라는 의미였을 것으로 이해는 하고 있는데 저렇게 밖에 못 적나 좀 답답한 감이 없지 않아 있다. 물론 SvelteKit 문서를 꼼꼼하게 읽어 보지 않은 사람의 핑계 같은 것일 수도 있겠지만 말이다.

 

어쨌든 이걸로 이 글은 마무리한다.

 

무의미한 썸네일용 이미지