Metaobject query returns 200 OK and returns error. Storefront API from Hydrogen.

LinusThorsell
Shopify Partner
3 0 0

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:

LinusThorsell_0-1676142570289.png

 

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

Replies 2 (2)

ShopifyDevSup
Shopify Staff
1249 202 443

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

fatcat1337
Shopify Partner
2 0 0

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.