您的位置:首页 > Web前端 > React

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

2017-08-22 15:08 696 查看
声明: 转载请注明出处

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  apollo graphql react 前端