Can Someone Post a GraphQL Pagination Example

[jnewhart]

I have been experimenting with the GraphQL Client snap trying to get pagination to work.  I am able to successfully retrieve data, but only once.  I am getting pageinfo returned, but have not been able to successfully use it to with pagination settings to get all the data. I am not able to get past this error: "Failure: No variable matching Cursor Variable Name was found in the query".  Any help appreciated.

Working Example:

query myQuery {
People(active: true, first: 100) {
nodes {
first
last
}
pageInfo {
hasNextPage
endCursor
count
startCursor
hasPreviousPage
totalCount
}
}
}

[aoutzen · Accepted solution]

Hi jnewhart! I can help you with this.

The reason for the error "No variable matching Cursor Variable Name was found in the query" is because there are no variables provided at the top level of the query and thus no variable name given to the cursor variable name setting.

The field "People" being queried should have a parameter named something like "after" that holds the cursor value, representing where the start position within the data for the request - check the documentation of the GraphQL schema you are utilizing for specifics on the name/type for your use case. You'll need to create a top-level variable for the query that maps to that cursor parameter in People, and provide the name of that top-level variable to the cursor variable name setting. This tells the snap to which variable that the cursor value from the previous page results should be assigned so that it is provided to the appropriate parameter of the People field.

Here's a screenshot of what I would expect your configuration to look like (assuming you are paginating forward):

The order of operations is that GraphQL Client receives the data from the first page, retrieves the value to be used as a cursor from the specified location (Next cursor path), assigns that value to the specified query variable (Cursor variable name), and that query variable then passes that value to the appropriate parameter of the People field so that it can be utilized in the next page request.

Hope this helps!

[aoutzen · Accepted solution]

That error is the GraphQL server warning you that the query is not valid for its schema. My example may not exactly match the GraphQL schema you are querying and you may need to adapt it.

You will need to reference the documentation for the GraphQL schema to determine a) the name of the People parameter you should be using, and b) the expected type for that parameter so you can set up your top-level query variable to be the same. Based on the error it seems like the People parameter you want is indeed called "after", but the type per the schema should be ID - but again, you should check the documentation of the schema you are connecting with to confirm.

[jnewhart]

Using ID the type worked. Thank you for your help!

[sbdex]

Thank you for the above info. The Graphql API I am working with doesn't have endCursor in pageInfo.

It outputs cursor associated with every edge. How do I set the 'after' to the cursor value of last record received? Attached are screenshots of my settings and sample response.

Thanks!