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!

[jnewhart]

Adding a screenshot of the GraphQL Cient snap pagination config settings.

[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!

[jnewhart]

Thank you so much! I will give this a try and update results.

[jnewhart]

I tried the suggested solution and got the following error: "Failure: Variable '$afterCursor' of type 'String' where expected 'ID'., Reason: GraphQL server responded with a query error"

*See screenshot