Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Goal:
Create a metaobject type/definition that acts as data input for a slideshow.
Should have an image, and a product so that upon clicking the image the user should be linked to the product.
Metaobject definition:
Query definition:
const METAOBJECTS = gql` query Metaobjects { metaobjects(type: "featured_images", first: 100) { edges { node { handle } } } } `
Executed as follows:
const { data } = useShopQuery({ query: METAOBJECTS, }); console.log(data);
Expected result:
data should contain a list of edges/nodes that has the metaobjects handles so that i can get the image and the product.
Actual result:
Console output:
Uncaught Error: Failed to connect to the Storefront API: 200 OK (x-request-id: 7760aefd-2ed6-4924-b91e-1c3b2ab3c9be)
Server output:
Error: http://node.linusthorsell.se:3000/shop Failed to connect to the Storefront API: 200 OK (x-request-id: b576929b-58b2-4a2e-9140-15f3b1fafb2f) Error processing route: http://node.linusthorsell.se:3000/shop Error: 200 OK (x-request-id: b576929b-58b2-4a2e-9140-15f3b1fafb2f) 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: b576929b-58b2-4a2e-9140-15f3b1fafb2f) at Module.useShopQuery (/node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:98:19) at SlideShow (/src/components/display/SlideShow.server.jsx:64:29) at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1060:12) at retryTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1622:17) at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1658:7) at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1139:14) at scheduleWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:58:3) at pingTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1138:5) at ping (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447: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: b576929b-58b2-4a2e-9140-15f3b1fafb2f) at Module.useShopQuery (/node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:98:19) at SlideShow (/src/components/display/SlideShow.server.jsx:64:29) at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1060:12) at retryTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1622:17) at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1658:7) at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1139:14) at scheduleWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:58:3) at pingTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1138:5) at ping (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=7685e447:1152:14) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) GET streaming SSR 200 ok 50.73 ms http://node.linusthorsell.se:3000/@vite/client.js GET streaming SSR 200 error 456.30 ms http://node.linusthorsell.se:3000/shop Suspense waterfall detected on query: Metaobject
Thankful for any assistance.
Thank you!
Linus
Hi @LinusThorsell - thank you for getting in touch and for sharing the response body. Looking at the error - the most common reason you'd see a "Failed to connect to the Storefront API" message would be an authentication issue, although the message would generally tell you if your app wasn't properly authenticated to access the shop via the storefront API.
Can you confirm that you're including the x-shopify-storefront-access-token field and a valid token in the API Request headers? If you are - no worries, just wanted to troubleshoot that first. If you are able to confirm that token is being sent as expected, could you send a more recent example of an error response if you are still encountering the issue?
Hope to hear from you soon - happy to try to help with this.
Al | Shopify Developer Support
Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
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.