React-query의 Refetch

사건의 발달은 로그인폼에 정보를 입력하고 로그인 버튼을 눌렀을때 사용자 정보 화면으로 바뀌지 않는 버그를 fix하던중 발생하였다.

로그인이 되지 않아

현재 nextjs 13 app dictionary를 사용하고 있었고 페이지에 첫 접근시에 ssr로 유저 데이터를 받아오고 있었다. 따라서 로그인 시에 유저 데이터를 refetch해서 다시 가져 와야 한다고 생각하며 해결 가설을 새웠다.

1. 로그인을 누르면 로그인 api요청을 보냄
2. 로그인 api요청이 성공하면 user 정보를 가져오는 api를 refetch함
3. 가져온 데이터를 적용해서 해당 부분 리랜더링

도전

// app/layout.tsx

const { data: me } = useMyInfoQuery();
return(
...
{me ? <MyProfile /> : <SignInForm />}
...
)

layout 컴포넌트에서 useMyInfoQuery 쿼리를 가져오고 있고 데이터로 프로필을 보여줄것인지 로그인 폼을 보여줄것인지 분기처리 하고있다.

// useMyInfoQuery.ts

const useMyInfoQuery = () => {
  return useQuery<User>(["user"], loadMyInfoAPI, {
    enabled: false,
// ssr로 데이터의 초기값을 지정해 주기 때문에 enabled를 false로 지정하였다.
  });
};

// auth.ts
export const loadMyInfoAPI = (options?: AxiosRequestConfig) => {
  return api.get("/user", options).then((response) => response.data);
};

첫 페이지에 접근시 ssr을 이용해서 초기값으로 [”user”] 쿼리를 가져오고 있기때문에 마운트시에 해당 쿼리를 수행할수 없게끔 enabled을 false로 주었다.