Recoil refresh state not working of that state has been altered

1.1k Views Asked by At

I'm trying to reset my state by calling the APi to get the latest data. The API call returns an array of object.

export const launchesState = atom<Launch[]>({
  key: 'launchesStateLatest',
  default: selector<Launch[]>({
    key: 'launchesStateInit',
    get: async () => {
      const response = await getLaunches();
      return response.data.map(launch => ({ ...launch, isSelected: false }));
    },
  }),
});

I'm using a selectorFamily to select each object when the list is rendered.

export const launchState = selectorFamily<Launch | undefined, string>({
  key: 'launchState',
  get:
    missionName =>
    ({ get }) => {
      return get(launchesState).find(item => item.mission_name === missionName);
    },
  set:
    missionName =>
    ({ get, set }) => {
      const currentState = get(launchesState);
      const index = currentState.findIndex(item => item.mission_name === missionName);

      set(
        launchesState,
        produce(currentState, draft => {
          draft[index].isSelected = !currentState[index].isSelected;
        }),
      );
    },
});

The UI contains a checkbox for each item in the array and when click it uses the set function in the selectorFamily ti update the launchesState.

I'd like to refresh the data using:

useRecoilRefresher_UNSTABLE(launchesState)

Which works ok if the data has never been altered, or is reset using useResetRecoilState(launchesState), but if I have clicked any of the checkboxes and altered the state then the state isn't refreshed.

Can someone help me understand why this is happening, is it a bug or is this happening for a reason?

0

There are 0 best solutions below