Apollo - makeVar()

apollo로 전역 로컬파일 스토레이지 사용하는 방법

[apollo.ts]

export const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache({
      addTypename: false,
      typePolicies: {
        Query: {
          fields: {
            isLoggedIn: {
              read() {
                return isLoggedInVar();
              }
            },
            token: {
              read() {
                return authTokenVar();
              }
            },
           
          }
        }
      }
    })
  });

1. 위처럼 isLoggedInVar 를 전역으로 사용하기로 하였습니다.

[apollo.ts]

export const isLoggedInVar = makeVar(false) // 전역 사용

2. 위처럼 isLoggedInVar의 기본값을 false로 설정을 하였습니다. 이제 사용해보죠~

[app.tsx]

  const isLoggedIn = useReactiveVar(isLoggedInVar)
  console.log('isLoggedInVar', isLoggedIn)
  

3. 위처럼 useReactiveVar를 사용하면 apollo.ts의 기본값인 false를 불러오게 됩니다.

[signIn.tsx]

const onCompleted = (data) => {
    const { login: {ok, error, token}} = data;
    if(ok == true && token){
        authTokenVar(token);
        localStorage.setItem("LOCALSTROAGE_TOKEN", token);
        isLoggedInVar(true);
        navigate('/');
    }

  }

4. 위처럼 로그인 페이지에 isLoggedInVar(true) 를 사용하므로 apollo의 isLoggedInVar값을 변경하였습니다.

  const signOut = () => {
    localStorage.removeItem("LOCALSTROAGE_TOKEN");
    isLoggedInVar(false)
    
  }

5. 위처럼 로그아웃을 하고 싶을 경우, isLoggedInVar(false)를 사용하므로 값을 변경하였습니다. 좋은 점은 실시간으로 전체적으로 반영이 되어 login/logout/token 설정 등을 아주 쉽게 할 수가 있습니다. 순서를 꼭 !!! 이해하시면 좋겠습니다.

[main.tsx]

<ApolloProvider client={client}>
        <Router>
            <App />
        </Router>
 </ApolloProvider>

6. 위처럼 apolloProvider가 설정이 되어 있지 않으면 작동이 안되기 때문에 client설정을 맨 상단에 꼭 해줘야 합니다. 여기까지!