react-shopify-drop (not production ready)

react-shopify-drop is a react library for interacting with shopify's storefront api.

⚠️ Status: Alpha — please don't use this in production unless willing to contribute to the library.

This is a private package from basement.studio.

Installation

Use the package manager yarn to install react-shopify-drop.

yarn add react-shopify-drop

First steps

Set up

app.js

import {
  createStorefrontClient,
  StorefrontProvider
} from 'react-shopify-drop';

export const storefrontClient = createStorefrontClient({
  accessToken: 'storefront-app-access-token',
  endpoint: 'storefront-app-graphql-endpoint',
});

const App = () => (
  <StorefrontProvider
    appCartId="app-name-cart-id"
    client={storefrontClient}
  >
    <MyApp />
  </StorefrontProvider>
);

export default App;

Usage

component.js

Under the hood, the <StorefrontProvider /> creates a friendly API with a set of useful properties to interact with your shopify application

import { useStorefront } from 'react-shopify-drop';

const Component = () => {
  const api = useStorefront();

  return <div />;
};

API properties

The API comes in form of an object with the following properties:

cart: object

An object which contains the shopify users cart.

cartItemsCount: number

The amount of items in the current cart.

cartToggleState: object

A toggle state to help manage the cart UI state (opened / closed).

• isOn: boolean - Defines the cart UI state.
• handleToggle: function - Toggles the cart UI state.
• handleOn: function - Sets the cart UI state as on (opened).
• handleOff: function - Sets the cart UI state as on (closed).

errors: object

An object containing a set of possible errors

• createCartError: Error | null
• addLineItemError: Error | null
• updateLineItemError: Error | null
• removeLineItemError: Error | null

onAddLineItem: function ({ merchandiseId: string, quantity: number }) => Promise<void>

Adds an item to the shopify cart.

onUpdateLineItem: function ({ merchandiseId: string, quantity: number }) => Promise<void>

Updates an item inside the shopify cart.

onRemoveLineItem: function ({ merchandiseId: string }) => Promise<void>

Removes an item from the shopify cart.

Using the full Storefront client

In the other hand, you can also export the created client and import it outside your application frontend (f.e: next.js page getStaticProps function)

import { storefrontClient } from '~/pages/_app.js';

export const getStaticProps = async () => {
  const { product } = await storefrontClient.GetProductByHandle({ handle: 'my-product' });

  return {
    props: {
      product
    },
    revalidate: 1
  };
};

Client properties

CreateCart: function (variables?: CreateCartMutationVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<CreateCartMutation>

Creates a new cart.

CreateCartWithLines: function (variables: CreateCartWithLinesMutationVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<CreateCartWithLinesMutation>

Creates a new cart with line.

AddLineItem: function (variables: AddLineItemMutationVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<AddLineItemMutation>

Adds an item to a line.

UpdateLineItem: function (variables: UpdateLineItemMutationVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<UpdateLineItemMutation>

Updates a line.

RemoveLineItem: function (variables: RemoveLineItemMutationVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<RemoveLineItemMutation>

Removes an item from a line.

FetchCart: function (variables: FetchCartQueryVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<FetchCartQuery>

Fetches an already created cart.

GetProductByHandle: function (variables: GetProductByHandleQueryVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<GetProductByHandleQuery>

Fetches a product based on a handle.

GetAllProducts: function (variables?: GetAllProductsQueryVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<GetAllProductsQuery>

Fetches all products on a shop.

GetProductsOnCollection: function (variables: GetProductsOnCollectionQueryVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<GetProductsOnCollectionQuery>

Fetches all collection products on a shop.

GetCollections: function (variables?: GetCollectionsQueryVariables, requestHeaders?: Dom.RequestInit["headers"]) => Promise<GetCollectionsQuery>

Fetches all collections.

Request: function (query: string, variables?: Record<string, any>) => Promise<any>

Executes a custom query.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT