Extending GraphQL queries not working

[sleepon-official]

What is your question / Please describe your issue

I refer to the VSF documentation for Extending GraphQL queries to debug my code. But it doesn't seem to work, am I missing something?

// middleware.config.js

module.exports = {
  integrations: {
    shopify: {
      location: '@vue-storefront/shopify-api/server',
      configuration: {...},
      customQueries: {
        'my-products-query': ({ query, variables, metadata }) => {
          variables.locale = 'de'
          variables.size = metadata.size
          return { query, variables }
        }
      }
    }
  }
}

// test_page.vue

const { search, products } = useProduct()

search({
      customQuery: {
        products: 'my-products-query',
        metadata: { size: 'xl' }
      }
    })

Open the test_page page in your browser:

The getProduct request body is issued as follows, and nothing is returned:

[{
  "localeInfo":{
     "cur":"en","default":"us"}
   },
  {"products":
    "my-products-query",
    "metadata":{"size":"xl"}
}]

What version of shopify integration are you using?

1.1.2

Code of Conduct

• [X] I agree to follow this project's Code of Conduct