import { setContext } from "apollo-link-context";
import { onError } from "apollo-link-error";
 
// cached storage for the user token
// cached storage for the user token
let token;
const withToken = setContext(() => {
  // if you have a cached value, return it immediately
// if you have a cached value, return it immediately
  if (token) return { token };
 
  return AsyncTokenLookup().then(userToken => {
    token = userToken;
    return { token };
  });
});
 
const resetToken = onError(({ networkError }) => {
  if (networkError && networkError.name ==='ServerError' && networkError.statusCode === 401) {
    // remove cached token on 401 from the server
// remove cached token on 401 from the server
    token = null;
  }
});
 
const authFlowLink = withToken.concat(resetToken);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">setContext</span><span class="token punctuation">(</span><span class="token parameter">setter<span class="token operator">:</span> ContextSetter</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloLink
<span class="token keyword">import</span> setContext</code></pre>

import { setContext } from "apollo-link-context";
 
const setAuthorizationLink = setContext((request, previousContext) => ({
  headers: {authorization: "1234"}
}));
 
const asyncAuthLink = setContext(
  request =>
    new Promise((success, fail) => {
      // do some async lookup here
// do some async lookup here
      setTimeout(() => {
        success({ token: "async found token" });
      }, 10);
    })
);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">setContext</span><span class="token punctuation">(</span><span class="token parameter">setter<span class="token operator">:</span> ContextSetter</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloLink
<span class="token keyword">import</span> setContext</code></pre>

import { setContext } from "apollo-link-context";
import { onError } from "apollo-link-error";
 
// cached storage for the user token
// cached storage for the user token
let token;
const withToken = setContext(() => {
  // if you have a cached value, return it immediately
// if you have a cached value, return it immediately
  if (token) return { token };
 
  return AsyncTokenLookup().then(userToken => {
    token = userToken;
    return { token };
  });
});
 
const resetToken = onError(({ networkError }) => {
  if (networkError && networkError.name ==='ServerError' && networkError.statusCode === 401) {
    // remove cached token on 401 from the server
// remove cached token on 401 from the server
    token = null;
  }
});
 
const authFlowLink = withToken.concat(resetToken);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">setContext</span><span class="token punctuation">(</span><span class="token parameter">setter<span class="token operator">:</span> ContextSetter</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloLink
<span class="token keyword">import</span> setContext</code></pre>

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path, extensions }) => {
          if(extensions.code === 'UNAUTHENTICATED') {
            localStorage.removeItem('jwt');
            client.resetStore();
          }
          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
        });
        if (networkError) {
          console.log(`[Network error]: ${networkError}`);
        }
      }
    }),
    AuthLink,
    link
  ]),
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});

<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path, extensions }) => {
          if(extensions.code === 'UNAUTHENTICATED') {
            localStorage.removeItem('jwt');
            client.resetStore();
          }
          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
        });
        if (networkError) {
          console.log(`[Network error]: ${networkError}`);
        }
      }
    }),
    AuthLink,
    createUploadLink({
      uri: 'http://localhost:8000/graphql',
      credentials: 'same-origin',
    }),
  ]),
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});

<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path, extensions }) => {
          if(extensions.code === 'UNAUTHENTICATED') {
            localStorage.removeItem('jwt');
            client.resetStore();
          }
          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
        });
        if (networkError) {
          console.log(`[Network error]: ${networkError}`);
        }
      }
    }),
    InfoLink,
    AuthLink,
    link
  ]),
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});

<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  ApolloLink
} from "@apollo/client";
import { asyncMap } from "@apollo/client/utilities";

import { usdToEur } from './currency';

const httpLink = new HttpLink({ uri: '/graphql' });

const usdToEurLink = new ApolloLink((operation, forward) => {
  return asyncMap(forward(operation), async (response) => {
    let data = response.data;
    if (data.price && data.currency === "USD") {
      data.price = await usdToEur(data.price);
      data.currency = "EUR";
    }
    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: usdToEurLink.concat(httpLink)
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

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

const httpLink = new HttpLink({ uri: '/graphql' });

const addDateLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    response.data.date = new Date();
    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: addDateLink.concat(httpLink),
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

const {   ApolloServerPluginLandingPageProductionDefault  ApolloServerPluginLandingPageLocalDefault,} = require('apollo-server-core');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    process.env.NODE_ENV === 'production' ?      ApolloServerPluginLandingPageProductionDefault({ footer: false }) :      ApolloServerPluginLandingPageLocalDefault({ footer: false })  ]
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">ApolloServerPluginLandingPageProductionDefault</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginLandingPageProductionDefaultOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginLandingPageProductionDefault</code></pre>

const { 
  ApolloServerPluginLandingPageProductionDefault
  ApolloServerPluginLandingPageLocalDefault,
} = require('apollo-server-core');
    process.env.NODE_ENV === 'production' ?
      ApolloServerPluginLandingPageProductionDefault({ footer: false }) :
      ApolloServerPluginLandingPageLocalDefault({ footer: false })
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">ApolloServerPluginLandingPageProductionDefault</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginLandingPageProductionDefaultOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginLandingPageProductionDefault</code></pre>

import { ApolloServer } from "apollo-server";
import { ApolloServerPluginLandingPageLocalDefault,
         ApolloServerPluginLandingPageProductionDefault
} from "apollo-server-core";

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    // Install a landing page plugin based on NODE_ENV
    process.env.NODE_ENV === 'production'
      ? ApolloServerPluginLandingPageProductionDefault({
          graphRef: "my-graph-id@my-graph-variant",
          footer: false,
        })
      : ApolloServerPluginLandingPageLocalDefault({ footer: false }),
  ],
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloServer</span>
<span class="token keyword">import</span> ApolloServer</code></pre>