見出し画像

React(Next.js)とHasuraを連携してデータを画面に出すところまで

モププロでReact(Next.js)とHasuraを使って画面にデータを表示するところまでをやったのでメモ代わりに書いておきます。この記事はチュートリアルではなく、そもそも作りたいものがあってその途中過程のメモなので、読みづらいところもあるかもしれませんが、ご了承ください。

Next.js導入

Next.jsはReactのSSR(サーバーサイドレンダリング)用フレームワークです。以下のコマンドで簡単に雛形が作れます(typescript使用ver)。どうでもいいんですが、Next.jsを調べるとNuxt.jsがつられて表示されるのですが、Nuxt.jsの方が使われているんでしょうか?🤔

$ npx create-next-app --template with-typescript [リポジトリ名]

この時自動で作られたpagesディレクトリを新たに作成したsrcディレクトリの下に移動しておきます。今後使用するcomponentsディレクトリ等もsrcディレクトリ下に作成していきます。こうしておくと後々すっきりするそうです。

CSSモジュール化

スタイル部分をモジュールにします。
src/pages/index.js に書かれている<style jsx></style>の部分をsrc/pages/index.modules.cssに丸々移動。index.jsに以下のコードを追加。

import styles from './index.module.css'


Hasura導入

HasraはPostSQLからGraphQL APIサーバーを自動で構築するもの。DB(graphQL)とクライアントの間を取り持ってくれる…らしいです。
今回はDockerを使ってHasuraを導入していきます。

docker-composeファイルを取得。

$ curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

Hasura GraphQLエンジンを動かす

$ docker-compose up -d

http://localhost:8080/console でHasuraのコンソール画面を見ることができます。

サンプルデータの追加

コンソール画面のヘッダーメニューにあるDATAからData画面に移動、create Tableからテーブルを作成します。

スクリーンショット 2020-07-04 18.05.54

- teble name設定
- カラム名、カラムのタイプ設定
- 主キー設定

   テーブルができたら左カラムから今作ったテーブルを選択して、いくつかサンプルデータを追加しておきます。

ここまできたらデータを確認しておきます。
ヘッダーメニューからGRAPHQLページに移動。GraphQLタブの一番下に以下のコードを書いてqueryを追加してRunボタン(▶︎)を押します。

query {
 profile {
   id
   name
 }
}

右側に先ほど記入したデータが表示されれば成功です。

React(Next.js)側の設定

apolloやらgraphqlやら先ほどのhasuraを使用するためのフックをインストールします。

$ npm install apollo-boost @apollo/react-hooks graphql

src/pages/index.js に以下コードを追加します。ちなみに以下コードにあるhttp://localhost:8080/v1/graphql の部分はHasuraコンソールのGraphqlページの上部に表示されています。

import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';

 const createApolloClient = () => {
 return new ApolloClient({
   link: new HttpLink({
     uri: 'http://localhost:8080/v1/graphql',
   }),
   cache: new InMemoryCache(),
 });
};

さらに画面に先ほどのデータを表示するコードを書いていきます。この部分はコンポーネントに分けておきたいので、src/components/profiles.jsを作成して以下コードを書いていきます。

import gql from 'graphql-tag';
import {useQuery} from '@apollo/react-hooks';

// クエリ
const OUR_FIRST_QUERY = gql`
 query {
   profile {
     id
     name
   }
 }
`;

const Profiles = () => {
 const { loading, error, data } = useQuery(OUR_FIRST_QUERY)
 // ローディング中の表示
 if (loading) return <p>loading</p>
 // エラー時の表示
 if (error) return <p>{error.toString()}</p>
 // 成功してデータが帰ってきた時の表示
 return <div>
   {
     data.profile.map(profile => <Profile key={profile.id} profile={profile}/>)
   }
 </div>
}

// Profilesから読まれる個々データの表示
const Profiles = () => {
     return <p>{profile.id}: {profile.name}</p>  
}

export default Profiles

src/pages/index.js で <Profiles/>を書いて、先ほどHasuraに書いたデータが画面に表示されれば成功です。

以上で今回のモブプロの内容は終了です。Next.js、React.js、Hasuraについての知識がほとんどない状態で行ったので、かなり頭が疲れました…が本当に勉強になりました。引き続きモブプロを通して様々なことを学んで行ければと思います。ではでは。

この記事が気に入ったらサポートをしてみませんか?