@apollo/client

@apollo/clientを1つインストールするだけで、apollo-boost react-apollo@react/apollo-hooks apollo-clientの代わりに使用できます.
すなわち,@apollo/client graphqlであれば,アポロクライアントを用いてGraphqlとデータを交換する準備ができている.

設定

npm i @apollo/client graphql

使用方法

1.クライアントの作成

client.js

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});
export default client;

2.クライアントと反応アプリケーションの接続

App.js

import React from 'react';
import { render } from 'react-dom';
import ExchangeRates from './ExchangeRates';
import client from './client';

import { ApolloProvider } from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>Hi Apollo 🚀</h2>
        <ExchangeRates />
      </div>
    </ApolloProvider>
  );
}

render(<App />, document.getElementById('root'));

3.データ要求（grpahqlでインポート）

ExchangeRates.js

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

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

export default 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(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

ExchangeRates component within your App component from the previous example, you'll first see a loading indicator on the page, followed by data when it's ready. Apollo Client automatically caches this data when it comes back from the server, so you won't see a loading indicator if you run the same query again.
これは、最初にデータをインポートするとロード・インディケータが表示されますが、サーバーから同じ値を再インポートすると、ロード・インディケータは自動キャッシュ時にXを再ポップアップします.
個人混同の要因は以下の通りである.

gql

import {gql} fron '@apollo/client' gql function to parse the query string into a query document.
つまり、gqlはクエリ文字列をクエリ文に変換し、Graphqlが使用できるようにする
あなたに作ってあげます.

ApolloProvider

構成部品をApolloProvierで包んでこそ、GraphQLデータにアクセスできます.反応器に似た<Context.Provider>ソース
https://www.apollographql.com/docs/react/get-started/#request-data