How should I configure Apollo Nuxt module to provide the AWS Amplify api key with my queries?

Question

I am trying to communicate from a Nuxt frontend with the nuxt apollo module, to an AWS Amplify graphQL backend.

The backend requires to provide an API key but I don't know how I can set this up in my nuxt.config file.

When I test requests on the API from AWS AppSync, I see in my network tab that the key is provided in the request header as the value of x-api-key key. However, I don't know how to setup nuxt apollo to provide it at each call.

Moreover, if I edit the apollo request to add this header with the correct value, it works as expected.

Has anyone solved this before?

Answer 1

Here's an example from one of my codebases of how to achieve normal connection (for mutations and queries):

notifications: {
    httpEndpoint: `https://${process.env.VUE_APP_WS_GATEWAY_ENDPOINT || 'localhost:4030'}/graphql`,
    httpLinkOptions: {
      headers: {
        'x-api-key': process.env.VUE_APP_WS_API_KEY || 'YOUR_API_KEY',
      },
    },
  },