[Question] How to force refetch data when Component mounting

[SpeedySH]

I've already racked my brains, how do I get the selector not to cache a value? Maybe I'm using something wrong, but I need to implement request to server by params:id which I get from address bar, but after first go recoil caches value, and I can't use any method to update it, only make recoil do update, but, because of it 2 requests are sent to server instead of 1st one...
I am already confused what to do, I will be grateful for help

code example:

const userInfoQuery = selectorFamily({
  key: 'UserInfoQuery',
  get: (employeeID: string) => async () => {
    const response = await getPartnerUser(employeeID);

    await new Promise(resolve => setTimeout(resolve, 3000));

    const lastNameWithInitials = prettyFullNameWithInitials(response);
    const state = prettyUserStatus(response.state);

    const employee: EmployeeRows[] = [
      {
        id: response.id,
        FullName: prettyFullName(response),
        Phone: formatPhoneNumber(response.mobilePhone),
        Email: formatEmail(response.email),
        AccessLevel: prettyUserAccess(response.role),
      },
    ];

    console.log(response);

    return { lastNameWithInitials, state, employee };
  },
});

export const EmployeeProfile: React.FC = () => {
  const { id: employeeID } = useParams() as { id: string };
  const currentProfile = useRecoilValue(UserProfileState);

 // Problem Line 
  const { lastNameWithInitials, state, employee } = useRecoilValue(userInfoQuery(employeeID));

UP

I resolve my question by this way:

const userInfoQuery = selectorFamily({
  key: 'UserInfoQuery',
  get: employeeID => async () => {
    const response = await getPartnerUser(employeeID as string);

    await new Promise(resolve => setTimeout(resolve, 3000));

    const lastNameWithInitials = prettyFullNameWithInitials(response);
    const state = prettyUserStatus(response.state);

    const employee: EmployeeRows[] = [
      {
        id: response.id,
        FullName: prettyFullName(response),
        Phone: formatPhoneNumber(response.mobilePhone),
        Email: formatEmail(response.email),
        AccessLevel: prettyUserAccess(response.role),
      },
    ];

    const lastUpdate = Date.now();

    console.log(response);

    return { lastNameWithInitials, state, employee, lastUpdate };
  },
});

export const EmployeeProfile: React.FC = () => {
  const { id: employeeID } = useParams();
  const currentProfile = useRecoilValue(UserProfileState);

  // const lk = useRecoilState(userInfoState(id))
  const { lastNameWithInitials, state, employee, lastUpdate } = useRecoilValue(userInfoQuery(employeeID));

  const refresh = useRecoilRefresher_UNSTABLE(userInfoQuery(employeeID));

  useEffect(() => {
    if (Date.now() - lastUpdate > 500) {
      refresh();
    }
  }, []);

Maybe someone has a better idea?

[drarmstr]

See this guide on different options for refreshing queries. However, forcing a re-query on each mounting seems like a potentially concerning pattern.. There may be a better way to accomplish your requirements.