React SDK Migration Guide

overview chord’s next js starter 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 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 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 ) yarn yarn remove @chordcommerce/chord js autonomy next redux wrapper redux devtools extension redux thunk add these packages yarn 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 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 \ 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 \ 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