[SWR] 동적으로 받은 End-Point의 초기값이 undefined 일 때

문제

// 경로 : /src/pages/todos/[todoId].js

const Todo: NextPage<TodoProps> = () => {
  const { todoId } = useRouter().query;

  // useSWR fetcher 선언
  const fetcher = async (url: string) => {
    const { data } = await todoApi.loadTodoById(url);
    return data;
  };

  // Data Fetching
  const { data, error } = useSWR<{
    id: number;
    userId: number;
    title: string;
    completed: boolean;
  }>(`/todos/${todoId}`, fetcher);

  if (!data) return <div>Loading...!</div>;
  return (

    // ... 중략
    
    )
  
};

const Container = styled.div``;
export default Todo;

SWR를 이용해서 Data를 Fetching 하고, 그것을 렌더링 하는 소스이다. next.js에서는 useRouter 라는 hook을 제공한다. 이것을 이용하면 현재 페이지의 pathname이나 query 정보를 얻을 수 있다.

이 동적 라우팅 정보를 이용해서 data fetching을 할때, 최초 useRouter().query.todoId 값이 undefined 이기 때문에 404 에러가 발생 할 수 있다. 이것을 방지하고자 useSWR에서 data fetching을 할 때 분기처리를 할 수 있다.

해결 방법

const { data, error } = useSWR(todoId ? `/todos/${todoId}` : null, fetcher);

useSWR(endPoint, fetcher, options) 의 구조에서 endPoint에서 삼항연산자를 이용해서 분기처리 해준다. 이로써 todoId가 undefined 일때는 null로 처리되기 때문에 404 에러를 발생시키지 않는다.

참조

• SWR + Dynamic Routes in Next.js