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