Advanced HTTP networking with Apollo

Overview

While interacting with the Sanctuary Health API you will need to attach your API key. This can become cumbersome, annoying and prone to errors having to do this every time you want to run a query. Fortunately with some additional configuration we can offload this and bake it into the client. For a full guide on advanced networking with Apollo please click here.

note

If you are not using the React Apollo Client syntax will differ however the concept should still be applicable to greatly improve developer experience.

Configure the Auth Middleware Link

To automatically attach our API key to all requests we must create an Apollo Link that modifies our outgoing queries.

First we need to add the ApolloLink to our imports from @apollo/client. This should look like this:

import { ApolloClient, InMemoryCache, ApolloProvider, ApolloLink } from '@apollo/client';

And then we can create the middleware link as shown using the demo API key. This should look like this:

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      apikey: "9677bbd3-4b5b-4a2f-a085-201771d6ad9c"
    }
  }));

  return forward(operation);
})

Configure the HTTP link

Now we have our Auth Middleware Link if we were to just apply it it would override the default link in our client such that no HTTP request is sent. As such we will need to create our own HTTP link and then combine the two in order for our desired effect.

First we need to add the HttpLink to our imports from @apollo/client. This should look like this:

import { ApolloClient, InMemoryCache, ApolloProvider, ApolloLink, HttpLink } from '@apollo/client';

And then we can create the http link as shown using the Sanctuary Health API URL. This should look like this:

const httpLink = new HttpLink({ uri: 'https://v4-0-dot-livitay.appspot.com/graphql' })

Attaching our link to our client

Now that we have both the links we need we need to concatenate them together and use them to create our client.

First we need to add the concat function from @apollo/client. This should look like this:

import { ApolloClient, InMemoryCache, ApolloProvider, ApolloLink, HttpLink, concat } from '@apollo/client';

And then we can specify that the client link should be the concatenation of our Auth Middleware Link and HttpLink. This should look like this:

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

note

You will also notice that we no longer need to specify the uri in the client constructor, this is because its baked into our HttpLink

All together the index.tsx file should now look like this:

./src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ApolloClient, ApolloLink, ApolloProvider, InMemoryCache, HttpLink, concat } from '@apollo/client';

const httpLink = new HttpLink({ uri: 'https://v4-0-dot-livitay.appspot.com/graphql' })

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      apikey: "9677bbd3-4b5b-4a2f-a085-201771d6ad9c"
    }
  }));

  return forward(operation);
})

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();