Pagination using useSuspenseQuery and React transition is broken

[pvandamme]

I have a paginated query that I use with useSuspenseQuery.
When I call the fetchMore function inside a startTransition, an unexpected re-render with only the new data happens before the final re-render with all the data merged together.

I've made a reproduction link so you can try it out : https://stackblitz.com/edit/stackblitz-starters-fqmtck?file=src%2Fcomponents%2FPaginatedQuery.tsx

Reproduction steps

1 - Go to the stackblitz link
2 - Open your console
3 - Click "Fetch More"
4 - Look at logs

[alessbell]

Thanks for reporting this, @pvandamme! Really appreciate the reproduction - looks like this issue should be transferred over to the Apollo Client repo which I will do shortly.

[pvandamme]

Thanks @alessbell :)

[pvandamme]

Hi @alessbell, any issue that I can follow on the apollo client repo for updates ?
Thanks !

[none23]

Faced a similar issue.
Seems to be caused by this line

[phryneas]

Hi there, I'm sorry - it seems that something went wrong when transferring this earlier. I transferred it now.

[finkef]

Is there any workaround available currently?

[none23]

@finkef
Well, with @apollo/client v3.9.5, deleting line 243 in node_modules/@apollo/client/react/internal/cache/QueryReference.js seems to fix the issue for me.
But I wouldn't do it in an app I care about)

[finkef]

@none23 Thanks!

I just came up with this workaround, but wouldn't expect the best performance. It appears that readQuery always gets the correct data.

import { useApolloClient } from "@apollo/client"
import { useSuspenseQuery as useApolloSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"
import { startTransition, useCallback, useMemo } from "react"

export const useSuspenseQuery: typeof useApolloSuspenseQuery = (
  ...args: Parameters<typeof useApolloSuspenseQuery>
) => {
  const client = useApolloClient()
  const { data, fetchMore, ...rest } = useApolloSuspenseQuery(...args)

  const newFetchMore = useCallback(
    (...fetchMoreArgs: Parameters<typeof fetchMore>) => {
      return new Promise((resolve, reject) => {
        startTransition(() => {
          fetchMore(...fetchMoreArgs)
            .then(resolve)
            .catch(reject)
        })
      })
    },
    [fetchMore],
  )

  const actualData = useMemo(() => {
    return client.readQuery({
      query: args[0],
      variables: (args as any)[1]?.variables,
    })
  }, [data])

  return {
    data: actualData,
    fetchMore: newFetchMore,
    ...rest,
  } as any
}

[jerelmiller]

Hey @pvandamme 👋

I finally got around to fixing this issue with #11638. I've tried this with your reproduction and this solves it.

Would you mind trying this snapshot release to make sure it works on your end?

npm i @apollo/[email protected]

Note: You'll need a more modern version of the Next.js app support package since it uses some internals of Apollo Client from newer versions.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.