Apollo Graphql 分页因限制而失败

Posted 2023-03-08

【中文标题】Apollo Graphql 分页因限制而失败

【英文标题】：Apollo Graphql Pagination failed with limit

【发布时间】：2019-04-25 16:38:51

【问题描述】：

我正在尝试 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!]!

【参考方案1】：

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

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