React(フロント)からHasuraのgraphqlを叩く

前回hasuraを使ってgraphqlサーバを立てたので、今回はフロントと繋げたいと思います。
繋げるために利用したライブラリはapolloです。

ドキュメント

1. npm install

まずはライブラリをインストールしましょう。

npm install @apollo/client


2. ApolloProviderでアプリをラップ(アプリのどこでも利用できるように)

次に、ApolloProviderコンポーネントでアプリをラップし、ApolloClientインスタンスを渡しましょう。

index.jsx

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import React from "react";
import ReactDOM from "react-dom";
import Pages from "./pages";
import injectStyles from "./styles";

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

injectStyles();
ReactDOM.render(
  <ApolloProvider client={client}>
    <Pages />
  </ApolloProvider>,
  document.getElementById("root")
);

3.クエリを投げる

準備はできました。
以下のようにクエリを投げれば結果を確認することができます。

sample.jsx

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

const GET_SAMPLE = gql`
    query getSample {
      sample {
        id
        message
      }
    }
  `;

  const { data, loading, error } = useQuery(GET_SAMPLE);
  console.log(data); //データの取得が確認できる

注意

gqlの中身ですが、Hasura上でクエリを投げる分には以下のみでよかったと思います。

{
   sample {
        id
        message
   }
}

しかし、フロントから投げる時は「query "クエリ名"(キャッシュ用)」をつける必要があります。

query getSample {
      sample {
        id
        message
      }
    }