No collection found for hidden-homepage-carousel and hidden-homepage-featured-items

[nexusprime-here]

I was able to solve this error on my own, and I'm posting it here for anyone who encounters the same issue. The context is as follows: I had already correctly filled out my .env.local file, created the collections with the correct link, and still found that I was getting an error. After a long time, I discovered that the error was simply due to spacing in lib/shopify/queries/collection.ts, in the getCollectionProductsQuery function:

export const getCollectionProductsQuery = /* GraphQL */ `
  query getCollectionProducts(
    $handle: String!
    $sortKey: ProductCollectionSortKeys
    $reverse: Boolean
  ) {
    collection(handle: $handle) {
      products(sortKey: $sortKey, reverse: $reverse, first: 100) {
        edges {
          node {
            ...product
          }
        }
      }
    }
  }  <- error here
  ${productFragment}
`;

changed to:

  }${productFragment}

[nexusprime-here]

Test it yourselves to see if this solution is correct.

[tabdon]

Wow. Haha. What a funny bug. That fixed my problem. Thanks! I would have never figured that out.

[stabildev]

Why is this closed? The issue is still in the code: https://github.com/vercel/commerce/blob/3a18f9a0986db76e2d300a80466276a1040687b1/lib/shopify/queries/collection.ts#L55C1

Unfortunately prettier auto-formats the query in the wrong format. For me the solution was adding lib/shopify/queries/* to .prettierignore

[nexusprime-here]

Idk why I closed this issue, my bad

[rolandin]

God damn son, I bet that was hard to find lol, this fixes the issues, I hope they merge a PR with this 1 liner fix soon.

[benjifriedman]

The space is on two lines of ${collectionFragment} and also on line 52 with ${productFragment}. It worked for me after fixing it in those three places and adding this part that @stabildev recommended

Unfortunately prettier auto-formats the query in the wrong format. For me the solution was adding lib/shopify/queries/* to .prettierignore

[matteo-dirollo]

Nothing works for me. I started from scratch, followed the instructions again, corrected the bug but nothing. Since I deleted some products from shopify I can't read anymore the data from the API.

[matteo-dirollo]

is this normal when I'm supposed to receive data from shopify?

> @ dev C:\Users\Matteo Di Rollo\Desktop\E-Commerce\Medusa\n-keys
> next dev

   ▲ Next.js 14.0.0
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in 1409ms

[arijunior]

Nothing works for me. I started from scratch, followed the instructions again, corrected the bug but nothing. Since I deleted some products from shopify I can't read anymore the data from the API.

You need to add two collections and associate with products.
hidden-homepage-carousel
hidden-homepage-featured-items

[Pryority]

Not sure why but doing this did not work:

Unfortunately prettier auto-formats the query in the wrong format. For me the solution was adding lib/shopify/queries/* to .prettierignore

...Prettier continued auto-saving.

What DID work for me was adding // prettier-ignore above each query in lib/shopify/queries/*.

For example:

// prettier-ignore
export const getCollectionQuery = /* GraphQL */ `
  query getCollection($handle: String!) {
    collection(handle: $handle) {
      ...collection
    }
  }${collectionFragment}
`;

Then, repeat for each query in the file.

[gabrielzamp]

Hello everyone,

I’m encountering the same issue with my Next.js application where the carousel does not appear when I run the app locally, although it functions correctly when deployed on Vercel. The homepage and other features work fine in both environments, but this specific bug with the carousel is puzzling.

Here’s the link to the live site for reference: https://nextjs-commerce-nao-aguento-mais.vercel.app/

Does anyone know what might be causing this discrepancy between the local and deployed versions? Any insights or fixes would be greatly appreciated!