conscious-sapphire

Check if query finished "loading" when data === undefined is expected (i.e. 404 expected sometimes)?

I'm trying to load a user's profile, given a user ID. The user might not yet have a profile. The query can be disabled until userId is know (it's loaded from the phone's keychain). I want to show either a loading screen, a create profile screen, or a view profile screen. We show the loading screen until we know whether the user has a profile and then the create/view screen, depending whether the user has a profile:

const useUserProfile = (userId?: string) => {
  const api = useApi();
  return useQuery({
    queryKey: ['users', userId!],
    queryFn: async () => {
      try {
        return await api.users.getUser(userId!);
      } catch (e) {
        if (isAxiosError(e) && e.response?.status === 404) {
          return undefined;  // Expected
        }
        throw e;
      }
    },
    enabled: userId !== undefined,
  });
};

const useUserProfile = (userId?: string) => {
  const api = useApi();
  return useQuery({
    queryKey: ['users', userId!],
    queryFn: async () => {
      try {
        return await api.users.getUser(userId!);
      } catch (e) {
        if (isAxiosError(e) && e.response?.status === 404) {
          return undefined;  // Expected
        }
        throw e;
      }
    },
    enabled: userId !== undefined,
  });
};

The logic for picking the screen:

  const userId = useUserIdFromKeychain();
  const {data, isPending} = useUserProfile(userId);

  if (isPending) {
    return <LoadingScreen />;
  }

  if (!profile) {
    return <CreateProfileScreen />;
  }

  return <ProfileScreen profile={data} />;

  const userId = useUserIdFromKeychain();
  const {data, isPending} = useUserProfile(userId);

  if (isPending) {
    return <LoadingScreen />;
  }

  if (!profile) {
    return <CreateProfileScreen />;
  }

  return <ProfileScreen profile={data} />;

I've read https://github.com/TanStack/query/issues/3975 and I'm still confused. How do I check if the fetched finished (a cached value is fine)? I'm using version 5.

GitHub

useQuery return always isLoading with true when enabled is false · ...

Describe the bug When I created useQuery with enabled: false option, isLoading variable is always true. Your minimal, reproducible example https://codesandbox.io/s/react-query-enabled-7u58d5-7u58d5...

7 Replies

conscious-sapphireOP•2y ago

Am I better off mapping 404 to null and then check data being !== undefined instead of trying to use isPending et.al.?

like-gold•2y ago

if data is not undefined, you have data 🙂 ah yes, you can't return undefined from the queryFn. there should be a warning in dev mode a successful query shouldn't have undefined data

conscious-sapphireOP•2y ago

Is null fine? To represent "the query was successful and returned no result (expectedly)"? If I use null perhaps I can avoid isPending etc completely and avoid the trickery there.

like-gold•2y ago

yes null is fine

conscious-sapphireOP•2y ago

Thanks!

like-gold•2y ago

if you set it to null, it will be in isSuccess state with data: null. If that's what you want 🙂

conscious-sapphireOP•2y ago

Then data === undefined = no data yet and data === null = got data, expectedly missing

Gaming

Programming

Check if query finished "loading" when data === undefined is expected (i.e. 404 expected sometimes)?

Did you find this page helpful?