javascript - Setting Apollo client header dynamically is not working - Stack Overflow

admin管理员组

文章数量:1180531

I am trying to set the header of Apollo client dynamically according to official doc, but I am getting an error:

    TypeError: (0 , _apollo.default) is not a function

This is my apollo.js

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { AsyncStorage } from 'react-native';

const httpLink = createHttpLink({
    uri: 'http://192.168.2.4:8000/api/',
});

const authLink = setContext((_, { headers }) => {
    const token = AsyncStorage.getItem('token');

    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

export default client; 

UPDATE

I am adding App.js:

import { ApolloProvider } from 'react-apollo';
import Routes from './app/config/routes';
import makeApolloClient from './app/config/apollo';

export default function App() {
  const client = makeApolloClient();

  return (
    <ApolloProvider client={client}>
      <Routes />
    </ApolloProvider>);
}

How can I solve this issue?

I am trying to set the header of Apollo client dynamically according to official doc, but I am getting an error:

    TypeError: (0 , _apollo.default) is not a function

This is my apollo.js

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { AsyncStorage } from 'react-native';

const httpLink = createHttpLink({
    uri: 'http://192.168.2.4:8000/api/',
});

const authLink = setContext((_, { headers }) => {
    const token = AsyncStorage.getItem('token');

    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

export default client; 

UPDATE

I am adding App.js:

import { ApolloProvider } from 'react-apollo';
import Routes from './app/config/routes';
import makeApolloClient from './app/config/apollo';

export default function App() {
  const client = makeApolloClient();

  return (
    <ApolloProvider client={client}>
      <Routes />
    </ApolloProvider>);
}

How can I solve this issue?

• javascript
• react-native
• graphql

Share Improve this question Follow edited Apr 27, 2022 at 4:38 Emile Bergeron 17.4k55 gold badges8484 silver badges131131 bronze badges asked Apr 29, 2020 at 6:43 VladimírVladimír 74922 gold badges99 silver badges2828 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 16

Apollo usequery has a context option that allows you to dynamically change or update the values of the header object.

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: "/graphql"
});

client.query({
  query: MY_QUERY,
  context: {
    // example of setting the headers with context per operation
    headers: {
      special: "Special header value"
    }
  }
});

The code above was copied from the Apollo docs. To find out more check out https://www.apollographql.com/docs/react/networking/advanced-http-networking/#overriding-options

Storing JWT in local storage and session storage is not secure!
Use cookie with http-only enabled!

This code automatically reads and sets Authorization header after localStorage.setItem('jwt_token', jwt_token) in SignIn mutation.

import {ApolloClient, createHttpLink} from "@apollo/client";
import {setContext} from "@apollo/client/link/context";
import {InMemoryCache} from "@apollo/client";

const apolloHttpLink = createHttpLink({
    uri: process.env.REACT_APP_APOLLO_SERVER_URI || 'http://localhost/graphql',
})

const apolloAuthContext = setContext(async (_, {headers}) => {
    const jwt_token = localStorage.getItem('jwt_token')
    return {
        headers: {
            ...headers,
            Authorization: jwt_token ? `Bearer ${jwt_token}` : ''
        },
    }
})

export const apolloClient = new ApolloClient({
    link: apolloAuthContext.concat(apolloHttpLink),
    cache: new InMemoryCache(),
})

makeApolloClient isnt a function, the file just exports an instance of the apollo client. Just import it as if it's a variable.

import client from './app/config/apollo'

export default function App() {
    return (
        <ApolloProvider client={client}>
          <Routes />
        </ApolloProvider>
    );
}

Try this

const authLink = setContext(async (_, { headers }) => {
    const token = await AsyncStorage.getItem('token');

    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

In React Native, AsyncStorage methods are async not like localStorage in Web. And the other methods doesn't work, except this.

https://github.com/apollographql/apollo-client/issues/2441#issuecomment-718502308

本文标签： javascriptSetting Apollo client header dynamically is not workingStack Overflow