使用react-apollo+graphql实现分页操作

声明: 转载请注明出处

1.依赖引入

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import view from '...'; //导入视图界面

2. graphql查询语句

//使用$声明的变量进行条件查询，在变量类型后加 ! 符号可决定该条件为必须变量
//如果直接使用数值查询，就不需要变量，直接给查询条件赋值即可
const recActionLogSql = gql `
query logListQuery($skip:Int,$limit:Int,$logMsg:String,$logTime:String){
  getLogList(skip:$skip,limit:$limit,logMsg:$logMsg,logTime:$logTime){
    id:_id,
    logMsg,
    logTime
  }
  getLogCount(logMsg:$logMsg,logTime:$logTime),
}
`;

3. 查询操作

const INIT_PAGE = 10;
const recActionLogQuery = graphql(recActionLogSql, {
  options() {
    return {
     //进行初始查询变量赋值
      variables{
        skip: 0,
        limit: INIT_PAGE,

      },
      fetchPolicy: 'network-only',
   //允许从网络获取
    };
  },
  //进行数据props的传递，在view视图页面可直接使用this.props来获取data中的参数
  //其中fetchMore用来做分页查询，每次调用它可以重新查询并自动更新数据
  props({ data: { loading, getLogList, getLogCount, fetchMore } }) {
    return {
      loading,
      getLogList,
      getLogCount,
   //因为要从view视图页传递分页参数，比如分页码，以及一些动态查询条件，所以对fetchMore进行包装
      loadMoreEntries(eventKey = 1, factor) {

   //对传递过来的查询条件进行处理
        const variables = { skip: ((eventKey - 1) * INIT_PAGE) || 0 };
        if (factor.logMsg) {
          variables.logMsg = factor.logMsg;
        }
        if (factor.logTime) {
          variables.logTime = factor.logTime;
        }
        return fetchMore({
          //此处为每次查询动态赋参,此处使用的es6同名赋值语法
          variables,

          //判断是否加载到新数据
          updateQuery: (previousResult, { fetchMoreResult }) => {
              if (!fetchMoreResult) {
              return previousResult;
            }
            //进行数据更新
            return Object.assign({}, previousResult, {
              getLogList: [...fetchMoreResult.getLogList],
              getLogCount: fetchMoreResult.getLogCount,
            });
          },
        });
      },
    };
  },
})(view );     // 此处需用使用视图界面来的  数据建立连接

注: 当别的页面要引入view视图页面时，不能使用原来的导出的view页面，得使用加载数据导出后的变量，比如本例中为recActionLogQuery