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!

[TylerSustare]

Due to caching, I had a similar problem when playing with this. After adding the solutions mentioned here I also updated the lib/constants.ts file to change

export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';

to use different versions of the API. 2023-04, 2023-07... up until the current version of the API.

I'm sure at some point this strategy will fail with breaking changes after a deprecation cycle. Also, there has to be a better strategy to cache bust around the query or the client. But for now it helped me 😄

Also, there has to be a better strategy to cache bust around the query or the client.

This is a better way 😅 https://github.com/vercel/commerce/blob/7fd9ad8a8c834f5d4ca35bbf9d0f212a46c0513b/lib/shopify/index.ts#L61-L62

Change calls to that function to use ({cache: 'no-cache', ...})

[neilk17]

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}

Any reason why this isn't merged in the codebase yet?

[patrickaigbogun]

Please can anyone alive help me, my carousel shows up locally but not on prod.. I am using Shopify partners account which is in dev mode, could this be why?

Do I need a different set of API keys for prod?

[taylordragoo]

fwiw I had to implement every change suggested here and I also had to create new collections and swap the collections specified in this codebase(carousel.tsx & three-items.tsx) with the names of the new collections I created.