startTransition with fetchMore (merge data) return incoming for a sec first then return merged data

Help
,
1

I want to make a page with Infinite Scroll so I need to merge data when fetchMore()
But when it calls function fetchMore() with startTransition

AS
it doesn’t return merged data but it return incoming data first for a sec then it return merged data
this not happen when I don’t wrap fetchMore() with startTransition
or use fetchMore() from useQuery()

EXPECT:
it should return merged data without return incoming data first

example console.log() result
limit = 5
here is a step of the log that I see

  • first query = [10,9,8,7,6]
  • call fetchMore() with startTransition
    • query = [5,4,3,2,1]
    • query = [10,9,8,7,6,5,4,3,2,1]

My dependency version
Next.js: 14.0.2
@apollo/client: 3.8.8
@apollo/experimental-nextjs-app-support: 0.6.0

My Apollo client wrapper is the same as this
https://github.com/apollographql/apollo-client-nextjs?tab=readme-ov-file#in-ssr

here is my type policy

const typePolicies: TypePolicies = {
  MyQuery: {
    fields: {
      range: {
        merge: (existing, incoming) => {
          return deepmerge(existing, incoming)
        },
        keyArgs: false,
      },
    },
  },
}

here is my query code

  const {data, fetchMore} = useSuspenseQuery(Query)
  const {query} = data

  const loadMore = () => {
    startTransition(() => {
      fetchMore({
        variables: {
          before: query.range.data[query.range.data.length - 1].id,
        },
      })
    })
  }
2

Hey @thasuohm :wave:

This looks an awful lot like this outstanding issue in our repo. Is the behavior described in that issue similar to what you’re seeing? If so, apologies, we haven’t prioritized this fix yet (though based on the number of reactions, we probably should soon).