(React Native && RTK Query) How to make sure the data has been returned when use conditional fetching

Question

export function Login() {
  const [skip, setSkip] = useState(true);
  const { data, isFetching } = useVerifyUserQuery(userState, {
    skip,
  });

  const LoginButton = () => (
    <Button
      title="Login"
      onPress={() => {
        setSkip((prev) => !prev);
      }}
    />
  );

  return (
    …
  )
}

The requirement is to make a request when the button is pressed, and then store the returned data in a constant. Is there a good way to make sure data is returned before I store it.

Here is one of my solutions. Obviously it may cause some problems.

onPress={() => {
  setSkip((prev) => !prev);
  while(isFetching){}
  // save data
}}

And with the code below, storeData will be called multiple times.

export function Login() {
  const [skip, setSkip] = useState(true);
  const { data, isFetching } = useVerifyUserQuery(userState, {
    skip,
  });

  if (!isFetching && IsNotEmpty(data)){
    storeData();
  }
  const LoginButton = () => (
    <Button
      title="Login"
      onPress={() => {
        setSkip((prev) => !prev);
      }}
    />
  );

  return (
    …
  )
}

Answer 1

It looks like you just want to use the lazy version - useLazyVerifyUserQuery instead of common. It will be like:

export function Login() {
    const [ verifyUser ] = useLazyVerifyUserQuery();

    const handleLogin = async () => {
        const data = await verifyUser(userState).unwrap();
        // Probably you would want to use `storeData` somehow here?
    }

    const LoginButton = () => (
        <Button
          title="Login"
          onPress={handleLogin}
        />
    );

    return (
      ...
    )
}

PS: just a warning - using a nested component definition, like LoginButton inside Login - is a known antipattern that may cause significant performance issues.