Apollo Client/Getting Started sample2

ExchangeRates.tsx

import {gql, useQuery} from '@apollo/client';

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

interface RateData {
  currency: string,
  rate: string,
}

function ExchangeRates() {
  const {loading, error, data} = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map((data: RateData) => (
    <div key={data.currency}>
      <p>
        {data.currency}: {data.rate}
      </p>
    </div>
  ));
}

export default ExchangeRates;