import { makeVar } from '@apollo/client';

export const cartItemsVar = makeVar([]);
<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 generic-function"><span class="token function">makeVar</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> ReactiveVar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span>
<span class="token keyword">import</span> makeVar</code></pre>

const cartItems = makeVar([]);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cartItems<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

import { makeVar } from '@apollo/client';

const cartItemsVar = makeVar([]);
<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 generic-function"><span class="token function">makeVar</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> ReactiveVar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span>
<span class="token keyword">import</span> makeVar</code></pre>

const cartItemsVar = makeVar([]);

cartItemsVar([100, 101, 102]);

// Output: [100, 101, 102]
console.log(cartItemsVar());

cartItemsVar([456]);

// Output: [456]
console.log(cartItemsVar());
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cartItemsVar<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

export const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        cartItems: {          read() {            return cartItemsVar();          }        }      }
    }
  }
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cache<span class="token operator">:</span> <span class="token builtin">any</span></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 { ApolloServerPluginCacheControl } from 'apollo-server-core';

const server = new ApolloServer({
  // ...other options...
  plugins: [ApolloServerPluginCacheControl({ calculateHttpHeaders: 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">ApolloServerPluginCacheControl</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginCacheControlOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControl</code></pre>

import { ApolloServerPluginCacheControl } from 'apollo-server-core';

const server = new ApolloServer({
  // ...other options...
  plugins: [ApolloServerPluginCacheControl({ defaultMaxAge: 5 })],  // 5 seconds
}));
<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">ApolloServerPluginCacheControl</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginCacheControlOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControl</code></pre>

import { ApolloServerPluginCacheControl } from 'apollo-server-core';

const server = new ApolloServer({
  typeDefs,
  resolvers,
  // The max age is calculated in seconds
  plugins: [ApolloServerPluginCacheControl({ defaultMaxAge: 5 })],
});
<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">ApolloServerPluginCacheControl</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginCacheControlOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControl</code></pre>

import { ApolloServerPluginCacheControl } from 'apollo-server-core';

new ApolloServer({
  plugins: [
    ApolloServerPluginCacheControl({
      defaultMaxAge,
      calculateHttpHeaders,
    }),
  ],
})
<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">ApolloServerPluginCacheControl</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">?</span><span class="token operator">:</span> ApolloServerPluginCacheControlOptions</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControl</code></pre>

import { ApolloServer } from "apollo-server";
import { ApolloServerPluginCacheControl } from "apollo-server-core";

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    ApolloServerPluginCacheControl({
      // Cache everything for 1 second by default.
      defaultMaxAge: 1000,
      // Don't send the `cache-control` response header.
      calculateHttpHeaders: 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>

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>

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>

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>

import { ApolloServerPluginCacheControlDisabled } from 'apollo-server-core';

new ApolloServer({
  plugins: [
    ApolloServerPluginCacheControlDisabled(),
  ],
})
<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">ApolloServerPluginCacheControlDisabled</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControlDisabled</code></pre>

import { ApolloServerPluginCacheControlDisabled } from 'apollo-server-core';

const server = new ApolloServer({
  // ...other options...
  plugins: [ApolloServerPluginCacheControlDisabled()],
}));
<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">ApolloServerPluginCacheControlDisabled</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> ApolloServerPlugin
<span class="token keyword">import</span> ApolloServerPluginCacheControlDisabled</code></pre>

import { ApolloServer } from "apollo-server";
import { ApolloServerPluginCacheControlDisabled } from "apollo-server-core";

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginCacheControlDisabled()],
});
<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>