[recoil] selector 비동기

recoil 에서 관리하고 있는 데이터를 이용하여 비동기요청을 넣어야 하는 경우

 

selector 내부에서 get을통해 요청용 데이터 받아와서 async 로 요청 (비동기작업) 진행한 이후 반환 해주면 selector 를 이용해 값을 받아 사용할수 있다

 

<ErrorBoundary>

   <React.Suspense fallback={<div>Loading...</div>}>

      <CurrentUserInfo />

   </React.Suspense>

</ErrorBoundary>

 

suspense 나 errorBoundary 로 랲핑 하면 내부에서 비동기 작업시 발생할수있는 에러나 로딩 처리를 해줄수 있다.

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    if (response.error) {
      throw response.error;
    }
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <CurrentUserInfo />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}