import { gql } from "apollo-boost";
// or you can use `import gql from 'graphql-tag';` instead

...

client
  .query({
    query: gql`
      {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));
<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">gql</span><span class="token punctuation">(</span><span class="token parameter">literals<span class="token operator">:</span> string <span class="token operator">|</span> readonly string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<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 function">DocumentNode</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> gql
<span class="token keyword">import</span> gql</code></pre>

function MyComponent({ data: { loading } }) {
  if (loading) {
    return <div>Loading...</div>;
  } else {
    // ...
  }
}

export default graphql(gql`query { ... }`)(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> loading <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>
        loading<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 builtin">any</span></code></pre>

function MyComponent({ data: { variables } }) {
  return (
    <div>
      Query executed with the following variables:
      <code>{JSON.stringify(variables)}</code>
    </div>
  );
}

export default graphql(gql`query { ... }`)(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> variables <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>
        variables<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 builtin">any</span></code></pre>

function MyComponent({ mutate }) {
  return (
    <button
      onClick={() => {
        mutate({
          variables: { foo: 42 },
        });
      }}
    >
      Mutate
    </button>
  );
}

export default graphql(gql`mutation { ... }`)(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> mutate <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    mutate<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">any</span></code></pre>

export default graphql(
  gql`
  mutation ($foo: String!, $bar: String!) {
    ...
  }
`,
  {
    options: props => ({
      variables: {
        foo: props.foo,
        bar: props.bar,
      },
    }),
  },
)(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

export default graphql(gql`query { ... }`, {
  options: { fetchPolicy: 'cache-and-network' },
})(MyComponent);
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

const { todo } = client.readQuery({
  query: gql`
    query ReadTodo($id: Int!) {
      todo(id: $id) {
        id
        text
        completed
      }
    }
  `,
  variables: {
    id: 5,
  },
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> todo<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const { todo } = client.readQuery({
  query: gql`
    query ReadTodo {
      todo(id: 5) {
        id
        text
        completed
      }
    }
  `,
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> todo<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const query = gql`
  query MyTodoAppQuery {
    todos {
      id
      text
      completed
    }
  }
`;

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

const myNewTodo = {
  id: '6',
  text: 'Start using Apollo Client.',
  completed: false,
  __typename: 'Todo',
};

// Write back to the to-do list and include 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 from 'apollo-boost';

// the Apollo cache is set up automatically
const client = new ApolloClient();
<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>TCache<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

const client = new ApolloClient({
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
  link,
});
<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">client<span class="token operator">&lt;</span>TCache<span class="token operator">></span></span>
<span class="token keyword">import</span> client
<span class="token keyword">const</span> client<span class="token operator">:</span> ApolloClient<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">></span></code></pre>

import { Accounts } from 'meteor/accounts-base'
import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
  uri: '/graphql',
  request: operation =>
    operation.setContext(() => ({
      headers: {
        authorization: Accounts._storedLoginToken()
      }
    }))
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> Accounts</code></pre>

const client = new ApolloClient({
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
  link,
  ssrForceFetchDelay: 100,
});
<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">client<span class="token operator">&lt;</span>TCache<span class="token operator">></span></span>
<span class="token keyword">import</span> client
<span class="token keyword">const</span> client<span class="token operator">:</span> ApolloClient<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">></span></code></pre>

const cache = new InMemoryCache();
const stateLink = withClientState({ cache, resolvers: { ... } });
const link = ApolloLink.from([stateLink, new HttpLink({ uri: '...' })]);
const client = new ApolloClient({
  cache,
  link,
});
<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>