Qfyilyi

I am trying to use the rendered props pattern in react-apollo to do pagination. clicking loadMore, paginating is working ok. However, the activityindicator does not go away because the variables.offset is not incrementing at all. It remains at the initial value of 0 thus my hasMorePictures function continues to return true only and does not return false once there is no more data to load. I have used the set of codes successfully with HOC pattern. Only face issue with not incrementing the variables.offset with the rendered props pattern. Below is my code. Please help. Thanks in advance

import React, { Component } from "react";

import { Text, View, ActivityIndicator, Button, FlatList } from "react-native";



import { Query } from "react-apollo";

import { PICTURES_QUERY } from "../graphql/Queries";



class LinksScreen extends Component {

  render() {

    return (

      <Query

        query={PICTURES_QUERY}

        variables={{ offset: 0, limit: 2 }}

        fetchPolicy="cache-and-network"

      >

        {({ loading, data, variables, fetchMore }) => {

          if (loading) {

            return <ActivityIndicator size="large" color="green" />;

          }



          let picturesList = data.pictures || ;



          let hasMorePictures = picturesList.length % variables.limit === 0;



          if (picturesList.length <= variables.offset) {

            hasMorePictures = false;

          }

          console.log(hasMorePictures);



          loadMore = () => {

            console.log("loadmore");

            fetchMore({

              variables: {

                offset: picturesList.length

              },

              updateQuery: (prev, { fetchMoreResult }) => {

                if (!fetchMoreResult) {

                  return prev;

                }



                return {

                  ...prev,

                  pictures: [...prev.pictures, ...fetchMoreResult.pictures]

                };

              }

            });

          };



          console.log("variables ", variables);



          return (

            <View>

              <Button title="Show More" onPress={loadMore} />

              <FlatList

                data={picturesList}

                renderItem={({ item }) => (

                  <View>

                    <Text>{item.title}</Text>

                  </View>

                )}

                keyExtractor={item => item.id}

                ListFooterComponent={() =>

                  hasMorePictures ? (

                    <ActivityIndicator size="large" color="green" />

                  ) : (

                    <View />

                  )

                }

              />

            </View>

          );

        }}

      </Query>

    );

  }

}



export default LinksScreen;