Apollo Client Hooks + Hasura

Profile.js

import React from "react";
import { useSubscription, useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

const PROFILE_QUERY = gql`
  query Profile($id: String!) {
    Person(where: { id: { _eq: $id } }) {
      id
      firstName
      lastName
    }
  }
`;

const PROFILE_SUBSCRIPTION = gql`
  subscription Profile($id: String!) {
    Person(where: { id: { _eq: $id } }) {
      id
      firstName
      lastName
    }
  }
`;

function Profile({ id }) {
  const { loading, error, data } = useQuery(PROFILE_QUERY, {
    variables: { id },
  });

  useSubscription(PROFILE_SUBSCRIPTION, {
    variables: { id },
  });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error...</p>;
  }

  return (
    <p>
      {data.Person.firstName} {data.Person.lastName}
    </p>
  );
}

export default Profile;