---
title: React SDK Migration Guide
slug: oms/react-sdk-migration-guide
docTags: 
createdAt: 2022-11-07T21:26:22.000Z
---

### Overview

Chord’s [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy/) used to include React hooks like `useCart` and `useAnalytics` in the `src/hooks/actions` directory. The release of Chord’s new [React](docId\:EwXkRz0JhH0zPphIkkcrI),  `react-autonomy`, allows these hooks to be imported from the `react-autonomy` package instead. The [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy/) has been updated to use this new SDK. If you developed a website based on a previous version of the Next.js starter, you may want to update your website code to use `react-autonomy`.

**Why update?**

Going forward, all SDK features and fixes will be made to `react-autonomy`. `react-autonomy` also comes with some great new features!

### Major Changes

**Typescript support**

`react-autonomy` has complete Typescript support with type definitions.

**Removed dependency on CMS product catalog**

Previously, all products in the CMS had to belong to a single catalog. A `bootstrapReduxStore` query fetched the catalog from the CMS on every page, and Redux stored the catalog and used it to add product metadata, like descriptions and images, to product-related Segment tracking events. `react-autonomy` removes this dependency on a product catalog and instead adds an optional `product` argument to some SDK methods, allowing you to provide the product from the CMS and control the CMS query.

**JSDoc documentation**

`react-autonomy` includes function documentation following the [JSDoc](https://jsdoc.app/) specification.

**Improved hooks and methods**

Names, parameters, and behavior has been standardized across the SDK.

### Migration Steps

Upgrading a Next.js site to use `react-autonomy` requires making the following broad changes. You can reference the [starter diff](https://github.com/chordcommerce/nextjs-starter-autonomy/commit/64703e37bf8e2dbba8ab230a59fbcb4c0adb7be2#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) to see the complete list of changes when we migrated the starter.

### Update dependencies

Remove these packages (they’re now dependencies of `react-autonomy`):

:::CodeblockTabs
yarn

```shell
yarn remove @chordcommerce/chord-js-autonomy next-redux-wrapper redux-devtools-extension redux-thunk
```
:::

Add these packages:

:::CodeblockTabs
yarn

```shell
yarn add @chordcommerce/react-autonomy @chordcommerce/chord-magic
```
:::

### Update queries

Delete the `bootstrapReduxStore` query, because it’s no longer used.

Delete any queries referencing `bootstrapReduxStore`. For example, the article query at `packages/nextjs-starter-autonomy/graphql-cms/queries/article.js` used to export both a `getArticle` function and a `getArticleWithReduxState` function. The `getArticleWithReduxState` function should be deleted.

Delete references to `get*WithReduxState` queries in page templates. References to `reduxWrapper` should be replaced with a new utility, `nextContentWrapper`, that we’ve included in the Next.js starter to facilitate fetching the same content on every page (for example, notification banner content).

Here’s an example of how we’ve converted `nextjs-starter-autonomy/pages/articles/[slug].js`:

```javascript
import Metadata from '~/components/Metadata'
import ArticlePage from '~/components/Article/Page'
- import {
-   getArticles,
-   getArticleWithReduxState
- } from '../../graphql-cms/queries'
- import { wrapper as reduxWrapper } from '~/redux/store'
+ import { getArticles, getArticle } from 'graphql-cms/queries'
+ import nextContentWrapper from 'graphql-cms/nextContentWrapper'

export async function getStaticPaths() {
  const articles = await getArticles()
  const paths = articles.map(a => `/articles/${a.slug}`) || []
  return {
    paths,
    fallback: false
  }
}

- export const getStaticProps = reduxWrapper.getStaticProps(store =>
+ export const getStaticProps = nextContentWrapper.getStaticProps(
  async ({ params }) => {
    const { slug } = params
    return {
      props: {
-         article: await getArticleWithReduxState({ slug }, store)
+         article: await getArticle({ slug })
      }
    }
  }
```

### Add `<ChordProvider>`

Add the `ChordProvider` component, and wrap the application with it in `_app.js`.

### Delete deprecated files

`react-autonomy` includes React hooks and state management, so a lot of files previously included in the Next.js starter can be deleted. Delete these directories:

- `src/redux`
- `src/services`
- `src/hooks/actions` (except for `src/hooks/actions/use-translate.js`)

### Update React components

Hooks should be imported from `@chordcommerce/react-autonomy` instead of `~/hooks/actions`:

```javascript
- import { useCart } from '~/hooks/actions'
+ import { useCart } from '@chordcommerce/react-autonomy'
```

Hooks and method names have changed, so this will need to be updated throughout your code. Reference the documentation to see how they’ve changed. For example:

```javascript
- onClick={() => trackClickProduct(slug)}
+ onClick={() => trackProductClicked({ product: serializedProduct })}
```

### Add product serializer

As mentioned above, some methods now have a `product` argument you can include to add details about the product to the Segment tracking event. [`nextjs-starter-autonomy/src/utils/chord/serialize.js`](https://github.com/chordcommerce/nextjs-starter-autonomy/blob/main/src/utils/chord/serialize.js) provides a couple of convenience methods that serialize the Chord CMS [Content Models](docId\:gojr-A1zivmF6EYSr-M4c) into the correct object shape. You can customize these functions as needed, or write your own.