Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hydrogen / Storefront API fresh install newest version.
Goal:
Create a metaobject to store an Image file and a Product, to display the image and if the user clicks the image redirect the user to the given product.
Metaobject definition in Shopify Admin:
What I did:
// Query definition const METAOBJECTS = gql` query Metaobjects { metaobjects(type: "featured_images", first: 100) { edges { node { type } } } } `; // Query usage const { data } = useShopQuery({ query: METAOBJECTS, }); console.log(data);
Expected result:
List of handles for all metaobjects that are available
Actual result:
Error: http://node.linusthorsell.se:3000/shop Failed to connect to the Storefront API: 200 OK (x-request-id: 73fbdb11-6f01-4024-bf87-e030c3473272) Error processing route: http://node.linusthorsell.se:3000/shop Error: 200 OK (x-request-id: 73fbdb11-6f01-4024-bf87-e030c3473272) at __vite_ssr_import_9__.useQuery.cache.cache (/node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:86:23) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async useCachedQueryFn (/node_modules/@shopify/hydrogen/dist/esnext/foundation/useQuery/hooks.js:101:27) Error processing route: http://node.linusthorsell.se:3000/shop Error: Failed to connect to the Storefront API: 200 OK (x-request-id: 73fbdb11-6f01-4024-bf87-e030c3473272) at Module.useShopQuery (/node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:98:19) at SlideShow (/src/components/display/SlideShow.server.jsx:62:29) at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1060:12) at retryTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1622:17) at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1658:7) at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1139:14) at scheduleWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:58:3) at pingTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1138:5) at ping (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1152:14) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Error processing route: http://node.linusthorsell.se:3000/shop Error: Failed to connect to the Storefront API: 200 OK (x-request-id: 73fbdb11-6f01-4024-bf87-e030c3473272) at Module.useShopQuery (/node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:98:19) at SlideShow (/src/components/display/SlideShow.server.jsx:62:29) at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1060:12) at retryTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1622:17) at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1658:7) at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1139:14) at scheduleWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:58:3) at pingTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1138:5) at ping (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=93033ba9:1152:14) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
All my other queries using the storefront API work perfectly fine being executed in the same way.
Any points towards solving this would be very useful.
Thank you!
Linus
I had this same issue and it ended up being solved by upgrading to Hydrogen 2. It's seemingly a vite / router issue which was removed and replaced by remix in the newest version.