export default graphql(gql`query MyQuery { ... }`, {
  options: { fetchPolicy: 'cache-and-network' },
})(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> graphql<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> Partial<span class="token operator">&lt;</span><span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>DataProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>></span> <span class="token operator">&amp;</span> Partial<span class="token operator">&lt;</span><span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>MutateProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>>></span><span class="token punctuation">(</span><span class="token parameter">document<span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode<span class="token punctuation">,</span> operationOptions<span class="token operator">?</span><span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>OperationOption<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">WrappedComponent<span class="token operator">:</span> React<span class="token punctuation">.</span>ComponentType<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> React<span class="token punctuation">.</span>ComponentClass<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></code></pre>

function MyComponent({ data: { refetch } }) {
  return <button onClick={() => refetch()}>Reload</button>;
}

export default graphql(gql`query MyComponentQuery  { ... }`)(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> refetch <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
        refetch<span class="token operator">:</span> any<span class="token punctuation">;</span>
    <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> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element</code></pre>

class MyComponent extends Component {
  componentDidMount() {
    // In this specific case you may want to use `options.pollInterval` instead.
    this.props.data.startPolling(1000);
  }

  render() {
    // ...
  }
}

export default graphql(gql`query MyComponentQuery { ... }`)(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span></code></pre>

export default graphql(gql`query MyQuery { ... }`, {
  skip: props => !!props.skip,
})(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> graphql<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> Partial<span class="token operator">&lt;</span><span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>DataProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>></span> <span class="token operator">&amp;</span> Partial<span class="token operator">&lt;</span><span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>MutateProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>>></span><span class="token punctuation">(</span><span class="token parameter">document<span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode<span class="token punctuation">,</span> operationOptions<span class="token operator">?</span><span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>OperationOption<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">WrappedComponent<span class="token operator">:</span> React<span class="token punctuation">.</span>ComponentType<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> React<span class="token punctuation">.</span>ComponentClass<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></code></pre>

export default compose(
  graphql(gql`mutation CreateTodoMutation (...) { ... }`, { name: 'createTodo' }),
  graphql(gql`mutation UpdateTodoMutation (...) { ... }`, { name: 'updateTodo' }),
  graphql(gql`mutation DeleteTodoMutation (...) { ... }`, { name: 'deleteTodo' }),
)(MyComponent);

function MyComponent(props) {
  // Instead of the default prop name, `mutate`,
  // we have three different prop names.
  console.log(props.createTodo);
  console.log(props.updateTodo);
  console.log(props.deleteTodo);

  return null;
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><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>

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
        if (networkError) {
          console.log(`[Network error]: ${networkError}`);
        }
      }
    }),
    new HttpLink({
      uri: 'http://localhost:8000/graphql',
    }),
 ]),
 cache: new InMemoryCache(),
});

<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 } from "@apollo/client";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: "/graphql"
});

client.query({
  query: MY_QUERY,
  context: {
    // example of setting the headers with context per operation
    headers: {
      special: "Special header value"
    }
  }
});
<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";
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>

//...
function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: createIsomorphLink(),
    cache: new InMemoryCache(),
  })
}



//...
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">createApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

//...
const client = new ApolloClient({
  cache: cache,
  link: splitLink,
  name: "yet-to-be-named decision app BackEnd",
  version: "1.3",
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    },
  },
});

export default client;
<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>

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            allPosts: concatPagination(),
          },
        },
      },
    }),
  })
}

<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">createApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>