Creating A New React Component That Calls The GraphQL API

The frontend web app code is located in the code/web-app/src directory. When authenticate the Authenticated component in the code/web-app/src/components acts as the main container.

Let's replace the Products sample component with a new component, called Hello, and make it call the hello GraphQL operation and render the response.

Create a new file Hello.tsx in the components directory.

import { useQuery } from '@apollo/client';
import { GET_HELLO } from '../graphql/operations';

interface HelloQuery {
  message: string;
}

const Hello: React.FC = () => {
  const { data, loading, error } = useQuery(GET_HELLO);

  if (loading) return (
    <div className="flex justify-center items-center min-h-screen bg-base-300">
      <button className="btn">
        <span className="loading loading-spinner"></span>
        Loading...
      </button>
    </div>
  );
  if (error) return <p>{'Error: ' + error}</p>;

  return (
    <div className="min-h-screen flex flex-col">
      <div className="navbar bg-base-300 text-neutral-content">
        <div className="flex-1">
          {"Message: " + data.hello.message}
        </div>
      </div>
    </div>
  );
};

export default Hello;

Last updated