使用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
相关文章推荐
- 使用react-apollo+graphql实现Mutation操作
- 使用标准SQL语句实现分页操作(Oracle)
- DataGrid的使用:(一)在DataGrid控件中实现基本的操作(编辑、删除、分页)
- 【Graphql实践】使用 Apollo(iOS) 访问 Github 的 Graphql API
- 使用bootstraptable插件实现表格记录的查询、分页、排序操作
- DataGrid的使用:(一)、在DataGrid控件中实现基本的操作(编辑、删除、分页)
- PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
- PHP中使用jQuery+Ajax实现分页查询多功能操作
- ASP.NET 使用DataTable在Table中实现自定义分页
- 使用JavaScript+XML实现分页
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- .NET中使用datagrid实现的简单分页效果
- 使用JavaScript+XML实现分页
- 使用XML封装数据库操作语句的实现
- 使用XML封装数据库操作语句的实现(zz)
- 使用XML封装数据库操作语句的实现
- 使用XSL实现在客户端的排序操作
- 使用工具类实现通用分页处理
- 使用System.DirectoryServices.Protocols实现对AD的简单操作
- 使用javascript+xml实现分页