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

Retired Boards Appdev Custom Storefronts
1

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
LinusThorsell_0-1676142570289.png1882×1398 172 KB

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

2

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

3

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.