Troubleshooting issues with ProductItem section and GraphQl?

[SefSyndicate]

I'm following this tutorial to learn and emulate but I arrived an unexplained problem, the problem is:

1. Property 'variants' does not exist on type 'ProductItemFragment'.ts(2339)
2. Property 'altText' does not exist on type 'Pick<Image, "id" | "url" | "width" | "height">'.ts(2339)

I followed the tutorial step by step, although slightly overwhelming I like to understand the concept but I've stumbled on this unexplained issue and the more I allow AI to 'fix' it, the worse it seems to get.
(video: https://www.youtube.com/watch?v=lNPZrGomQ7I&t=760s)
(timestamp: 3:52:00 onwards)

I've highlighted in red what the issue is:
I'm looking for a resolve that aligns with the video since I have something to refer back to.

[ruggishop]

Could you try running npm run codegen manually in that project's root? It seems like types are not correctly updated for that query 🤔

[SefSyndicate]

Could you try running npm run codegen manually in that project's root? It seems like types are not correctly updated for that query 🤔

Nothing changes, still the same.

Actually I did npm run dev and got this:

MiniOxygen couldn't load your app's entry point.
SyntaxError: Unexpected token 'I', "Internal s"... is not valid JSON
at /@fs/C:/Users/xxx/Desktop/xxx/app/root.tsx:5:31
at /@id/__x00__virtual:remix/server-build:2:31

update - It wouldn't run from VScode but it ran with cursorAI after few tries.

[ruggishop]

It might possible that some ports are being used by other processes, it looks similar to this one #2366 (comment) .
Could you try to 1) ensure that no other process is running on ports 3000/8080 2) retry on a single shell to run first npm run codegen and then npm run dev?

[SefSyndicate]

It might possible that some ports are being used by other processes, it looks similar to this one #2366 (comment) . Could you try to 1) ensure that no other process is running on ports 3000/8080 2) retry on a single shell to run first npm run codegen and then npm run dev?

It seems to be working now.

But I get this error in terminal:

╭─ error ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ In Hydrogen's storefront.query: │
│ │
│ Parse error on "{" (LCURLY) at [1, 506] │
│ Request ID: 49925310-ce0e-4167-acd8-486bb9aad88d-1738123056 │
│ │
│ To debug the query Product, try it in GraphiQL ( http://localhost:3000/graphiql?query=query%20Product(%20%24country%3A%20CountryCode%20%24handle%3A%20String!%20%24language%3A%20LanguageCode%20%24select │
│ edOptions%3A%20%5BSelectedOptionInput!%5D!%20)%20%40inContext(country%3A%20%24country%2C%20language%3A%20%24language)%20%7B%20product(handle%3A%20%24handle)%20%7B%20...Product%20%7D%20%7D%20fragment%20Pr │
│ oduct%20on%20Product%20%7B%20id%20title%20vendor%20handle%20descriptionHtml%20description%20encodedVariantExistence%20encodedVariantAvailability%20options%20%7B%20name%20optionValues%20%7B%20name%20first │
│ SelectableVariant%20%7B%20...ProductVariant%20%7D%20swatch%20%7B%20color%20image%20%7B%20previewImage%20%7B%20url%20%7D%20%7D%20%7D%20%7D%20images(first%3A%2010)%7B%20nodes%3A%20%7B%20id%20url%20altText% │
│ 20width%20height%20%7D%20%7D%20%7D%20selectedOrFirstAvailableVariant(selectedOptions%3A%20%24selectedOptions%2C%20ignoreUnknownOptions%3A%20true%2C%20caseInsensitiveMatch%3A%20true)%20%7B%20...ProductVar │
│ iant%20%7D%20adjacentVariants%20(selectedOptions%3A%20%24selectedOptions)%20%7B%20...ProductVariant%20%7D%20seo%20%7B%20description%20title%20%7D%20%7D%20fragment%20ProductVariant%20on%20ProductVariant%2 │
│ 0%7B%20availableForSale%20compareAtPrice%20%7B%20amount%20currencyCode%20%7D%20id%20image%20%7B%20__typename%20id%20url%20altText%20width%20height%20%7D%20price%20%7B%20amount%20currencyCode%20%7D%20prod │
│ uct%20%7B%20title%20handle%20%7D%20selectedOptions%20%7B%20name%20value%20%7D%20sku%20title%20unitPrice%20%7B%20amount%20currencyCode%20%7D%20%7D&variables=%7B%22handle%22%3A%22onyx%22%2C%22selectedOptio │
│ ns%22%3A%5B%7B%22name%22%3A%22Onyx%22%2C%22value%22%3A%22100ML%22%7D%5D%2C%22country%22%3A%22US%22%2C%22language%22%3A%22EN%22%7D ). │
│ │
│ To investigate the issue, examine this stack trace: │
│ at loadCriticalData (app/routes/($locale).products.$handle.tsx:52) │
│ at loader (app/routes/($locale).products.$handle.tsx:30) │
│ at callRouteLoader (.vite/deps_ssr/@remix-run_server-runtime.js:3191) │
│ at (.vite/deps_ssr/@remix-run_server-runtime.js:3291) │
│ at actualHandler (.vite/deps_ssr/@remix-run_server-runtime.js:2036) │
│ at (.vite/deps_ssr/@remix-run_server-runtime.js:2044) │
│ at runHandler (.vite/deps_ssr/@remix-run_server-runtime.js:2055) │
│ at callLoaderOrAction (.vite/deps_ssr/@remix-run_server-runtime.js:2103) │
│

[ruggishop]

I believe there's a typo in your query, if I url-decode the string above I see this:

...
images(first: 10) {
  nodes: {
    id
...

The culprit seems to be the colon : after nodes, which should be removed.

The snippet should be:

...
images(first: 10) {
  nodes {
    id
...