react-native - Apollo Graphql 分页因限制而失败

Question

我正在尝试 Apollo 分页。如果我不从客户端传递限制参数并在我的hasMoreData函数中硬编码限制参数，它会正常工作。如果我要添加限制参数，所有数据都将从我的服务器返回，并且不会分页。服务器端代码应该是正确的（我在 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!]!
}

标签： react-nativegraphqlreact-apollo

Answer 1

设法使用 Apollo HOC 模式传递限制变量...

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