> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/developer-tools/gatsby/sdk-reference-4-x.md).

# SDK Reference 4.x

## Introduction

The [React](/chord-oms/developer-tools/react.md) can be installed via a Gatsby theme. It's available as an npm package, `@chordcommerce/gatsby-theme-autonomy`, via GitHub Packages.

Despite the name, this package does not provide a visual theme. To quote from the [Gatsby documentation](https://www.gatsbyjs.com/docs/themes/what-are-gatsby-themes/):

{% hint style="info" %}
Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project!
{% endhint %}

`gatsby-theme-autonomy` includes the [React](/chord-oms/developer-tools/react.md), a set of React hooks that offer an easy way to interact with Chord's order management system, for common operations like adding items to a cart. These hooks provide access to SDK methods that handle communication with Chord's order management system and keep the site's Redux state up to date. They also automatically send tracking events to Segment.

The theme also pre-configures your Gatsby site with a number of useful ecommerce features like sitemaps and internationalization support.

## Installation

{% tabs %}
{% tab title="yarn" %}

```shell
npx install-peerdeps --yarn @chordcommerce/gatsby-theme-autonomy
```

{% endtab %}

{% tab title="npm" %}

```shell
npx install-peerdeps @chordcommerce/gatsby-theme-autonomy
```

{% endtab %}
{% endtabs %}

This theme uses a significant amount of Gatsby plugins and transformers. We provide these as peer dependencies instead of vendoring them so that you can upgrade them at your own pace. A couple of major things to keep in mind as you upgrade them:

1. First party Gatsby plugins and Gatsby itself should have the same minor version to ensure they are compatible (if you are on the current release of Gatsby). For example, we have `gatsby@4.13.1`, `gatsby-plugin-image@2.13.0` and `gatsby-plugin-sitemap@5.13.0`. Note that all of them share a minor version of 13 while the major and patch versions differ. This isn't a hard and fast rule but something that you should strive to maintain where possible.
2. `gatsby-plugin-sharp` and `gatsby-transformer-sharp` must be the same version. This is because they bundle a binary that having multiple versions of will break builds.

After installing the package, add the following configuration to your `gatsby-config.js` file:

```javascript
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-autonomy',
      options: {
        contentfulConfig: {
          spaceId: process.env.CONTENTFUL_SPACE_ID,
          accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
          host: process.env.CONTENTFUL_API_URL,
          environment: process.env.CONTENTFUL_ENVIRONMENT,
        },
        omsConfig: {
          brandName: process.env.GATSBY_CHORD_OMS_BRAND_NAME,
          storeId: process.env.GATSBY_CHORD_OMS_STORE_ID,
          omsId: process.env.GATSBY_CHORD_OMS_ID,
          tenantId: process.env.GATSBY_CHORD_OMS_TENANT_ID,
          domain: process.env.GATSBY_CHORD_OMS_API_URL,
        },
        intlConfig: {
          languages: [`en-US`],
          defaultLanguage: `en-US`,
          path: path.resolve(__dirname, 'src/intl'),
        },
        siteMetadata: {
          title: `Chord Commerce Starter`,
          siteUrl: `https://www.chord.co`,
          description: `A starter kit.`,
          social: {
            facebook: 'chordcommerce',
            instagram: 'chordcommerce',
            pinterest: 'chordcommerce',
          },
        },
      },
    },
  ],
}
```

Run your site as usual, using `yarn start`.

## Hooks Reference

| Hook                                                                                | Description                                                                                                             |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| [useAnalytics](https://docs-beta.chord.co/chord-ui/function-useanalytics)           | Provides support for sending UI-related tracking events to Segment.                                                     |
| [useAuth](https://docs-beta.chord.co/chord-ui/function-useauth)                     | Provides support for user authentication. Chord supports passwordless authentication with [Magic](https://magic.link/). |
| [useCart](https://docs-beta.chord.co/chord-ui/function-usecart)                     | Returns the current shopping cart, and functions for creating and interacting with the shopping cart.                   |
| [useCheckout](https://docs-beta.chord.co/chord-ui/function-usecheckout)             | Provides support for checkout.                                                                                          |
| [useProduct](https://docs-beta.chord.co/chord-ui/function-useproduct)               | Provides support for interacting with products.                                                                         |
| [useSubscription](https://docs-beta.chord.co/chord-ui/function-usesubscription)     | Provides support for managing user subscriptions.                                                                       |
| [useSubscriptions](https://docs-beta.chord.co/chord-ui/function-usesubscriptions)   | Returns the current user's subscriptions.                                                                               |
| [useTranslate](/chord-oms/developer-tools/gatsby/sdk-reference-4-x/usetranslate.md) | Provides support for internationalization                                                                               |
| [useUser](https://docs-beta.chord.co/chord-ui/function-useuser)                     | Returns the current user, and functions for loading data about the user.                                                |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/developer-tools/gatsby/sdk-reference-4-x.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.