Shopify GraphQL pagination with pageInfo response on incoming configuration

[daniellefers]

Hi,

I’m using a GraphQL subscriber for my incoming Shopify configuration to fetch a list of all products and variants.

I’m grabbing the first 2 results (for simplicity) and returning de ‘pageInfo endcursor’ to start paginating to the next page.

How is pagination done within GraphQL subscribers?

The GraphQL query looks like:

query($after: String) {
	products(first: 25, after: $after) {
		edges {
			node {
				id,
				handle,
				sku: variants(first: 1){
                    edges {
                        node {
                            sku,
							barcode
                        }
                    }
                }
				productType,
				createdAt,
				updatedAt
			},
		},
		pageInfo {
			endCursor
      hasNextPage
		}
	}
}

The response object is:

{
	"data": {
		"products": {
			"pageInfo": {
				"hasNextPage": true,
				"endCursor": "eyJsYXN0X2lkIjo4NDY0NDA0MTg1MzI4LCJsYXN0X3ZhbHVlIjoiODQ2NDQwNDE4NTMyOCJ9"
			},
			"edges": [
				{
					"node": {
						"title": "Practical Wooden Computer",
						"id": "gid://shopify/Product/8464404021488",
						"createdAt": "2024-01-11T12:53:10Z",
						"variants": {
							"edges": [
								{
									"node": {
										"sku": "POSTMAN-SKU-973"
									}
								}
							]
						}
					}
				},
				{
					"node": {
						"title": "Intelligent Plastic Shirt",
						"id": "gid://shopify/Product/8464404185328",
						"createdAt": "2024-01-11T12:53:13Z",
						"variants": {
							"edges": [
								{
									"node": {
										"sku": "POSTMAN-SKU-860"
									}
								}
							]
						}
					}
				}
			]
		}
	},
	"extensions": {
		"cost": {
			"requestedQueryCost": 10,
			"actualQueryCost": 10,
			"throttleStatus": {
				"maximumAvailable": 1000.0,
				"currentlyAvailable": 990,
				"restoreRate": 50.0
			}
		}
	}
}

I would like to keep paginating on my Incoming configuration as long as the data.products.pageInfo.hasNextPage = true and use the key data.products.pageInfo.endCursor as a GraphQL variable $after to fetch the next page.

How can this be achieved?

[r.candrian]

Hi @daniellefers ,

You can do this by:

1. Save the value data.products.pageInfo.endCursor into storage, and update it every time incoming is executed
   

   

2. Then get the data from the storage when incoming being executed.
   

   

3. The endCursor variable obtained from storage is then included in the payload to replace $after
   

[daniellefers]

Hi r.candrian,

I managed to store the cursor in the storage and use it in a query variable within my GraphQL request.

But the GraphQL subscriber in my incoming configuration does not have an option to configure pagination (follow pagination) for the next request.

The current configuration for my GraphQL subscriber looks like this:

Although the HTTP Subscriber has options to follow pagination and modify body or url params. See screenshot below for reference:

Is pagination in GraphQL possible?

[r.candrian]

Hi @daniellefers,

Currently, you cannot use pagination for GraphQL. However, you can use another method.
Can you send a link to your configuration via DM? We will check it further and maybe provide an example.