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>

// Invoke the query and log the person's name
client.query({ query }).then(response => {
  console.log(response.data.name);
});
<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 = ...

client
  .query({
    query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));
<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 }) => 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>

// 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>

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>

//...
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>

//...
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>

  client.writeQuery({
    query: gql`
      query GetCartItems {
        cartItems
      }
    `,
    data: {
      cartItems: []
    }
  });
<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>

client.writeQuery({
  query: gql`
    query WriteTodo($id: Int!) {
      todo(id: $id) {
        id
        text
        completed
      }
    }`,
  data: { // Contains the data to write
    todo: {
      __typename: 'Todo',
      id: 5,
      text: 'Buy grapes 🍇',
      completed: false
    },
  },
  variables: {
    id: 5
  }
});
<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>

client.writeQuery({
  query: gql`
    query Feed($type: FeedType!) {
      feed(type: $type) @connection(key: "feed", filter: ["type"]) {
        id
      }
    }
  `,
  variables: {
    type: "top",
  },
  data: {
    feed: [],
  },
});
<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>

// 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>