exotic-emerald

React query hanging in react native (expo)

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.

6 Replies

other-emerald•2mo ago

Possible to send a code snippet? Can take a look

exotic-emeraldOP•2mo ago

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;
    },
  });
}

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;
}

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;
}

other-emerald•2mo ago

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

exotic-emeraldOP•2mo ago

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

other-emerald•2mo ago

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

exotic-emeraldOP•2mo ago

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 Ok it turned out to be an infinite re-render in my tab layout that for some reason was causing this... Took me a ton of time in the debugger to even get a hint as to this. Really appreciate your help!

Gaming

Programming

React query hanging in react native (expo)

Did you find this page helpful?