graphql:如何正确处理上一页,下一页,最后一页和首页?

时间:2018-10-02 03:00:59

标签: reactjs pagination graphql relay

对于前端,我正在使用React + Relay。我在后端有一些可以查询的连接:

query Query {
    node(id: 123456) {
        teams(first: 10) {
            node {
                id
                name
            }
            page_info {
                start_cursor
                end_cursor
            }
        }
    }
}

因此对于传统方法,我可以使用skip PAGE_SIZE * curr limit PAGE_SIZE查询下一页,上一页以及第一页和最后一页(实际上我可以查询随机页)

但是我应该如何实现前端以优雅地发出这些请求?

1 个答案:

答案 0 :(得分:1)

@Junchao,文森特所说的是正确的。另外,您必须具有重新获取查询并发送public class TC02_Login extends BaseClass { ExtentReports extent; ExtentTest logger; WebDriver driver; @BeforeMethod public void createReport() { ExtentHtmlReporter reporter = new ExtentHtmlReporter("./Reports/finalReport.html"); extent = new ExtentReports(); extent.attachReporter(reporter); } @Parameters({ "userName", "password" }) @Test(priority = 1) public void login(String userName, String password) throws InterruptedException, IOException { logger = extent.createTest("Login Module"); objSeleutils.click(objLogin.lbl_signin); objSeleutils.enterText(objLogin.txt_email, userName); objSeleutils.enterText(objLogin.txt_password, password); objSeleutils.click(objLogin.btn_signup); boolean txt_welcome = objSeleutils.existsElement(objLogin.ddl_welcome); Assert.assertEquals(txt_welcome, true); } @Test(priority = 2) public void dashboard() { logger = extent.createTest("Dashboard Verification."); boolean txt_welcome = objSeleutils.existsElement(objLogin.btn_findPet); Assert.assertEquals(txt_welcome, false); } @AfterMethod public void teardown(ITestResult results) throws IOException { if (results.getStatus() == ITestResult.FAILURE) { String path = System.getProperty("user.dir") + "/Screenshots/" + "Fail_" + System.currentTimeMillis() + ".png"; String temp = objSeleutils.tackScreenShot(path); logger.fail(results.getThrowable().getMessage(), MediaEntityBuilder.createScreenCaptureFromPath(temp).build()); logger.log(Status.FAIL, "Test Case Failed."); } if (results.getStatus() == ITestResult.SUCCESS) { String path = System.getProperty("user.dir") + "/Screenshots/" + "Pass_" + System.currentTimeMillis() + ".png"; String temp = objSeleutils.tackScreenShot(path); logger.log(Status.PASS, "Test Case Passed.", MediaEntityBuilder.createScreenCaptureFromPath(temp).build()); } extent.flush(); } } 值已更新的<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd"> <suite name="Web" verbose="2"> <parameter name="browserName" value="Chrome" /> <parameter name="projectURL" value="http://sitename.com" /> <parameter name="userName" value="ashishsavaliya@gmail.com" /> <parameter name="password" value="*********" /> <test name="Test"> <classes> <class name='testCase.TC02_Login' /> </classes> </test> </suite> 。我将尝试为您提供示例:

refetchVariables

我试图根据您的代码构建一个示例。基本上这就是想法。最底层的查询是重新获取查询。除此之外,您还必须通过调用first来调用export default createRefetchContainer( TeamsComponent, { query: graphql` fragment TeamsComponent_query on Query @argumentDefinitions( first: { type: Int } last: { type: Int } before: { type: String } after: { type: String } ) { teams( id: { type: "ID!" } first: { type: Int } last: { type: Int } before: { type: String } after: { type: String } ) @connection(key: "TeamsComponent_teams", filters: []) { count pageInfo { endCursor hasNextPage } edges { node { id name } } } } `, }, graphql` query TeamsComponent( $after: String $before: String $first: Int $last: Int ) { ...TeamsComponent_query @arguments( first: $first last: $last after: $after before: $before ) } `, ); 来触发重新获取。深入了解有关此文档。 希望会有所帮助:)

更新:

只需添加一些内容,您就可以使用一个this.props.relay.refetch函数,如下所示:

renderVaribles

更新2:

要倒退,您可以使用类似的东西:

handleLoadMore
相关问题