GatsbyJS PostgreSQLの内容を取得する

2019-08-13

Gatsbyビルド時にPostgreSQLのデータ内容を取得して、画面に表示します。

テスト用DBの作成

テスト用にtest_dbを作成し、以下のテーブルを作成しました。

  • users:ユーザー情報
  • comments:投稿情報

users.idとcomments.user_idが紐づいています。 ER図はこんな感じ。

gatsby_postgres_1.png

それぞれのテーブルにテストデータを登録します。

usersテーブル

id username password created modified
1 太郎 aaa 2019-08-13 11:06:17 2019-08-13 11:06:17
2 次郎 bbb 2019-08-13 11:07:24 2019-08-13 11:07:24
3 よしお ccc 2019-08-13 11:07:24 2019-08-13 11:07:24

commentsテーブル

id uer_id title comment created
2 1 aaa bbb 2019-08-09 21:06:20
3 1 投稿テスト コメント 2019-08-10 13:12:32
4 3 タイトル COMMENT 2019-08-12 09:31:42

プラグインのインストール

PostgreSQLに接続するため、[gatsby-source-pg]をインストールします。

npm install --save gatsby-source-pg

インストール完了後、gatsby-config.jsに設定を追加します。
connectionStringの書式は
postgres://ユーザー名:パスワード@ホスト:ポート番号/データベース名
となります。

gatsby-config.js
module.exports = {
    //他の設定
  plugins: [
    //他のplugin設定
    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres://postgres:postgres@localhost:5432/test_db",
        schema: "public",
        refetchInterval: 60,
      },
    },
  ]
}

開発サーバーを起動してGraphiQLにアクセスすると、 postgresが表示され、commentsとusersが紐づいた状態で取得できます。

gatsby_postgres_2.png

こちらのSQLと同じ結果が取得できます。

select comments.title,comments.comment,users.username 
from comments
inner join users
on comments.user_id = users.id

画面に表示する

せっかくなので画面にコメントタイトル、コメント作成日、作成ユーザ名を表示しています。

index.jsにGraphQLと結果データのmapを記述します。

index.js
import React from "react"
import { graphql } from "gatsby";

/**
 * 取得したcreatedのフォーマットを行う
 * @param {String} created 
 */
function getCreated(created){
    const date = new Date(created);
    return date.getFullYear() + "/" +  (date.getMonth() + 1) + "/"+ date.getDate();
}

export default ({ data }) => {
  const { allCommentsList } = data.postgres;
  return (
      <div>
        {/* GraphQLの結果を表示する */}
        {allCommentsList.map(comment => (
            <li key={comment.id}>
                <strong>
                    {comment.title}({getCreated(comment.created)})
                </strong>
                by <em>{comment.userByUserId.username}</em>
            </li>
        ))}
      </div>
  );
};

export const query = graphql`
query MyQuery {
    postgres {
      allCommentsList {
        userByUserId {
          username
        }
        id
        title
        comment
        created
      }
    }
  }  
`;

画面にアクセスすると各情報の表示が確認できます。

gatsby_postgres_3.png


結合テーブルが増えたり、検索条件が複雑になってくると自分でGraphQLサーバを立てるか、 CSVに出力して読み取った方がわかりやすそう。
※CSVの読み取りは[gatsby-transformer-csv]プラグインでできるみたいです。

■同じタグの記事(最新5件)
GatsbyJS FaunaDBからデータを取得する
GatsbyJS 検索機能を実装する(JsSearchを利用)
GatsbyJS rehypeReactでマークダウンの内容を変更する
GatsbyJS マークダウンにコンポーネントを表示する
GatsbyJS トランスフォーマープラグインを使用してマークダウン...
■同じタグの記事を見る