#React query hanging in react native (expo)

10 messages · Page 1 of 1 (latest)

cobalt current
#

I have been trying to debug this for quite a few hours now and I am stumped. I am seeing a useQuery hang right before it gets to a db query, but only the first time. It eventually returns data, but only after like 30+ seconds.

I am using the react native debugger and have confirmed that the network calls themselves are very short, like 100-200ms once they actually fire. But for some reason the useQuery refuses to return the data quickly. I have also added a fetch() in there and I can see the fetch call complete in the debugger, but the console.logs I have right after wont log until like 30 seconds after.

nova nymph
cobalt current
#

Heres the wrapper for the function:

export function useReviewDetail(
  reviewId: string | undefined,
  currentProfileId?: string,
) {
  return useQuery({
    queryKey: queryKeys.reviews.detail(reviewId || "", currentProfileId),
    queryFn: () => fetchReviewDetail(reviewId as string, currentProfileId),
    enabled: !!reviewId,
    staleTime: 5 * 60 * 1000,
    retry: (failureCount, error) => {
      if (error?.message?.includes("Review not found")) {
        return false;
      }
      return failureCount < 2;
    },
  });
}
#

and the queryFn itself:

export async function fetchReviewDetail(
  reviewId: string,
  currentProfileId?: string,
): Promise<ReviewInternal> {
  const res = await fetch("https://theneedledrop.com/album-reviews/");

  console.log("done!!");

  // Use passed profile ID for like status (avoids unnecessary database lookups)
  const currentUserProfileId = currentProfileId || null;

  const startTime2 = performance.now();
  const foo = await supabase.from("artists").select("*").limit(1);
  const endTime2 = performance.now();

  // Single RPC call replaces multiple database queries and expensive operations
  // RPC now internally uses review author ID for track favorites
  const startTime = performance.now();
  const { data: rawReview, error } = await supabase.rpc(
    "get_review_detail_v2",
    {
      p_review_id: reviewId,
      p_current_profile_id: currentUserProfileId || undefined, // Current user for like status
    },
  );
  const endTime = performance.now();
  console.log(`Review detail: ${(endTime - startTime).toFixed(2)}ms`);
return rawReview;
}
nova nymph
#

And all those performance times that get console logged are short?

cobalt current
#

no, the first performance time will always be slow (ive tried by only doing one of the three operations in that example above, then slowly adding more). so the performance.now() call correctly captures how slow the return of the fn is, even though in the network tab of the debugger I can see that the network calls themselves are 100ms ish

#

I just added some react query dev tools as well and when this happens it shows that the fn is in a loading state

#

Actually I can get it hanging for a while and whenever I pull up the dev tool UI component it kind of starts to load in faster... Maybe this is a react native rendering issue of some sort

nova nymph
#

Is it possible to get a git repro so I can test it locally?

cobalt current
#

I can try to repro but I suspect I wont be able to. Really I am just looking for more ways to debug this, or if there are any known gotchas with react native/expo navigation and react query