Argthtjtr

I am trying out Apollo pagination. It works correctly if I do not pass the limit argument from the client and hard code the limit argument in my hasMoreData function. If I were to add in the limit argument, all the data will be returned from my server and it will not paginate. The server side code should be correct (I tested it on GraphQL playground).

This does not work properly:

import React, { Component } from "react";

import {

  View,

  Text,

  ActivityIndicator,

  FlatList,

  Button,

  StyleSheet

} from "react-native";

import { graphql } from "react-apollo";

import gql from "graphql-tag";



let picturesList = ;



class HomeScreen extends Component {

  loadMore = () => {

    this.props.data.fetchMore({

      variables: {

        offset: picturesList.length

      },

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

        if (!fetchMoreResult) {

          return prev;

        }



        return {

          ...prev,

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

        };

      }

    });

  };



  render() {

    const { loading, pictures, variables } = this.props.data;



    picturesList = pictures;



    if (loading) {

      return <ActivityIndicator size="large" />;

    }



    //TODO - hard coded the limit as 3 which is not supposed to

    let hasMoreData = picturesList.length % 3 === 0;



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

      hasMoreData = false;

    }



    return (

      <View style={styles.root}>

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

        <FlatList

          data={picturesList}

          renderItem={({ item }) => (

            <View style={styles.contentContainer}>

              <Text style={styles.content}>{item.title}</Text>

            </View>

          )}

          keyExtractor={item => item.id}

          ListFooterComponent={() =>

            hasMoreData ? (

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

            ) : (

              <View />

            )

          }

        />

      </View>

    );

  }

}



const styles = StyleSheet.create({

  root: {

    flex: 1

  },

  content: {

    fontSize: 35

  },

  contentContainer: {

    padding: 30

  }

});



// adding the limit variable here will cause my server to return all data



const PICTURES_QUERY = gql`

  query($offset: Int, $limit: Int) {

    pictures(offset: $offset, limit: $limit) {

      id

      title

      pictureUrl

    }

  }

`;



export default graphql(PICTURES_QUERY)(HomeScreen);

The server-side code, just in case:

pictures: async (_, { offset, limit }) => {

  let picturesDB = getConnection()

    .getRepository(Picture)

    .createQueryBuilder("p");

  return picturesDB

    .take(limit)

    .skip(offset)

    .getMany();



}

I have added a default parameter in my GraphQL schema:

type Query {

  pictures(offset: Int, limit: Int = 3): [Picture!]!

}

Managed to pass the limit variable using Apollo HOC pattern...

export default graphql(PICTURES_QUERY, {

  options: () => ({

    variables: {

      limit: limitAmt

    }

  })

})(HomeScreen);