React hooks + @apollo/hooks

Hi, how would the React wrapper work in combination with @apollo/hooks?

At some point in my application, I would like to add an additional header with my access token if the user decided to log in. Some graphql queries should be available when the user isn’t logged in. So I have a scenario where I want to add the header only at a later point.

More to the point, consider the following code:

import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";

const setAuthorizationLink = setContext((request, previousContext) => {
  // get hook??
  // get accessToken somehow???
  return {
    headers: { authorization: "1234" }
  };
});

export function createApolloClient() {
  const httpLink = new HttpLink({
    uri: "/api/graphql"
  });

  const link = setAuthorizationLink.concat(httpLink);

  return new ApolloClient({
    link,
    cache: new InMemoryCache()
  });
}

How do I get my bearer token inside the setContext callback?

[nojaf]

Found another way:

import { Auth0Provider } from "./react-auth0-wrapper.js"
import { ApolloProvider } from "@apollo/react-hooks";
import { createApolloClient } from "./helper.js";

const ApolloWrapper = ({children}) => {
   const { getTokenSilently, loading  = useAuth0();
   const apolloClient = useMemo(() => createApolloClient(getTokenSilently), [loading]);
   return <ApolloProvider client={apolloClient>{children</ApolloProvider>
}

const App = () => {
   return <Auth0Provider {...}>
        <ApolloWrapper><h1>my app</h1></ApolloWrapper>
    </Auth0Provider >
}

helper.js

import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";

export function createApolloClient(getToken) {
  const httpLink = new HttpLink({
    uri: "/api/graphql"
  });

  const setAuthorizationLink = setContext((_, { headers }) => {
    return getToken().then(token => {
      debugger;
      console.log(`TOKEN:${token}`);
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : null
        }
      }
    });
  });

  const link = setAuthorizationLink.concat(httpLink);

  return new ApolloClient({
    link,
    cache: new InMemoryCache()
  });
}

[nirvdrum]

@nojaf I’ve tried out your solution, but it’s not working and I don’t see how it can. I believe it did work for you, so I’m not sure if I’m just overlooking something or if the SPA React wrapper changed. Any help you can provide would be much appreciated.

The problem is the getTokenSilently reference is invalid while Auth0 loading is true because the auth0Client reference is undefined until loading is false. Just to be clear that we’re looking at the same thing, I’m referring to the the provider’s getTokenSilently value, like in https://github.com/auth0-samples/auth0-react-samples/issues/142#issuecomment-511470797.

So, I’m uncertain how the useMemo call you have can work. Did you update the wrapper so that the provider always passes down a Promise for getTokenSilently?