Apollo-module: how set custom headers

[gomezmark]

apollo: {
  "x-token": "hash",
  "x-auth-token": "hash",
  "x-refresh-token":  "hash",
  headers: {
  },
  clientConfigs: {
    default: {
      // required
      httpEndpoint: "localhost:4000"
    }
  }
}

I also tried this one

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'localhost:4000',
      httpLinkOptions: {
        headers: {
           'x-token': 'hash',
           'x-auth-token': 'hash',
           'x-refresh-token':  'hash'
        }
      }
    }
  }
}

[cmty[bot]]

This issue as been imported as question since it does not respect apollo-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/apollo-module/issues/c157.

[ryanhmaas]

If you want custom headers, something like this will work:

nuxt.config.js

apollo: {
    clientConfigs: {
      default: '~/apollo/client-configs/default.js'
    }
  }

apollo/client-configs/default.js

export default function(context){
    return {
        httpEndpoint: 'yourURLHere',
        httpLinkOptions: {
            headers:{
                'X-Custom-Header': 'value'
            }
        }
    }
}

I have it working with Shopify's API which requires a custom header.

[dailycommit]

Is it possible to add a dynamic header ?
I am having trouble with Hasura, I need to determine some user roles for access control and these roles need to be added to the header like
x-hasura-role : "user" or x-hasura-role: "admin" etc.
according to the logged in user can be dozens of roles so I have to change them dynamically.

[mfdeux]

@dailycommit Did you find the solution? You can add request-specific context, for example:

apolloClient.query({
    query: GRAPHQL_QUERY,
    variables: {
        var1: "this is a variable"
    },
    context: {
        headers: {
            X-Hasura-Role: "public"
        }
    }
})

[dailycommit]

hey @mfdeux, yes I found how to do it, thank you 😊👨‍💻

[Youhan]

Just found out you could also do this if you want to dynamically change the endpoint:

apolloClient.query({
    query: GRAPHQL_QUERY,
    variables: {
        var1: "this is a variable"
    },
    context: {
        uri: "https://YOUR_CUSTOM_ENDPOINT",
    }
})

[LermanR]

@dailycommit @Youhan do you know how to use dynamic header with subscriptions?

[dmitrijt9]

Why it's not possible to pass custom variables in smart queries?

At least it's not in documentation https://github.com/vuejs/vue-apollo/blob/master/docs/api/smart-query.md

[dmitrijt9]

Why it's not possible to pass custom variables in smart queries?

At least it's not in documentation https://github.com/vuejs/vue-apollo/blob/master/docs/api/smart-query.md

Ok. I'm taking this back. You can add custom headers in same way like @mfdeux mentioned above even if it's not in docs.

Just keep in mind, that if you want to use for example a vuex store for setting the header then the context must be a function so that you can reference this.

Example:

context() {
    return {
        headers: {
            'X-Examlpe-Header': this.$store.state.example.data
        }
    }
}