function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">ExchangeRates</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 App() {
  const { data } = useQuery(IS_LOGGED_IN);
  return data.isLoggedIn ? <Pages /> : <Login />;
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</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>

const { loading, error, data } = useQuery(GET_DOGS, {
  fetchPolicy: "no-cache"});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> loading<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const GET_DOG = gql`
  query GetDog($dogId: ID!) {
    dog(id: $dogId) {
      name
      breed
    }
  }
`;

function Dog({ id }) {
  const { loading, error, data } = useQuery(GET_DOG, {    variables: {      dogId: id    },  });  // ...render component...
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> <span class="token constant">GET_DOG</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">ExchangeRates</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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 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 { ApolloServer } from "apollo-server";
import { ApolloServerPluginSchemaReporting } from "apollo-server-core";

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

new ApolloServer({
  plugins: [
    ApolloServerPluginSchemaReporting({
      overrideReportedSchema: schema
    }),
    ApolloServerPluginUsageReporting({
      overrideReportedSchema: schema
    }),
  ],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

async getData({
    esIndex, esType, fields, filter, sort, offset, size,
  }) {
    if (typeof size !== 'undefined' && offset + size > SCROLL_PAGE_SIZE) {
      throw new UserInputError(`Large graphql query forbidden for offset + size > ${SCROLL_PAGE_SIZE},
      offset = ${offset} and size = ${size},
      please use download endpoint for large data queries instead.`);
    }
    
    //...
}

  
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>method<span class="token punctuation">)</span> <span class="token constant">ES</span><span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> esIndex<span class="token punctuation">,</span> esType<span class="token punctuation">,</span> fields<span class="token punctuation">,</span> filter<span class="token punctuation">,</span> sort<span class="token punctuation">,</span> offset<span class="token punctuation">,</span> size<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    esIndex<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    esType<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    fields<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    filter<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    sort<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    offset<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
    size<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</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">any</span><span class="token operator">></span></code></pre>

module.exports = new graphql.GraphQLScalarType({
  
  //...
,

  parseLiteral(ast) {
    if (typeof ast.value !== 'string') {
      throw new UserInputError('Cursor should be a string.');
    }

    

    //...
},
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">module</span> <span class="token keyword">export</span><span class="token operator">=</span>
<span class="token punctuation">(</span>property<span class="token punctuation">)</span> <span class="token keyword">export</span><span class="token operator">=</span><span class="token operator">:</span> graphql<span class="token punctuation">.</span>GraphQLScalarType</code></pre>

module.exports = {
  
  //...
,
  Mutation: {
    
    //...
,
    async likePost(_, { postId }, context) {
      
      //...
if (post) {
        
        //...
await post.save();
        return post;
      } else throw new UserInputError('Post not found');
    }
  },
  
  //...
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">module</span> <span class="token keyword">export</span><span class="token operator">=</span>
<span class="token punctuation">(</span>property<span class="token punctuation">)</span> <span class="token keyword">export</span><span class="token operator">=</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    Query<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">getPosts</span><span class="token punctuation">(</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">any</span><span class="token operator">></span><span class="token punctuation">;</span>
        <span class="token function">getPost</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> postId <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            postId<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</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">any</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    Mutation<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">createPost</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> body <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            body<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>Document<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">>></span><span class="token punctuation">;</span>
        <span class="token function">deletePost</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> postId <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token operator">:</span> <span class="token builtin">any</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 operator">...</span><span class="token operator">></span><span class="token punctuation">;</span>
        <span class="token function">likePost</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> postId <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token operator">:</span> <span class="token builtin">any</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 operator">...</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    Subscription<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

module.exports = {
    Mutation: {
        async login(_, { username, password }) {
            const { errors, valid } = validateLoginInput(username, password);

            if (!valid) {
                throw new UserInputError("Validation error", { errors });
            }

            const user = await User.findOne({ username });

            

            //...
},
        
        //...
,
    },
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">module</span> <span class="token keyword">export</span><span class="token operator">=</span>
<span class="token punctuation">(</span>property<span class="token punctuation">)</span> <span class="token keyword">export</span><span class="token operator">=</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    Mutation<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">login</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> username<span class="token punctuation">,</span> password <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            username<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
            password<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</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">any</span><span class="token operator">></span><span class="token punctuation">;</span>
        <span class="token function">register</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> registerInput<span class="token operator">:</span> <span class="token punctuation">{</span> username<span class="token punctuation">,</span> email<span class="token punctuation">,</span> password<span class="token punctuation">,</span> confirmPassword <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            registerInput<span class="token operator">:</span> <span class="token punctuation">{</span>
                username<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                email<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                password<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                confirmPassword<span class="token operator">:</span> <span class="token builtin">any</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 builtin">Promise</span><span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

module.exports = {
  Mutation: {
    async login(_, { username, password }) {
      const { errors, valid } = validateLoginInput(username, password);

      if (!valid) {
        throw new UserInputError('Errors', { errors });
      }

      const user = await User.findOne({ username });

      

      //...
},
    
    //...
}
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">module</span> <span class="token keyword">export</span><span class="token operator">=</span>
<span class="token punctuation">(</span>property<span class="token punctuation">)</span> <span class="token keyword">export</span><span class="token operator">=</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    Mutation<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">login</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> username<span class="token punctuation">,</span> password <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            username<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
            password<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</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">any</span><span class="token operator">></span><span class="token punctuation">;</span>
        <span class="token function">register</span><span class="token punctuation">(</span>_<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> registerInput<span class="token operator">:</span> <span class="token punctuation">{</span> username<span class="token punctuation">,</span> email<span class="token punctuation">,</span> password<span class="token punctuation">,</span> confirmPassword <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            registerInput<span class="token operator">:</span> <span class="token punctuation">{</span>
                username<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                email<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                password<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
                confirmPassword<span class="token operator">:</span> <span class="token builtin">any</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 builtin">Promise</span><span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>