index.js

import PropTypes from 'prop-types';
import { useQuery } from '@apollo/react-hooks';
import withApollo from '../lib/withApollo';
import { userByPk } from '../graphql/users/query';

const Index = ({ user }) => {
  const { loading, error, data } = useQuery(userByPk);
  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;
  return (
    <div style={{ textAlign: 'center', margin: '100px' }}>
      <h1 style={{ color: 'red' }}>{`${data.users[0].displayName} ngu`}</h1>
      <h1>{user.displayName}</h1>
    </div>
  );
};

export default withApollo(Index);

Index.propTypes = {
   user: PropTypes.object, // eslint-disable-line
};