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

@kibocommerce/graphql-client

v1.0.3-beta.10

Published

Kibo Apollo Client for TypeScript

Downloads

408

Readme

Features

Installation

To install:

npm install @kibocommerce/graphql-client

Configuration

The following data is required to configure the Kibo Apollo Client, when using the library outside of Kibo's API Extensions Framework (ArcJS):

  • apiHost - Your Kibo Commerce API Host.
  • authHost - Kibo Commerce Authentication Host Server. It is used to request an access token from Kibo Commerce OAuth 2.0 service. Production and Production sandbox, use home.mozu.com
  • clientId - Unique Application (Client) ID of your Application
  • sharedSecret - Secret API key used to authenticate application. Viewable from your Kibo eCommerce Dev Center

Visit Kibo documentation for more details on API authentication

Based on the config, this package will handle Authenticating your application against the Kibo API.

API Configuration via Environment Variables

Set the following environment variables:

KIBO_API_HOST=t1234-s1234.sandbox.mozu.com
KIBO_AUTH_HOST=home.mozu.com
KIBO_CLIENT_ID=KIBO_APP.1.0.0.Release
KIBO_SHARED_SECRET=12345_Secret

Create a client instance:

import { CreateApolloClient } from '@kibocommerce/graphql-client';

const client = CreateApolloClient();

API Configuration via function arguments

For environments where you are unable to set environment variables, the API configuration can be passed to the CreateApolloClient call

import { CreateApolloClient } from '@kibocommerce/graphql-client';

const client = CreateApolloClient({
    api: {
        apiHost: "home.mozu.com"
        authHost: "t1234-s1234.sandbox.mozu.com",
        clientId: "KIBO_APP.1.0.0.Release",
        sharedSecret: "12345_Secret",        
    }
});

Basic Usage

import { CreateApolloClient } from '@kibocommerce/graphql-client';

const client = CreateApolloClient();

const query = gql`query getProduct($productCode: String) {
  product(productCode:$productCode){
    productCode
  }
}`;
const variables = {
    productId: "PROD-123"
};
const { data } = await client.query({  query, variables })

Authentication Hooks

Hooks can be provided to the CreateApolloClient method when creating an apollo client that will execute on Auth Ticket change, read and remove.

export interface KiboApolloClientConfig {
  api: KiboApolloApiConfig;
  clientAuthHooks: {
    onTicketChange: (authTicket: UserAuthTicket) => void;
    onTicketRead: () => UserAuthTicket;
    onTicketRemove: () => void;
  };
}

The Auth ticket is passed as requests to the GraphQL server as a customer x-vol-user-claims header and used to identify / authorize the user. This auth ticket works for both authenticated and anonymous shoppers. Allowing for guest checkout scenarios.

These built in hooks allow customization on storage methods for the users auth ticket.

import { CreateApolloClient } from '@kibocommerce/graphql-client';

let currentTicket = getUserAuthorizationFromCooke();
const clientAuthHooks = {
    onTicketChange: (authTicket) => {
        currentTicket = authTicket;
        setUserAuthorizationCookie(authTicket);
    },
    onTicketRead: () => {
        return currentTicket;
    },
    onTicketRemove: () => {
        removeUserAuthorizationCookie();
    }
}

const client = CreateApolloClient({ clientAuthHooks });

const query = gql`query getCurrentCart {
    currentCart {
        total
    }
}`

const { data } = await client.query({ query });

Override Headers per Request

Headers can be overridden per request by providing a headers object with key-value pairs (header name and header value) to the query/mutation context object

Example to remove a Shoppers Auth Claim for a single request


import { CreateApolloClient } from '@kibocommerce/graphql-client';

const client = CreateApolloClient();

const query = gql`query getCurrentCart {
    currentCart {
        total
    }
}`
const { data } = await client.query({
    query,
    context: {
      headers: {
        'x-vol-user-claims': null
      }
    }
  });

Use inside Kibo's API Extensions Framework (ArcJS)

When using this package inside of Kibo's API Extensions Framework (ArcJS), the API config and Auth hooks are no longer required to create a client instance. Instead the API config will be handled automatically based on the executing environment context and the Shopper authentication will be re-used based on the executing Arc API action (when available). Any API config parameters or auth hooks passed to the CreateApolloClient function will simply be ignored.

// Arc.JS Action
import { CreateApolloClient } from '@kibocommerce/graphql-client';

const client = CreateApolloClient();
const query = gql`query getCurrentCart {
    currentCart {
        total
    }
}`
const { data } = await client.query({ query });

Proxy Requests in Development

If you would like to see the requests to the Apollo GraphQL server, you need to set the HTTPS_PROXY environment variable to whatever proxy application you are using.

HTTPS_PROXY="http://127.0.0.1:8866"

Note

If this client library is used in a browser environment, ensure your Kibo Application is configured with Storefront only permsisions as the API Key and secret will be visible.