npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sdk-saleor-juan

v0.5.0

Published

This package contains all queries and mutations that are used in our sample storefront. It can be used for semi-custom or fully-custom (with ability to extend existing queries) storefront solutions.

Downloads

15

Readme

This package contains methods providing Saleor business logic for storefront. It handles Saleor GraphQL queries and mutations, manages Apollo cache and provides internal state to manage popular storefront use cases, like user authentication or checkout process.

Please take a look at sample storefront which already uses Saleor SDK. For specific use cases you may also refer to saleor-sdk/examples.

:warning: Note: Saleor SDK is still under heavy development and its API may change.

Table of Contents

Setup

There are two ways to use SDK - making custom implementation or using React components and hooks, which already has that implementation ready.

Using React

First install SDK as dependency to your project

npm install @saleor/sdk

Use SaleorProvider with passed custom config in a prop. Then use React hooks in any component passed as child to SaleorProvider.

import { SaleorProvider, useAuth } from "@saleor/sdk";

const config = { apiUrl: "http://localhost:8000/graphql/", channel: "" };
const apolloConfig = {
  /* 
    Optional custom Apollo client config.
    Here you may append custom Apollo cache, links or the whole client. 
    You may also use import { createSaleorCache, createSaleorClient, createSaleorLinks } from "@saleor/sdk" to create semi-custom implementation of Apollo.
  */
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <SaleorProvider config={config} apolloConfig={apolloConfig}>
    <App />
  </SaleorProvider>,
  rootElement
);

const App = () => {
  const { authenticated, user, signIn } = useAuth();

  const handleSignIn = async () => {
    const { data, dataError } = await signIn("[email protected]", "admin");

    if (dataError) {
      /**
       * Unable to sign in.
       **/
    } else if (data) {
      /**
       * User signed in successfully.
       **/
    }
  };

  if (authenticated && user) {
    return <span>Signed in as {user.firstName}</span>;
  } else {
    return <button onClick={handleSignIn}>Sign in</button>;
  }
};

Custom implementation

npm install @saleor/sdk

Then use SaleorManager to get SaleorAPI from connect method. This method may also take optional function as an argument, which will be executed every time the SaleorAPI state changes.

const config = { apiUrl: "http://localhost:8000/graphql/", channel: "" };
const apolloConfig = {
  /* 
    Optional custom Apollo client config.
    Here you may append custom Apollo cache, links or the whole client. 
    You may also use import { createSaleorCache, createSaleorClient, createSaleorLinks } from "@saleor/sdk" to create semi-custom implementation of Apollo.
  */
};
const manager = new SaleorManager(config, apolloConfig);

const { api, apolloClient } = await manager.connect(saleorAPI => {
  /* Optional listener to API state change. You may use it to update your app state reactively - e.g. trigger the React context update. */
});

Finally, methods from api might be used:

const { data, dataError } = await api.auth.signIn("[email protected]", "admin");

if (dataError) {
  /**
   * Unable to sign in.
   **/
} else if (data) {
  /**
   * User signed in successfully. Read user object from data or from api.auth.
   **/
  const userData = api.auth.user;
}

Features

We provide an API with methods and fields, performing one, scoped type of work. You may access them straight from SaleorAPI or use React hooks, depending on which setup do you select.

| API object | React hook | Description | | :---------------------- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | | SaleorAPI.auth | useAuth() | Handles user authentication and stores data about the currently signed in user. | | SaleorAPI.cart | useCart() | Collects products to cart and calculates their prices. | | SaleorAPI.checkout | useCheckout() | Uses cart and handles the whole checkout process. | | SaleorAPI.products | useProductDetails(), useProductList() | Obtains products. | | SaleorAPI.collections | useCollectionDetails(), useCollectionList() | Obtains collections. | | SaleorAPI.categories | useCategoryDetails(), useCategoryList(), useCategoryAncestorsList(), useCategoryChildrenList() | Obtains categories. |

Local development

Our aim it to build SDK, highly configurable, as a separate package, which you will not require modifications. Although if you want to alter the project, especially if you want to contribute, it is possible to develop storefront and SDK simultaneously. To do this, you need to link it to the storefront's project.

$ cd lib
$ npm link
$ cd <your storefront path>
$ npm link @saleor/sdk

Notice that in our example storefront webpack is configured to always resolve react to ./node_modules/react. It may seem redundant for the most use cases, but helps in sdk's local development, because it overcomes npm's limitations regarding peer dependencies hoisting, explicitly telling webpack to always have one and only copy of react.