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)
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'
It might be related to this issue:
https://github.com/storybookjs/react-native/issues/20