import { split, HttpLink } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/client/link/ws';

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

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/subscriptions',
  options: {
    reconnect: true
  }
});

// The split function takes three parameters:
//
// * A function that's called for each operation to execute
// * The Link to use for an operation if the function returns a "truthy" value
// * The Link to use for an operation if the function returns a "falsy" value
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  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">const</span> <span class="token function-variable function">split</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token function-variable function">test</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">op<span class="token operator">:</span> Operation</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">boolean</span><span class="token punctuation">,</span> left<span class="token operator">:</span> ApolloLink <span class="token operator">|</span> RequestHandler<span class="token punctuation">,</span> right<span class="token operator">?</span><span class="token operator">:</span> ApolloLink <span class="token operator">|</span> RequestHandler<span class="token punctuation">)</span> <span class="token operator">=></span> ApolloLink
<span class="token keyword">import</span> split</code></pre>

import React from "react";
import { ApolloConsumer, useApolloClient, useQuery, gql } from "@apollo/client";

const GET_MESSAGE_COUNT = gql`
  query GetMessageCount {
    messageCount @client {
      total
    }
  }
`;

const resolvers = {
  Query: {
    messageCount: (_, args, { cache }) => {
      // ... calculate and return the number of messages in
      // the cache ...
      return {
        total: 123,
        __typename: "MessageCount",
      };
    },
  },
};

export function MessageCount() {
  const client = useApolloClient();
  client.addResolvers(resolvers);

  const { loading, data: { messageCount } } = useQuery(GET_MESSAGE_COUNT);

  if (loading) return "Loading ...";

  return (
    <p>
      Total number of messages: {messageCount.total}
    </p>
  );
};
<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">namespace</span> React
<span class="token keyword">import</span> React</code></pre>

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

const timeStartLink = new ApolloLink((operation, forward) => {
  operation.setContext({ start: new Date() });
  return forward(operation);
});

const logTimeLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((data) => {
    // data from a previous link
    const time = new Date() - operation.getContext().start;
    console.log(`operation ${operation.operationName} took ${time} to complete`);
    return data;
  })
});

const additiveLink = from([
  timeStartLink,
  logTimeLink
]);
<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">ApolloLink</span>
<span class="token keyword">import</span> ApolloLink</code></pre>

import { from, HttpLink } from '@apollo/client';
import { RetryLink } from '@apollo/client/link/retry';
import MyAuthLink from '../auth';

const additiveLink = from([
  new RetryLink(),
  new MyAuthLink(),
  new HttpLink({ uri: 'http://localhost:4000/graphql' })
]);
<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">const</span> <span class="token function-variable function">from</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">links<span class="token operator">:</span> <span class="token punctuation">(</span>ApolloLink <span class="token operator">|</span> RequestHandler<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> ApolloLink
<span class="token keyword">import</span> <span class="token keyword">from</span></code></pre>

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

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

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: localStorage.getItem('token') || null,
    }
  }));

  return forward(operation);
})

const activityMiddleware = new ApolloLink((operation, forward) => {
  // add the recent-activity custom header to the headers
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      'recent-activity': localStorage.getItem('lastOnlineTime') || null,
    }
  }));

  return forward(operation);
})

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
    authMiddleware,
    activityMiddleware,
    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>

// Add this import to the top of the file
import { getDataFromTree } from "@apollo/client/react/ssr";

// Replace the TODO with this
getDataFromTree(App).then((content) => {
  // Extract the entirety of the Apollo Client cache's current state
  const initialState = client.extract();

  // Add both the page content and the cache state to a top-level component
  const html = <Html content={content} state={initialState} />;

  // Render the component to static markup and return it
  res.status(200);
  res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
  res.end();
});
<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">getDataFromTree</span><span class="token punctuation">(</span><span class="token parameter">tree<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">,</span> context<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> any<span class="token punctuation">;</span>
<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">></span>
<span class="token keyword">import</span> getDataFromTree</code></pre>

// Query that fetches all existing to-do items
const query = gql`
  query MyTodoAppQuery {
    todos {
      id
      text
      completed
    }
  }
`;

// Get the current to-do list
const data = client.readQuery({ query });

// Create a new to-do item
const myNewTodo = {
  id: '6',
  text: 'Start using Apollo Client.',
  completed: false,
  __typename: 'Todo',
};

// Write back to the to-do list, appending the new item
client.writeQuery({
  query,
  data: {
    todos: [...data.todos, myNewTodo],
  },
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> query<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>