Cache a Shopify Storefront Api Response with Workbox

Shopify exposes a storefront api to query data for headless e-commerce sites. The api is graphql based and every query in graphql is a POST request.

If the following url exists to query the storefront api:

https://some-store.myshopify.com/api/2024-01/graphql.json

A sample usage for a single product query would look like this

fetch('https://some-store.myshopify.com/api/2024-01/graphql.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': '84178bc7c741a43bcg7c64308dbc6691'
  },
  body: JSON.stringify({
    query: `{
      product(id: "1") {
        title
        price
      }
    }`

  })
})

I have a setup with workbox like this, note the third argument 'POST'. According to the worbox docs for routing

All routes by default are assumed to be for GET requests.
If you would like to route other requests, like a POST request, you need to define the method when registering the route, like so:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\.json'), handlerCb, 'POST');

I have the RegExp route setup and included the third parameter and I get an error in the console anyways attempt-to-cache-non-get-request: Unable to cache ‘https://some-store.myshopify.com/api/2024-01/graphql.json’ because it is a ‘POST’ request and only ‘GET’ requests can be cached

import { registerRoute } from 'workbox-routing'

registerRoute(
  /^https://headless-test-dev.myshopify.com/api/2024-01/graphql.json/,
  new NetworkFirst({
    cacheName: 'storefront-api'
  }),
  'POST'
)

If anyone can explain what I am doing wrong here it would be great.