Published on

Reactでgraphqlのデータを取得する方法

Authors
  • avatar
    Name
    ssu
    Twitter

今回は、ReactからGraphQLのAPIサーバからデータと取ってきて表示する方法を紹介します。 簡単に理解そして、実装するために、App.jsを変更したらできるようにしています。 動きを理解したら、それぞれファイルを分けてみてください。

では、まずはcreate react appでreactのappを作ります。

npx create-react-app graphql-client --template typescript

次に、作成したディレクトリに移動し、 必要なライブラリをインストールします。

 yarn add @apollo/client graphql

そうしたら、今回は、React, next.js, graphqlを使ってgraphqlのAPIサーバを作成する方法で作成したAPIにアクセスして、果物を取ってくるプログラムにします。

下記のようにApp.tsxを変更しましょう。以下簡単なApp.tsxの説明になります。

  1. まずconst client = new ApolloClientのURL部分で接続先を決めています。
  2. 次に、FRUIT_QUERYでGraphQLのqueryを定義します
  3. そして、useQuery(FRUIT_QUERY)でそのクエリをもとに、APIへの接続をして、データを取ってきて、取ってきたらデータを表示するコンポーネント(Fruits)を作成します。
  4. 最後に、ApolloProvider client={client}でcontextProviderを作成し、データを渡せられるようにし、 その中に先ほど作ったデータを表示するコンポーネント(Fruits)を入れてあげたらこれで終わりです。

下記のようにApp.tsxファイル一つで簡潔にできました。

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

// applo client
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://graphql-api-example.vercel.app/api/graphql',
  }),
});

const FRUIT_QUERY = gql`
  query {
    fruits {
      id
      name
      price
    }
  }
`

interface Fruit {
  id: number;
  name: string;
  price: number;
}

const Fruits = () => {
  const { loading, error, data } = useQuery(FRUIT_QUERY);

  if (loading) return <p>...loading</p>;
  if (error) return <p>{error.message}</p>;

  return (
    <div>
      <h2>TodoList</h2>
      {data.fruits.map((fruit: Fruit) => (
        <p key={fruit.id}>{fruit.name}: {fruit.price}円</p>
      ))}
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Fruits />
    </ApolloProvider>
  );
}

export default App;

うまくいったら下記のようにデータが表示されます。

また、React, next.js, graphqlを使ってgraphqlのAPIサーバを作成する方法も参考にしてみてください。

参考: Get started with Apollo Client

Discuss on Twitter • View on GitHub