Hello everyone,
I’m facing a puzzling issue with fetching products from a Shopify collection in my Next.js application. Specifically, for my "pins-accessories" collection, only 7 products are being fetched, even though there are more products available in the collection. Other collections (like "shawls," "scarves," and "khimars") fetch all their products without any issues. I’d really appreciate any insights or suggestions to help me resolve this!
Code Details:
I have a utility function getCollectionProducts in lib/shopify.ts that handles fetching products with pagination. Here’s a simplified version of it:
export async function getCollectionProducts(handle: string😞 Promise<ProductCardData[]> {
// GraphQL query to fetch products from a collection by handle
const query = `
query CollectionProducts($handle: String!, $first: Int!) {
collection(handle: $handle) {
products(first: $first) {
edges {
node {
id
title
handle
priceRange {
minVariantPrice {
amount
}
}
images(first: 2) {
edges {
node {
url
}
}
}
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
}
`;
const variables = { handle, first: 250 }; // Fetch up to 250 products
const response = await shopifyFetch(query, variables); // Custom fetch function for Shopify API
const products = response.data.collection.products.edges.map(edge => edge.node);
return products; // Returns array of product data
}
This function is called in my page component at /pins-accessories/page.tsx:
const productsData = await getCollectionProducts('pins-accessories');
The Problem:
- For the "pins-accessories" collection, productsData.length is always 7, even though there are more products in the collection.
- Other collections return all their products as expected.
- In the Shopify admin, "pins-accessories" has more than 7 products, all published to the "Online Store" channel including 3 more channels and marked as available for sale.
- Logs show: "Total products fetched from Shopify for pins-accessories: 7" and "Available products after filtering: 7".
What I’ve Checked:
- Collection Handle: Confirmed "pins-accessories" is correct and matches the Shopify admin (case-sensitive).
- Product Status: All products in the collection are published and available for sale.
- API Permissions: Token includes unauthenticated_read_product_listings and unauthenticated_read_collection_listings.
Observations:
- The API response (data.collection.products.edges) contains only 7 items for "pins-accessories," with no errors.
- Pagination is implemented, but pageInfo.hasNextPage is false after the first 7 products, suggesting the API thinks that’s all there is.
- Environment variables (API token, store URL) are correctly set in .env.local.
My Questions:
- Why is the Shopify Storefront API returning only 7 products for this specific collection?
- Could there be Shopify-side settings or filters (e.g., inventory, tags) limiting the results?
- What additional debugging steps can I take to pinpoint the cause?
Extra Context:
- Using Next.js 13+ with App Router.
- No errors in the API response or server logs.
- The issue is isolated to "pins-accessories"; other collections work fine.
Any help or pointers would be greatly appreciated, thanks in advance!
