在terminal輸入以下指令

user@userdeMacBook-Pro WebstormProjects % npx create-react-app apollo_client_demo
user@userdeMacBook-Pro WebstormProjects % cd apollo_client_demo
user@userdeMacBook-Pro apollo_client_demo % npm install @apollo/client graphql

套件都安裝好後先執行

npm start

在瀏覽器上輸入localhost:3000
看看是否有看到以下畫面，如果有的話就代表專案創建成功

首先修改index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {ApolloClient, ApolloProvider, gql, InMemoryCache} from "@apollo/client";

// 設定Apollo client的連線
// uri 指定我們的 GraphQL 服務器的 URL。
// cache 是 InMemoryCache 的一個實例，Apollo Client 在獲取查詢結果後使用它來緩存查詢結果。

const client = new ApolloClient({
    uri: 'https://flyby-gateway.herokuapp.com/',
    cache: new InMemoryCache(),
});

// 用graphql的query取資料
client
.query({
    query: gql`
        query GetLocations {
            locations {
                id
                name
                description
                photo
            }
        }
    `,
})
.then((result) => console.log(result));

// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));


// 使用 ApolloProvider 組件將 Apollo Client 連接到 React。 與 React 的 Context.Provider 類似，ApolloProvider 包裝您的 React 應用程序並將 Apollo Client 放置在上下文中，使您可以從組件樹中的任何位置訪問它。
root.render(
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>,
);

回到瀏覽器打開F12看看console有沒有取得object

接著到app.js修改如下

// Import everything needed to use the `useQuery` hook
import { useQuery, gql } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

function DisplayLocations() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

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

  return data.locations.map(({ id, name, description, photo }) => (
      <div key={id}>
        <h3>{name}</h3>
        <img width="400" height="250" alt="location-reference" src={`${photo}`} />
        <br />
        <b>About this location:</b>
        <p>{description}</p>
        <br />
      </div>
  ));
}

export default function App() {
    return (
        <div>
            <h2>My first Apollo app ?</h2>
            <br/>
            <DisplayLocations />
        </div>
    );
}

我們在DisplayLocations()裡面使用了useQuery hook
每當component render時，useQuery hook 會自動執行我們的查詢並返回一個包含loading、error和數據屬性的結果：
Apollo Client 自動跟踪查詢的loading、error狀態，這些狀態反映在loading和error屬性中。
當您的查詢結果返回時，它會附加到 data 屬性。

回到localhost:3000看看畫面是否有顯示成功

今天就先到這邊