Authenticated fetch fails in prod but not in dev

Technical Q&A
1

I’m really confused by the errors in production deployment I am facing, so I’m writing here in hopes that someone can point me to a potential issue. I’ll start with a cliche - everything works fine in dev environment, i.e. on my localhost which I route via a Cloudflare tunnel.

However, when I run my app from a prod server (deployed on Vercel), I get 500 errors for all my authenticated fetches with the following error message:

ERROR	UninitializedContextError: Context has not been properly initialized. Please call the .initialize() method to setup your app context object.

My /api/graphql route has the following function:

export default async function(req: NextApiRequest, res: NextApiResponse) {

  const session = await Shopify.Utils.loadCurrentSession(req, res, false)
  const client = new Shopify.Clients.Graphql(session.shop, session.accessToken)
  const body = await client.query({data: JSON.parse(req.body)}).then(a => a.body)

  res.status(200).json({body})
}

And in my _app.tsx I wrap my component in the Provider from** @Shopify_77 /app-bridge-react**with the following config (all values available):

const config = {
  host,
  forceRedirect: true,
  apiKey: publicRuntimeConfig.shopifyApiPublicKey
}

So, this works perfectly well in dev, but not in prod… Is there perhaps a different Shopify API key used for dev and prod? Or something else? I cannot identify what I’m doing incorrectly.

If anyone from Shopify reads this post, a sample RequestId of a failing request is 6abea1ba-4a20-49d4-9707-ec0ca9964d7c.