Recoil, react-query 로그인 오류

로그인 기능을 구현 하고 있는데, 오류가 난다.

Violation: Duplicate atom key "loginState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement

 

서칭 해보니 나오는 스택오버플로우

https://stackoverflow.com/questions/71291122/how-can-i-write-update-localstorage-object-in-recoil-atom

How can i write(=update) Localstorage object in Recoil Atom?

 

//수정전
import { atom } from "recoil";

export const loginAtom = atom<boolean>({
    default: false,
    key: "loginState"
});

//수정후
import { atom } from "recoil";

export const loginAtom = atom<boolean | false>({
    default: false,
    key: "loginState"
});

 

const loginMutation = useMutation(({email,password}:User)=>loginUser({email,password}),{
      onMutate: (variable) => {
        console.log("onMutate", variable);
        // variable : {loginId: 'xxx', password; 'xxx'}
      },
      onSuccess: (data) => {
        console.log("onsuccess",data);
        // 로그인 성공 했을때 토큰은 로컬 스토리지에 저장.
        localStorage.setItem("accessToken",data.accessToken);
        // 로그인 상태를 TRUE로 바꾸고 아톰에 저장
        setLoginState(true);
        router.push("/");
      },
      onError: (error) => {
        console.log(error);
      },
    })

router.push를 통해 메인지로 보낸다음 useRecoilValue 훅으로 전역상태 관리에 제대로 저장 되어 있는지 확인.

- 에러발생 -

Expectation Violation: Duplicate atom key "loginState". This is a FATAL ERROR in
      production. But it is safe to ignore this warning if it occurred because of
      hot module replacement.

 

---

login페이지에서 setLoginState(true)로 할때 

/pages/login/index.tsx

const [loginState, setLoginState] = useRecoilState(loginAtom);

이렇게 담았는데, 메인 페이지에 가서 호출할때

/pages/index.tsx

const Login = useRecoilValue(loginAtom);
console.log(Login);

이렇게 호출해서 나오는 오류라고 하네. 기존에 useRecoilState훅에서 선언한 loginState를 써야됨.

/pages/index.tsx

const loginState = useRecoilValue(loginAtom);
  console.log(loginState);

 

 

---------------

 

쓰읍... 잘 되는줄 알았는데 새로고침 하니까 loginState 날라간다. Nextjs SSG가 기본이라 그런것 같은데 흠...

찾아보니 Nextjs는 SSR,SSG이므로 새로고침하면 전역 상태가 날라가는건 어찌보면 당연한것 같다. 그래서 상태를 동기화 시켜주는 Hydrate 해줘야 하는데 Recoil을 그딴게 없는것 같다.(2022-12-25일기준) 근데 클라이언트 상태관리에서 새로고침 할 이유가 없다는데,로그인 상태를 react-query로 관리하는게 맞는것 같다.

https://velog.io/@timosean/Web-Recoil-persist-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

[Web] Recoil-persist 사용해보기, sessionStorage에 저장하기

Recoil-persist 라이브러리로 세션에 저장에서 쓰는방법이 있긴함.

 

클라이언트 상태관리에 동기화 Hydrate 할려면 jotai 쓰는게 나은것 같다. jotai는 Hydrate 됨.

https://jotai.org/docs/guides/nextjs

Next.js — Jotai, primitive and flexible state management for React