I am working with Shopify's GraphQL API to paginate through all orders using a cursor-based pagination approach.
The query successfully fetches orders in batches, and I can see the correct endCursor being returned and logged. However, my pagination is stuck in an infinite loop where it keeps fetching the same set of orders over and over again, even though I'm updating the endCursor for each query.
Here's my code for fetching orders:
async getAllOrders(session) {
const _client = new shopify.api.clients.Graphql({ session });
let hasNextPage = true;
let endCursor = null; // Initialize to null to fetch the first page
let allOrders = [];
const query = `#graphql
query ($cursor: String) {
orders(first: 3, after: $cursor) {
edges {
node {
id
}
}
pageInfo {
hasNextPage
endCursor
}
}
}`;
while (hasNextPage) {
try {
console.log('Using EndCursor for Query:', endCursor);
const data = await _client.query({
data: query,
variables: {
cursor: endCursor,
},
});
const orders = data.body.data.orders.edges.map((edge) => edge.node);
allOrders.push(...orders); // Store the fetched orders
await this._dao.addAllOrders(orders);
// Update pagination state
hasNextPage = data.body.data.orders.pageInfo.hasNextPage;
endCursor = data.body.data.orders.pageInfo.endCursor; // Update cursor here
// Log updated state after the query
console.log('Updated EndCursor for Next Query:', endCursor);
console.log('Has Next Page:', hasNextPage);
} catch (error) {
console.error('GraphQL Error Response:', error.response); // Log the full error response
if (error instanceof GraphqlQueryError) {
throw new Error(
`${error.message}\n${JSON.stringify(error.response, null, 2)}`
);
} else {
throw error;
}
}
}
return allOrders;
}
Here are the logs from one of the iterations:
Using EndCursor for Query: null
Fetched Orders: [
{ id: 'gid://shopify/Order/6007911088439' },
{ id: 'gid://shopify/Order/6008818172215' }
]
Fetched EndCursor: eyJsYXN0X2lkIjo2MDA4ODE4MTcyMjE1LCJsYXN0X3ZhbHVlIjoiMjAyNC0wOC0yOCAwMzoyNToxMC4wMTU5MTkifQ==
Updated EndCursor for Next Query: eyJsYXN0X2lkIjo2MDA4ODE4MTcyMjE1LCJsYXN0X3ZhbHVlIjoiMjAyNC0wOC0yOCAwMzoyNToxMC4wMTU5MTkifQ==
Has Next Page: true
Using EndCursor for Query: eyJsYXN0X2lkIjo2MDA4ODE4MTcyMjE1LCJsYXN0X3ZhbHVlIjoiMjAyNC0wOC0yOCAwMzoyNToxMC4wMTU5MTkifQ==
Fetched Orders: [
{ id: 'gid://shopify/Order/6007911088439' },
{ id: 'gid://shopify/Order/6008818172215' }
]
As you can see, the endCursor is fetched and updated correctly, but it seems like the same orders are being fetched again with the same endCursor, causing an infinite loop.
I'm doing this in a Shopify embedded app template which uses ShopifyApp API by default.
Is there something wrong with how I am handling the pagination logic?
Why am I fetching the same orders repeatedly despite the endCursor being updated?
Any help or insight would be appreciated!
According to the Shopify API reference, it should be as this:
const data = await _client.query({
data: {
query: query,
variables: {
cursor: endCursor,
},
},
})
BTW according to them _client.query will be deprecated and it will replaced by _client.request
const client = new shopify.clients.Graphql({session});
const response = await client.query({
data: {
query: QUERY,
variables: {first: 1},
},
extraHeaders: {myHeader: '1'},
tries: 1,
});
console.log(response.body.data, response.body.extensions);
const client = new shopify.clients.Graphql({session});
const response = await client.request(QUERY, {
variables: {first: 1},
headers: {myHeader: '1'},
retries: 2,
});
console.log(response.data, response.extensions);