Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to set header every request? #33

Closed
TinkGu opened this issue Oct 26, 2017 · 5 comments · Fixed by #228
Closed

how to set header every request? #33

TinkGu opened this issue Oct 26, 2017 · 5 comments · Fixed by #228
Milestone

Comments

@TinkGu
Copy link

TinkGu commented Oct 26, 2017

In apolloclient, I can do it like this:

import { ApolloClient, createNetworkInterface } from 'react-apollo';
const networkInterface = createNetworkInterface({
  uri: '/graphql',
});
networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('token');
    req.options.headers.authorization = token ? `Bearer ${token}` : null;
    next();
  }
}]);
const client = new ApolloClient({
  networkInterface,
});

How can I do it in gql-request?

Thanks.

@schickling
Copy link
Contributor

Hi @TinkGu. Thanks a lot for bringing this up. We'll consider this use case for the next version of graphql-request.

For now, a workaround is to re-instantiate a new GraphQLClient whenever you need to change your headers.

@schickling schickling added this to the 2.0 milestone Oct 26, 2017
@Pkmmte
Copy link

Pkmmte commented Mar 27, 2018

How's the progress on this?

I have a GraphQL endpoint that requires client authentication with every call. We use JSON Web Tokens with a limited life span for authentication so we can't just reuse the same one. Creating a new client for every single request seems rather wasteful, in my opinion.

@Dajust
Copy link

Dajust commented Sep 8, 2018

This has been properly done using the new apollo-boost package. See the request option in the configuration section.

@christopher-caldwell
Copy link

christopher-caldwell commented Jul 27, 2020

Is there any way to do this now? I don't want to use Apollo. Is the only way to re-instantiate a client on each request?

Edit: Immediately after posting this I tried:

const client = new GraphQLClient(endPoint, { headers: { Authorization: INITIAL_TOKEN } })

const runQuery = async (query, variables) => {
  client.options.headers = {
    Authorization: NEW_TOKEN,
  }
  try {
    return await client.request(query, variables)
  } catch (error) {
    ...
  }
}

export default runQuery

In my case, I'm referencing a Vuex store, so the property is reactive. You could easily pass, or get the token within this function though.

@moeHaydar
Copy link
Contributor

@christopher-caldwell be careful with what you are doing.
If you are sharing the client, then you might end up in an unwanted state.

moeHaydar added a commit to moeHaydar/graphql-request that referenced this issue Nov 5, 2020
jasonkuhrt pushed a commit that referenced this issue Nov 16, 2020
closes #33

There is a new third parameter on the `request` an `rawRequest` methods for passing headers particular to that request.

For example:

```js
import { GraphQLClient } from 'graphql-request'

const client = new GraphQLClient(endpoint)

const query = gql`
  query getMovie($title: String!) {
    Movie(title: $title) {
      releaseDate
      actors {
        name
      }
    }
  }
`
const variables = {
  title: 'Inception',
}

const requestHeaders = {
  authorization: 'Bearer MY_TOKEN'
}

// Overrides the clients headers with the passed values
const data = await client.request(query, variables, requestHeaders)
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants