React-native flatlist with Apollo-GraphQL hooks to work with fetchmore

[Ebeldev]

Intended outcome:

I'm using react-native 0.60 and the Apollo-client hooks. I'm trying to use a flatlist to work correctly to fetchmore items. My bug comes when it reach the end of the full content. The networkStatus does not update and so my spinner is always running.

So, it refresh the data and append it correctly but once it reaches the end of all content. That's when it breaks.

Actual outcome:

The spinner keeps spinning when we reach the end of all content.

How to reproduce the issue:

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import { FlatList, Text, StyleSheet, View, SafeAreaView } from 'react-native'
// import { ScrollView } from 'react-native-gesture-handler'
import ListItem from '../Archives/ListItem'
import Spinner from '../shared/spinner/Spinner'

const QUERY = gqlquery ($cursor: String, $postPerPage: Int){ publications (first:$postPerPage, after: $cursor){ edges { cursor node { id title featuredImage { smallImage:sourceUrl(size: MEDIUM) mediumImage:sourceUrl(size: MEDIUM_LARGE) } publications_extra_informations { publishedPdf { guid slug } } } } pageInfo{ endCursor hasNextPage } } }

function ArchivesQuery() {
const { data, loading, error, refetch, fetchMore, networkStatus } = useQuery(
QUERY,
{
notifyOnNetworkStatusChange: true,
variables: { cursor: '', postPerPage: 10 },
}
)

// if (networkStatus === 4) return 'Refetching!'
if (loading) return

if (error) {
console.log('Response error-----', error)
return {error}
}

return (

<FlatList
data={data.publications.edges}
renderItem={(item) => }
refreshing={networkStatus === 4}
onRefresh={() => refetch}
keyExtractor={item => item.node.id}
numColumns={2}
style={styles.container}
onEndReachedThreshold={1}
onEndReached={() => {
console.log('onreachend', data.publications.edges.length)

        console.log('onreachend', data.publications.edges[ data.publications.edges.length - 1 ].cursor)
        console.log('data.publications', data.publications)
        fetchMore({
          variables: { cursor: data.publications.pageInfo.endCursor },
          // query: QUERY,
          updateQuery: (previousResult, { fetchMoreResult }) => {

            const newPublications = fetchMoreResult.publications.edges
            const pageInfo = fetchMoreResult.publications.pageInfo

console.log('newPublications.length',newPublications.length)
console.log('newPublications.length',newPublications.length > 0)
// return (!fetchMoreResult || newPublications.length === 0)
return newPublications.length
?
{
publications: {
__typename: previousResult.publications.__typename,
edges: [...previousResult.publications.edges, ...newPublications],
pageInfo,
},
}
:
previousResult
}
})
}}
/>

</SafeAreaView>

)

}

class Archives extends React.Component {

static navigationOptions = {
    title: 'Archives du Journal Infos Laurentides'
}

render() {
  return (
      <ArchivesQuery />
  );
}

}

const styles = StyleSheet.create({
safecontainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
container: {

},
errorText: {
color: 'red'
}
})

export default Archives

Versions

[Ebeldev]

I solved this by deleting the networks status from the query. Everything works perfectly

[a8t]

I had to restart my iOS simulator to get this working again. Maybe a Fast Refresh issue.