Next.jsとHasuraを連携してデータを画面に出すところまでやる（ためのpages/配下のuseQuery作成）...3

はじめに

以下のゴールを達成するため、本日はついに、Next.jsとHasuraを連携してデータを画面に出すところまでやります。

特に今回は、Next.jsでApollo Clientを使ってSSR(SSG)する仕組みの部分を見て行くと思います。

Hasuraにあるデータやエンドポイントは既に用意してあります。

最終的なゴール

以下のような構成のアプリを作ることです。

目的

• 仕事で使っている技術のキャッチアップと復習
• 使う可能性がある技術の理解度向上

前回のおさらい

Next.jsとHasuraを連携してデータを画面に出すために、

前回は、Next.js公式の実例集からサンプルをパクって

ディレクトリもまんま真似して作成しました。

lib/apolloClient.ts

ここに、apolloClientインスタンスを作成したり、初期化に関する処理を作成しました。

詳細👇

pages配下の実装

pages/_app.tsxに

• 前回の記事作成したやつで、作成したinitializeApollo
• libにあるapolloClientから、ApolloProvider

を、読み込みます。

const client = initializeApollo()

変数clientをコンポーネントの全てで使えるようにするために

ApolloProviderで囲みます。

結果は👇

import '../styles/globals.css'
import { AppProps } from 'next/app'
import { ApolloProvider } from '@apollo/client'
import { initializeApollo } from '../lib/apolloClient'

function MyApp({ Component, pageProps }: AppProps) {
  const client = initializeApollo()
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

そうすると

<Component {...pageProps} />

の中（全pages）で、clientが使えるようになります。

Hasuraからくるデータを表示pagesを作成する

initializeApollo()の実行結果から生成され、変数clientに格納されたデータから

Hasuraにクエリを投げて、Hasura上で以前作成したユーザーデータを取得するまでやります。

新しいファイルを用意します。

ディレクトリ名

pages/hasura-main.tsx

まずはモジュールの読み込み部分から

import { VFC } from 'react' // ReactのFCの型
import Link from 'next/link' // Next.js の　Linkコンポーネント
import { useQuery } from '@apollo/client' // apolloClientでHasuraからデータを取得するためのHooks
import { GET_USERS } from '../queries/queries' // ユーザー情報GETするクエリ
import { GetUsersQuery } from '../types/generated/graphql' // 自動生成された型
import { Layout } from '../components/Layout' // Layoutコンポーネント

const FetchMain: VFC = () => {
  const { data, error } = useQuery<GetUsersQuery>(GET_USERS)
  return (<コンポーネント/>)
}

大事なのは、ここですね。

const { data, error, loading } = useQuery<GetUsersQuery>(GET_USERS)

loadingを取ることも可能です。

全体の構文を解説

useQuery<型>(実行したいクエリ)

ジェネリクスでimportした自動生成されたGET_USERSクエリのデータ型の定義をしています。

返り値は

const { data,   // 取得データが格納されるところ
        error,  // 通信中エラーになったら trueになる
        loading // 取得中trueになる
}

今日のところは以上です。

次の記事では、通信ステータスごとの出し分け処理や、いよいよ、データを画面に出すところまでやります。

アウトプット100本ノック実施中