fetchMore from useSuspenseQuery is suspending even with startTransition

Client SDKs
1

Hi! Posting this here because it would be pretty complicated to share a minimal working example. Any advice about the details of useSuspenseQuery or how I could further diagnose this issue would be hugely appreciated!

In our NextJS 13 app, we use react-infinite-scroll-component (6.1.0) to render an infinitely scrolling list. The data for the list comes from a useSuspenseQuery (from @apollo/experimental-nextjs-app-support/ssr 0.4.3). The same component (call it Page) that uses the suspense query renders the InfiniteScroll component.

When the InfiniteScroll component needs more data, it calls the following function which we’ve defined:

const loadMore = () => {
  startTransition(() => {
    fetchMore({
      variables: {
        first: SCROLL_BATCH_SIZE,
        after: data?.companiesList?.pageInfo.endCursor,
        // some other variables which do not change
      },
    });
  });
};

This mostly works fine, meaning that the initial query suspends and renders the closest Suspense component (which comes from a NextJS-style loading.tsx file). And most of the time, these calls to fetchMore work exactly as expected, and do not cause any suspending.

The problem is that roughly 10% of the time after fetchMore is called, the query suspends again for some reason, causing the Suspense to render. And also once the suspense is finished and the Page component is visible again, it seems to no longer be hydrated. That is, the infinite scrolling stops working and I’m no longer seeing React effects happen throughout Page.

I’m pretty sure the issue is related to this useSuspenseQuery because when I change it to a normal useQuery, the problem stops (so it isn’t something else that’s causing the suspension).

I’ve tried both useTransition and the startTransition function provided directly from the react library.

I’ve also observed via console logs that when this issue happens, the fetchMore promise resolves after the Suspense component renders.

1 Like
2

Hey @aaronjamesking :wave:

This is very interesting behavior you’re seeing! Transitions are a complicated beast! What version of @apollo/client are you using under the hood? Are you still seeing this with the latest versions of the core client and the NextJS wrapper package? At the time of this writing, this is v3.8.8 for the core client and 0.5.2 for the wrapper package.

3

Hey @jerelmiller thanks for replying, I just updated the packages to 3.8.8 and 0.5.2 just to be sure, but the problem persists.
I found this PR but couldn’t quite tell how things are meant to work with transitions :slight_smile: … do you have any recommendations about how I could debug this?