apollo-client: The fetchMore function on a useQuery hook is throwing an error on newer versions of apollo-client

Intended outcome:

I’m using react-native and I have a Flatlist that gets it’s data from a useQuery hook. I want to call the fetchMore function when the user reaches the end of the list, to grab the next page of data, and append it to the list.

The useQuery looks like this:

const { data, error, fetchMore } = useDataQuery({
    variables: { ids: [id], pageSize: 10 },
    fetchPolicy: 'cache-and-network'
  })

The Flatlist has props:

    onEndReached={loadMore}
    onEndReachedThreshold={0.5}
    data={data?.mySecretData?.someSecretItems}

and loadMore that gets called when user reaches end of list:

const loadMore = useCallback(
    async ({ distanceFromEnd }) => {
      if (data.hasNextPage === false || distanceFromEnd < 0) return

      try {
        await fetchMore({
          variables: { page: data.currentPage + 1 },
          updateQuery: (prev, { fetchMoreResult }) => {
            if (!fetchMoreResult) return prev
            return {
              mySecretData: {
                someSecretItems: [...prev.mySecretData.someSecretItems, ...fetchMoreResult.mySecretData.someSecretItems],
                currentPage: fetchMoreResult.mySecretData.currentPage
              }
            }
          }
        })
      } catch (e) {
        // We always end up here
        console.log(e)
      }
    },
    [data, fetchMore]
  )

Actual outcome:

The first page of data is rendered in the Flatlist just fine, but trying to call the fetchMore function when the end of the list is reached yields the following error in the catch:

[TypeError: undefined is not a function (near '...}).finally(function () {...')]

After adding logging to the updateQuery function, I can see that the next page of data comes back successfully from the request, but we still end up in the catch with the above error. I should also note that the Flatlist displays the new page of data for a brief sub-second before disappearing and going back to only rendering the first page of data.

How to reproduce the issue:

I believe I am able to reproduce this issue on all versions after "@apollo/client": "3.0.0-beta.44", When my team and I rolled back to this version, things started working normally.

Versions

System:
    OS: macOS 10.15.4
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 57.0.4
    Safari: 13.1
  npmPackages:
    @apollo/client: 3.0.0-beta.44 => 3.0.0-beta.44 
    @apollo/link-context: ^2.0.0-beta.3 => 2.0.0-beta.3 

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (2 by maintainers)

Most upvoted comments

Finally got this fixed if anyone else runs into this error on React Native. Install core-js and add this line to your index.js file for the app. import 'core-js/features/promise'