Bind GraphQL data to your UI with one function call

const cache = new InMemoryCache({
  typePolicies: {
    Person: {
      fields: {
        name: {
          read(name) {
            // Return cached name, upper-cased:
            return name.toUpperCase();
          }
        }
      },
    },
  },
});

import { InMemoryCache, makeVar, gql, useQuery } from "@apollo/client";
const darkModeVar = makeVar(false);
const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        darkModeEnabled() {
          return darkModeVar();
        },
      },
    },
  },
});
function App() {
  const { data, loading } = useQuery(
    gql`query { darkModeEnabled @client }`,
  );
  return loading ? <Loading/> :
    <div className={data.darkModeEnabled ? "dark" : "light"}>...</div>;
}
const toggleDarkMode = () => darkModeVar(!darkModeVar());

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { relayStylePagination } from "@apollo/client/utilities";

const client = new ApolloClient({
  uri: "https://metaphysics-production.artsy.net/",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          search: relayStylePagination(["query"]),
        },
      },
    },
  }),
});

const COMMENTS_SUBSCRIPTION = gql`
  subscription OnCommentAdded($postID: ID!) {
    commentAdded(postID: $postID) {
      id
      content
    }
  }
`;
function LatestComment({ postID }) {
  const { data: { commentAdded }, loading } = useSubscription(
    COMMENTS_SUBSCRIPTION,
    { variables: { postID } }
  );
  return <h4>New comment: {!loading && commentAdded.content}</h4>;
}

import { gql, useQuery } from '@apollo/client';
const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;
function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return (
    <ul>
      {data.dogs.map(dog => <li key={dog.id}>{dog.breed}</li>)}
    </ul>
  );
}