import React, { useEffect, useState } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';

// 1. Initialize Apollo Client
const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/', // Example public GraphQL API
  cache: new InMemoryCache(),
});

// 2. Define your GraphQL query
const GET_CONTINENTS = gql`
  query GetContinents {
    continents {
      code
      name
    }
  }
`;

// 3. Create a React component to display the data
function ContinentsList() {
  const { loading, error, data } = useQuery(GET_CONTINENTS);

  if (loading) return <p>Loading continents...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>List of Continents</h2>
      <ul>
        {data.continents.map(({ code, name }) => (
          <li key={code}>
            {name} ({code})
          </li>
        ))}
      </ul>
    </div>
  );
}

// 4. Wrap your application with ApolloProvider
// This is typically done at the root of your React app
function App() {
  return (
    <ApolloProvider client={client}>
      <ContinentsList />
    </ApolloProvider>
  );
}

// To run this in a local React setup:
// 1. Install dependencies:
//    npm install @apollo/client graphql react react-dom
// 2. Save the code above as App.js (or similar)
// 3. In your index.js (or main entry file):
//    import React from 'react';
//    import ReactDOM from 'react-dom/client';
//    import App from './App';
//
//    const root = ReactDOM.createRoot(document.getElementById('root'));
//    root.render(
//      <React.StrictMode>
//        <App />
//      </React.StrictMode>
//    );