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.

import React from 'react'; 
import { ApolloProvider } from '@apollo/client';
import create_api_client from '../utils/apolloClient';


interface AuthenticatedProps {
  userInfo: Record<string, any>; 
  logout: () => void; 
  csrf: string;
}

function on_graphql_error(messages: string[]) { 
    messages.forEach(message => alert(message)); 
} 

const Authenticated: React.FC<AuthenticatedProps> = ({ userInfo, logout, csrf }) => {
    return (
        <ApolloProvider client={create_api_client(csrf, on_graphql_error)}>
            <div>
                Authenticated as: {JSON.stringify(userInfo)}
            </div>
            <button onClick={logout}>
                Logout
            </button>
            
        </ApolloProvider>
    )
} 

export default Authenticated;

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;