SWRConfig fallback에 arguments 추가하는 방법 (How to include arguments with key for fallback data in <SWRConfig>)

SWRConfig fallback에 arguments 추가하는 방법

Next.js 프로젝트에서 SWR을 활용하고 있는데, SWRConfig의 fallback을 사용할 때 arguments를 추가해서 사용할 필요가 생겼습니다. 기존 fallback 사용 예시는 아래와 같습니다.

<SWRConfig value={{
  fallback: {
    '/api/user': { name: 'Park', ... },
    '/api/items': ...,
    ...
  }
}}>

unstable_serialize을 활용하면 arguments를 추가해서 처리할 수 있습니다.

import { unstable_serialize } from 'swr'

…
export async function getStaticProps() {
  const data = await fetcher('pokemon');

  return {
    props: {
        fallback: {
          [unstable_serialize([GRAPHQL_ENDPOINT, graphqlQuery])]: data
          // "/my/api/key?start=10&limit=10": data
        }
    },
  };
}