Next.js Shopify Storefront API Upgrade Guide

8min
Chord released package updates with support for the Shopify Storefront API version 2022-07. Prior to this release, these packages used the oldest available version of the Storefront API.
Upgrading these packages is strongly advised because two breaking changes will impact users around January 1, 2023, when Shopify starts serving the version 2022-04 to users. 
New Releases
@chordcommerce/[email protected] 
@chordcommerce/[email protected] 
@chordcommerce/[email protected] 
Major Changes
These releases upgrade the Shopify Storefront API version to 2022-07. This Storefront API version includes two breaking changes:
Shopify IDs are no longer Base64 encoded.
presentmentPrices has been removed from the API and will cause an error if included in the GraphQL query. Shopify now supports multi-currency in a different way.
These are the only changes in this releases.
Upgrade Guide
1. Update dependencies
Update @chordcommerce/chord-js-performance and @chordcommerce/chord-js-auth-shopify to ^2.0.0
If you have @chordcommerce/product-rss-feed  as a dependency, update to ^3.0.0
2. Remove Shopify ID encoding/decoding logic
As of the 2022-04 Shopify Storefront API release, Shopify IDs are no longer Base64 encoded. You may have code in your website that is encoding and/or decoding IDs. This code can be removed.
Previous versions of nextjs-starter-performance  included a utility file at src/utils/shopify/index.js with two functions, encodeShopifyVariantID  and decodeShopifyID. If you're using these functions in your website code, update the code as described below.
Replace this code:
JS
export const encodeShopifyVariantID = (id) =>
  Buffer.from(`gid://shopify/ProductVariant/${id}`).toString('base64')

export const decodeShopifyID = (base64Id) => {
  const shopifyId = Buffer.from(base64Id, 'base64').toString('utf-8')
  const [id] = shopifyId.split('/').reverse()
  return id
}
export const encodeShopifyVariantID = (id) =>
  Buffer.from(`gid://shopify/ProductVariant/${id}`).toString('base64')

export const decodeShopifyID = (base64Id) => {
  const shopifyId = Buffer.from(base64Id, 'base64').toString('utf-8')
  const [id] = shopifyId.split('/').reverse()
  return id
}
﻿
With this code:
JS
export const encodeShopifyVariantID = (id) =>
  `gid://shopify/ProductVariant/${id}`

export const decodeShopifyID = (shopifyId) => {
  const [id] = shopifyId.split('/').reverse()
  return id
}
export const encodeShopifyVariantID = (id) =>
  `gid://shopify/ProductVariant/${id}`

export const decodeShopifyID = (shopifyId) => {
  const [id] = shopifyId.split('/').reverse()
  return id
}
﻿
3. Remove any use of the field presentmentPrices 
Shopify no longer supports the deprecated field presentmentPrices.
4. Update any references to the Shopify Storefront API version
You may have references to the Shopify Storefront API version in your website code. You must update your code to use at least Storefront API version 2022-04, because that will be the oldest version that Shopify supports as of January 1, 2023.
We suggest updating all Storefront API versions to 2022-07 for consistency. Searching your code for the Shopify Storefront API, myshopify.com/api, might be helpful. To update the version, just change the version in the Storefront API path. For example, this:
JS
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2021-01/graphql.json`
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2021-01/graphql.json`
﻿
Should be replaced with this:
JS
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2022-07/graphql.json`
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2022-07/graphql.json`
﻿
If you are querying the Storefront API without using 
@chordcommerce/chord-js-performance
, be sure to check for breaking changes in 
 before upgrading the Storefront API version.
Example Migration
See an example of migrating a Next.js site by checking out how Chord migrated the Next.js starter kit.
Updated 19 Apr 2023
Did this page help you?
Guides
Next.js Shopify Storefront API Upgrade Guide