What is the parameter in GraphQL search ‘after’ and ‘before’

schema-request

#1

I try to use the Query. search , there are some limits in the number of result by using first:100 or last:100,I hope to understand the “cursor” of “after: String --Returns the elements in the list that come after the specified cursor.” and “before: String – Returns the elements in the list that come before the specified cursor.” Could you give me an example of the parameter String of ‘before’ or ‘after’?


#2

Hi @chiangming!

Sorry for the delay on this. And sure, I’d be happy to.

Let’s imagine that you wanted to paginate over a list of issues in a repository. The first query might look something like this:

query {
  repository(owner:"rails",name:"rails") {
    issues(first:2) {
      edges {
        node {
          title
          author {
            login
          }
        }
      }
    }
  }
}

Which results in:

{
  "data": {
    "repository": {
      "issues": {
        "edges": [
          {
            "cursor": "Y3Vyc29yOnYyOpHMhA==",
            "node": {
              "title": "Rails is not Django",
              "author": {
                "login": "leah"
              }
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpHNA_A=",
            "node": {
              "title": "more cowbell",
              "author": null
            }
          }
        ]
      }
    }
  }
}

Great. That gives us the first two issues that were ever created in that repository. If we wanted to get the next two issues, we’d need to modify the query in order to fetch the cursors - which are another way of saying the “unique position in a collection”. Let’s make that same query again, but get the cursor for each respective edge:

query {
  repository(owner:"rails",name:"rails") {
    issues(first:2) {
      edges {
        cursor
        node {
          title
          author {
            login
          }
        }
      }
    }
  }
}

Which results in:

{
  "data": {
    "repository": {
      "issues": {
        "edges": [
          {
            "cursor": "Y3Vyc29yOnYyOpHMhA==",
            "node": {
              "title": "Rails is not Django",
              "author": {
                "login": "leah"
              }
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpHNA_A=",
            "node": {
              "title": "more cowbell",
              "author": null
            }
          }
        ]
      }
    }
  }
}

Awesome, now each of our edges has a respective cursor which we can use to help paginate for the next set of data we want to return.

You can sort of visualize these cursors like this:

["Y3Vyc29yOnYyOpHMhA==", "Y3Vyc29yOnYyOpHNA_A="]

What’s unclear to us is whether or not there are cursor in front of, or behind the collection we’ve identified above :point_up:. In order to determine if there is, we can modify our query a little more and ask:

query {
  repository(owner:"rails",name:"rails") {
    issues(first:2) {
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
    }
  }
}
{
  "data": {
    "repository": {
      "issues": {
        "pageInfo": {
          "hasNextPage": true,
          "hasPreviousPage": false
        }
      }
    }
  }
}

So now we know that we can keep paginating forward, but not backwards.

So essentially our visualization of the collection looks something like this:

["Y3Vyc29yOnYyOpHMhA==", "Y3Vyc29yOnYyOpHNA_A=", ...]

In order to fetch the next set of data, we need to pass an after argument which says "please give me the first 2 items after cursor Y3Vyc29yOnYyOpHNA_A=:

query {
  repository(owner:"rails",name:"rails") {
    issues(first:2,after:"Y3Vyc29yOnYyOpHNA_A=") {
      edges {
        cursor
        node {
          title
          author {
            login
          }
        }
      }
    }
  }
}
{
  "data": {
    "repository": {
      "issues": {
        "edges": [
          {
            "cursor": "Y3Vyc29yOnYyOpHNH94=",
            "node": {
              "title": " Status: 500 Internal Server Error   private method `split' called for Mime::Type in ",
              "author": {
                "login": "niquola"
              }
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpHOAAyMJw==",
            "node": {
              "title": "rails.lighthouseapp.com inaccessible",
              "author": {
                "login": "sentientmonkey"
              }
            }
          }
        ]
      }
    }
  }
}

This is the general idea behind cursors. I hope this real world example is helpful.


#3

Thank you very much for your answer. I really appreciate it.




sa517144

邮箱:sa517144@mail.ustc.edu.cn

签名由 网易邮箱大师 定制