Аполлон Graphql Пагинация не удалось с ограничением

Question

Я пробую Аполлон нумерацию.Это работает правильно, если я не передаю предельный аргумент от клиента и жестко прописываю предельный аргумент в моей функции hasMoreData.Если я добавлю аргумент limit, все данные будут возвращены с моего сервера и не будут разбиты на страницы.Код на стороне сервера должен быть правильным (я тестировал его на площадке GraphQL).

Это не работает должным образом:

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);

Код на стороне сервера, простов случае:

pictures: async (_, { offset, limit }) => {
  let picturesDB = getConnection()
    .getRepository(Picture)
    .createQueryBuilder("p");
  return picturesDB
    .take(limit)
    .skip(offset)
    .getMany();

}

Я добавил параметр по умолчанию в мою схему GraphQL:

type Query {
  pictures(offset: Int, limit: Int = 3): [Picture!]!
}

Answer 1

Удалось передать предельную переменную с использованием шаблона Apollo HOC ...

export default graphql(PICTURES_QUERY, {
  options: () => ({
    variables: {
      limit: limitAmt
    }
  })
})(HomeScreen);