Using Shopify Storefront API to fetch Collection Image

Question

I'm building an Shopify Ionic 3 App using the Storefront API. Fetching ID and Title works. But trying to access Image it fails.

Using "GraphiQL" with this Query

{
  shop {
    collections(first: 1) {
      edges {
        node {
          id
          title
          handle
          image {
            originalSrc
          }
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}

will Result with

{
  "data": {
    "shop": {
      "collections": {
        "edges": [
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2NTUwNjY5OQ==",
              "title": "Snacks",
              "handle": "snacks-co",
              "image": {
                "originalSrc": "https://cdn.shopify.com/s/files/1/2262/0831/collections/Snacks_Collection.jpg?v=1524511173"
              }
            }
          }
        ],
        "pageInfo": {
          "hasNextPage": true
        }
      }
    }
  }
}

Using "graphql-js-client" with Ionic 3, Collection Image is not available.

// Service Provider Function
getCollectionsWithImage() {
  let query = this.client.query((root) => {
    root.add('shop', (shop) => {
      shop.addConnection('collections', {args: {first: 16}}, (collection) => {
        collection.add('id');
        collection.add('title');

        // THIS does not work
        // collection.add('image', (image) => {
        //     image.add('originalSrc');
        // })

       // THIS does not work
        // collection.addConnection('image', (image) => {
        //     image.add('originalSrc');
        // })                  
       })
    })
  });

  return this.client.send(query).then(({model, data}) => {
    return model.shop.collections;
  });
}

Do you have any Idea?

magic.77 magic.77 · Accepted Answer · 2018-05-02T07:04:09

Got it. After running Introspection Query against the Storefront API refreshed all nodes in my types.js. Now i'm able to access Collection Images, too.

Using Shopify Storefront API to fetch Collection Image

1 Answers