Shopify Question posted in
The Shopify help center can be found here.

Shopify-Buy-SDK Get Raw Product Data

I am looking to build an e-commerce web app using ES6, react, react-redux and yours js-buy-sdk api. My problem is that after fetching all products from shopify and placing them in the store, I seem to no have all data about a product as I would expect, rather only: { attrs, shopClient, serializer, type, config, _memoized }.

Here is how I am making the call to get products, under a file I named shopify.js:

import ShopifyBuy from 'shopify-buy';

const shopClient = ShopifyBuy.buildClient({
  apiKey: 'xxxxxxxxxxxxxxxxxxxx1403c107adc7e',
  domain: 'xxxxxxxxxxxxxxxx.myshopify.com',
  appId: '6',
});

export function fetchAllProducts() {
  return new Promise((resolve, reject) => {
    shopClient.fetchAllProducts()
      .then((data) => {
        console.log('shopClient.fetchAllProducts', data);
        resolve(data);
      }).catch((error) => {
        console.error(new Error('Fetching products error!'));
        reject(error);
      });
  });
}

Looking at the console.log shopClient.fetchAllProducts this is what I get:
chrome console

I take data and place it in the redux store and when I am looking at it, it looks like this:
redux store

If it is relevant, check this gist to see the actions I am dispatching and this gist where my actions get reduced and placed in the store.

From my understanding, when you do fetchAllProducts() method, you get an array of ProductModels, therefore, I suppose in my store gets set the following { attrs, shopClient, serializer, type, config, _memoized } because that is what ProductModel stores internally.

My question is, is there a way to get a raw object of data from ProductModel (with all the relevant product values as presented in the first screenshot and with the data from the Models, such as ProductOptionModel, that ProductModel relies on) so I can place that my store for stability and sanity reasons?

Shopify API Reference can be found here.

Tags:

2

Answers


  1. 0

    In your example code you are calling the API with your secret API key? You do understand that this exposes your store to as much abuse you might not want right? Are you sure you know what you’re doing there?

    Login or Signup to reply.
  2. 0

    If you’re looking for raw access to the data returned on a product, the attrs property contains the API response JSON, without additional logic or models.

    However, if possible, I’d suggest organizing your code in such a way that you can leverage these models – we added them because the raw data can be in a particularly confusing format (specifically variants, options, images).

    That said, if you want raw data for all products being returned, something like this should do the trick. 

    import ShopifyBuy from 'shopify-buy';

const shopClient = ShopifyBuy.buildClient({
  apiKey: 'xxxxxxxxxxxxxxxxxxxx1403c107adc7e',
  domain: 'xxxxxxxxxxxxxxxx.myshopify.com',
  appId: '6',
});

export function fetchAllProducts() {
  return new Promise((resolve, reject) => {
    shopClient.fetchAllProducts()
      .then((products) => {
        resolve(products.map((product) => {
          return product.attrs;
        }));
      }).catch((error) => {
        console.error(new Error('Fetching products error!'));
        reject(error);
      });
  });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search