Apollo Client で Hook 作成して GraphQL を使ってみる

はじめに

Graph QL とフロントエンドについてです。

前回 Apollo Client を入れたので v3 から標準搭載になった Hooks 機能を仕様してみたいと思います。

Hooks - Apollo GraphQL Docs

概要

動作は以下の流れです。

1. main.ts に全体で使う Hooks の設定
2. 画面側で Hooks を利用して値を取得＆表示

公式サイトもわかりやすいので、とても簡単です。

僕が作った結果のソースはこちらですので気になるかたはダウンロードしてみてください。

server フォルダに GraphQL で実装されたバックエンドが用意してあるので動作確認はそちらをご利用いただければと思います。

main.ts に全体で使う Hooks の設定

main.tsx

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

// 追加②
const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: "http://localhost:4000/graphql",
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    {/* 追加③ */}
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

3 箇所追加するだけの簡単な作業でした。

1 はインポートです。

2 について少し解説すると ApolloClient のインスタンスを生成して、メモリにデータをキャッシュしながらこの BaseURL を設定しています。

3 アプリ全体で使える様にアプリを Wrap しています。

画面側で Hooks を利用して値を取得＆表示

Apollo.tsx

import "./App.css";
import { gql, useQuery } from "@apollo/client";

// GraphQLで送信されるデータ取得用のコマンド
const GET_HELLO = gql`
  query {
    hellos {
      text
    }
  }
`;

function App() {
  // それぞれの状態をuseQueryが返してくれます。dataは取得できるまで基本undefinedです。
  // ※{}となっている箇所ですが引数を入れて使います。
  const { loading, error, data } = useQuery(GET_HELLO, {});

  // loadingは問い合わせ中ならずっとtrue
  if (loading) return <p>Loading ...</p>;
  // errorがあればtrue
  if (error) return <p>Error</p>;

  return (
    <div className="App">
      <p>{data.hellos ? JSON.stringify(data.hellos) : "N/A"}</p>
    </div>
  );
}

export default App;

簡単なデータ取得ついては以上です。

GraphQL だとデータ取得の際に引数を持たせることもあると思いますのでその場合の記載例だけ以下にのせておきます。

引数がある場合

const { loading, error, data } = useQuery(GET_HELLO, {
  variables: { language: "english" },
});

この様にあえて{}だけで空欄にしていたところに変数を代入してあげれば OK です。

おわりに

今回は前回より少し深く ApolloClient の機能を使ってみました。

まぁデータ取得だけだとまだまだ使いこなしたとは言えないので、Mutation(=データ作成・更新・削除)をやっていきたいと思います。