React hooks + Apollo client

Component.tsx

import useQuery from './useQuery'
import gql from 'graphql-tag'

type Props = {
  projectId: string
}

export default function Project(props: Props) {
  const { data, loading } = useQuery({
    query: gql`
      query($id: ID!) {
        getProject(id: $id) {
          name
        }
      }
    `,
    variables: {
      id: props.projectId
    }
  }, [props.projectId])
  
  if (loading) return <div>Loading...</div>
  return <div>Project: {data.getProject.name}</div>
}

useQuery.ts

import { useState, useContext, useEffect, useMemo } from 'react'
import ApolloContext from './context/apollo'
import ApolloClient from 'apollo-client'

export default function useQuery(options, deps) {
  const client = useContext(ApolloContext)

  // Keep the observable around unless the dependencies change.
  const observableQuery = useMemo(() => {
    return client.watchQuery(options)
  }, deps || [])

  // The current result of the query in the cache
  const [currentResult, setResult] = useState(observableQuery.currentResult())

  // Then subscribe the query whenever the cache changes
  useEffect(
    () => {
      const subscription = observableQuery.subscribe(setResult)
      return () => subscription.unsubscribe()
    },
    [observableQuery]
  )

  return currentResult
}