Recoil selector와 selectorFamily의 Cache로 인한 문제점

[saseungmin]

• 한 아이디로 로그인, 로그아웃 후 다른 아이디로 로그인시 전에 로그인 했던 아이디가 로그인 되던 문제는 해결하였지만 selectorFamily를 사용할 때 파라미터를 사용하지 않는다. 다른 방법이 있을 듯 하다.

📌 문제 원인

• 문제 원인은 recoil selector가 cache를 사용하는데 selector는 key와 get 의존성 값으로만 캐시키의 동일성을 확인할 것이여서 이전의 check api는 다음과 같은데 이러면 기존 값과 동일하다고 보기 때문에 cache가 적용되어 userWithCheck를 실행하지 않고 기존의 값이 반환된다.

const userWithCheck = selector({
  key: 'userWithCheck',
  get: async () => {
    const response = await check();

    return response;
  },
});

• 때문에 다음과 같이 selectorFamily를 사용하여 해결하였는데 selectorFamily는 캐시 값을 확인할 때 파라미터와 key값과 get의존성을 확인하기 때문에 auth를 파라미터를 넘겨 cache가 안되게 해결해였다. 근데 더 좋은 방법이 있을 거 같다.

const userWithCheck = selectorFamily({
  key: 'userWithCheck',
  get: () => async () => {
    const response = await check();

    return response;
  },
});

const userWithCheckQuery = selector({
  key: 'userWithCheckQuery',
  get: ({ get }) => {
    const { auth } = get(authResultAtom);

    if (!auth) {
      return null;
    }

    const loadable = recoilLoadable(get(noWait(userWithCheck(auth))));

    return loadable;
  },
});

[saseungmin]

• 이 문제에 대해서 원인은 알고있지만, 명확한 해결방법은 아직 모르겠다. 현재 로그인 후 로그아웃한 뒤 다시 다른 아이디로 로그인하면 Cache로 인해 생기는 문제는 Recoil selectorFamily를 사용하여 cookie의 token을 넘겨줌으로써 해결하였다.

const userWithCheck = selectorFamily({
  key: 'userWithCheck',
  get: (token) => async () => {
    const response = await check(token);

    return response;
  },
});

export const check = (token) => client.get(`${AUTH_PATH}/check`, {
  headers: {
    Authorization: token,
  },
});

• 하지만, Cache가 아니였다면 굳이 필요없는 부분이다. 아래와 같이 Axios 전역으로 Headers에 token이 있으면 넣어주기 때문이다.

const fetchClient = () => {
  const client = axios.create(setPath(process.env.NODE_ENV));

  client.interceptors.request.use((config) => {
    const token = getCookie('access_token');

    // eslint-disable-next-line no-param-reassign
    config.headers.Authorization = token || '';

    return config;
  });

  return client;
};

[stella6767]

저도 같은 문제로 고민중입니다 ㅎㅎ recoil의 캐싱기능으로 인해, data sync 가 안 맞는 경우에 대해서 마땅히 적정한 해결책을 떠오르지 못하겠네요. 저도 님처럼 임시방편적인 여러 방법으로 해결하고 있긴 하는데..

[chinapoopoo]

@saseungmin @stella6767
https://recoiljs.org/docs/api-reference/core/useRecoilRefresher/

시간이 오래 지나 해결하셨겠지만,,,
refresher를 사용하면 캐싱된 것을 사용하지 않고 다시 불러오는걸로 압니당