How to use shopify-buy - 10 common examples

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Client from 'shopify-buy';
import { Provider } from 'react-redux';
import store from './store';
import './styles/shopify.css';

// build shopify client
const client = Client.buildClient({
    storefrontAccessToken: 'YOUR_SHOPIFY_STOREFRONT_ACCESS_TOKEN',
    domain: 'YOUR_MYSHOPIFY_STORE_URL'
});
store.dispatch({type: 'CLIENT_CREATED', payload: client});

// buildClient() is synchronous, so we can call all these after!
client.product.fetchAll().then((res) => {
  store.dispatch({type: 'PRODUCTS_FOUND', payload: res});
});
client.checkout.create().then((res) => {
  store.dispatch({type: 'CHECKOUT_FOUND', payload: res});
});
client.shop.fetchInfo().then((res) => {
  store.dispatch({type: 'SHOP_FOUND', payload: res});
});

test('it generates unique ids', function (assert) {
  assert.expect(1);
  let i;
  const items = [];

  for (i = 0; i < 1000; i++) {
    items.push({});
  }

  const ids = items.map(item => {
    return setGuidFor(item);
  });

  const uniqueIds = uniq(ids);

  assert.deepEqual(uniqueIds, ids, 'all ids should be unique');
});

true,
    true,
    true,
    false,
    false,
    {},
    dupedObject,
    dupedObject
  ];

  const ids = items.map(item => {
    return setGuidFor(item);
  });

  const uniqueIds = uniq(ids);
  const uniqueItems = uniq(items);

  assert.equal(uniqueIds.length, uniqueItems.length, 'the number of unique ids matches the number of unique items');
});

'duplicate words',
    true,
    true,
    true,
    false,
    false,
    {},
    dupedObject,
    dupedObject
  ];

  const ids = items.map(item => {
    return setGuidFor(item);
  });

  const uniqueIds = uniq(ids);
  const uniqueItems = uniq(items);

  assert.equal(uniqueIds.length, uniqueItems.length, 'the number of unique ids matches the number of unique items');
});

const ids = items.map(item => {
    return setGuidFor(item);
  });

import ShopifyBuy from 'shopify-buy/dist/shopify-buy.umd.polyfilled';
import UI from './ui';
import productTemplates from './templates/product';

ShopifyBuy.UI = {
  ui: null,

  init(client, integrations = {}, styleOverrides) {
    if (!this.ui) {
      this.ui = new UI(client, integrations, styleOverrides);
    }
    return this.ui;
  },

  adapterHelpers: {
    templates: {
      product: productTemplates,
    },
  },

  UIConstructor: UI,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Client from 'shopify-buy';
import '../../shared/app.css';

const client = Client.buildClient({
  storefrontAccessToken: 'dd4d4dc146542ba7763305d71d1b3d38',
  domain: 'graphql.myshopify.com'
});

ReactDOM.render(
  ,
  document.getElementById('root')
);

import React from 'react'
import Client from 'shopify-buy'

const client = Client.buildClient({
  storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  domain: `${process.env.SHOP_NAME}.myshopify.com`,
})

export const defaultStoreContext = {
  client,
  adding: true,
  checkout: { lineItems: [] },
  products: [],
  shop: {},
  filteredType: 'all',
  filteredSort: 'featured',
  addVariantToCart: () => { },
  addVariantToCartAndBuyNow: () => { },
  removeLineItem: () => { },
  updateLineItem: () => { },

import fetch from 'node-fetch';
import Client from 'shopify-buy';

global.fetch = fetch;

const client = Client.buildClient({
  storefrontAccessToken: '20ef0127c6c37cee73dd149879a379a8',
  domain: 'faheemnusrat.com'
});

export default client;

import React, { useState, useEffect } from 'react'
import Client from 'shopify-buy'

import Context from '~/context/StoreContext'

const client = Client.buildClient({
  storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  domain: `${process.env.SHOP_NAME}.myshopify.com`,
})

const ContextProvider = ({ children }) => {
  let initialStoreState = {
    client,
    adding: false,
    checkout: { lineItems: [] },
    products: [],
    shop: {},
  }

  const [store, updateStore] = useState(initialStoreState)

  useEffect(() => {