v3.x to v4.x Migration Guide

overview chord’s gatsby starter relies on a companion gatsby theme to power its interactions with the chord ecosystem with the release of the new of chord’s new react based sdk, react autonomy , the theme will now be powered by this lower level package as such, the refactored integration of the theme in the starter will contain breaking changes why update? going forward, all new sdk features and fixes will be made to react autonomy (and consumed in gatsby theme autonomy ) the new implementation of our sdk also comes with some great new features! major changes typescript support react autonomy and gatsby theme autonomy have typescript support with type definitions removed ability to import services, selectors and actions via we have removed the ability to consume some internal parts of the redux store in favour of better and more complete hooks 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 environment variables we have added and renamed some environment variables and their corresponding plugin options needed to correctly configure the theme in your starter see the list below removal of sentry we have removed sentry support from our sdks migration steps change your environment variables and/or update the theme configuration in your starter in the newest version of the starter, we have renamed some and added new environment variables env // before gatsby acs api url= gatsby acs store name= gatsby acs brand name= // after gatsby chord oms brand name= // replaces gatsby acs brand name gatsby chord oms store id= // id of the store, provided by chord gatsby chord oms store name= // replaces gatsby acs store name gatsby chord oms id= // uuid of the oms instance, provided by chord gatsby chord oms tenant id= // uuid of the tenant in the oms, provided by chord gatsby chord oms api url= // replaces gatsby acs api url while mirroring these changes is not mandatory, you will need to update the configuration passed from your starter to the gatsby theme autonomy in gatsby plugin js { 	resolve '@chordcommerce/gatsby theme autonomy', 	options { // new configuration 	 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, 	 }, }, } update dependencies update your theme package yarn yarn upgrade @chordcommerce/gatsby theme autonomy@^4 0 0 update react components 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 })} remove dependencies on deprecated exports and deep imports we have simplified the list of methods and hooks exported from gatsby theme autonomy this means that you will no longer have access to previously exported members, like services, selectors, etc for example \ import { selectors } from '@chordcommerce/gatsby theme autonomy' \ import { usepreloadedstate } from '@chordcommerce/gatsby theme autonomy' \ import { logsentryerror } from '@chordcommerce/gatsby theme autonomy' \ import { trackproductviewed } from '@chordcommerce/gatsby theme autonomy/src/redux/actions/analytics' 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 gatsby starter autonomy/src/utils/chord/serialize js provides a couple of convenience methods that serialize the chord cms default content model https //docs chord co/autonomy sdk/autonomy into the correct object shape you can customize these functions as needed, or write your own