GatsbyJS FaunaDBからデータを取得する

2020-02-05

FaunaDBに登録したデータをGraphQLを使って取得する。

目次

FaunaDBにデータベースを作成する

  1. ログイン後の「NEW DATABASE」からDBを作成する。今回はDB名「GatsbyJS」で作成する。
    gatsbyjs_faunadb_1.png
  2. スキーマの登録を行う。
    テスト用に手頃なschemaファイルを用意しておき、インポートする。
    内容はid、name、ageの情報を持つUserを定義しておく。

    手頃なファイル
    type User {
    id: ID!
    name: String!
    age: Int
    }
    type Query {
    users: [User]!
    }

左の「GRAPHQL」メニューからインポートを行う。

gatsbyjs_faunadb_2.png

インポートが成功すると、GraphQLを入力する画面に切り替わる。
usersの情報を取得してみるけど、データがないので空が返ってくる。

gatsbyjs_faunadb_3.png

  1. テストデータを登録

本当はプログラムから入れたかったけど、「COLLECTIONS」メニューからデータの登録を行う。

gatsbyjs_faunadb_4.png

「NEW DOCUMENT」を押した後、データの登録を行います。
JavaScriptのオブジェクトの形式でデータを入力する。

{
  id:"001",
  name:"テスト太郎",
  age:32
}

3件ほどデータの登録を行う。 gatsbyjs_faunadb_5.png

さっきは何も帰ってこなかったGraphQLがデータを返すことを確認。

gatsbyjs_faunadb_6.png

FaunaDBの接続設定とセキュリティキーの作成

  1. 「SECURITY」メニューへ遷移し、「MANAGE ROLES」から 新しいROLEを作成する。 gatsbyjs_faunadb_7.png

gatsbyjs_faunadb_8.png

  1. ROLEの設定を行い、保存する。
    今回はRead権限のみ設定してみる。
    gatsbyjs_faunadb_9.png
  2. 「SECURITY」メニューへ遷移し、「NEW KEY」からキーの作成を行う。
    gatsbyjs_faunadb_10.png

Databaseには作成した今回作成した「GatsbyJS」、Roleには「MyCustomRole」を指定し保存するセキュリティキーが表示される。

gatsbyjs_faunadb_11.png

多分2度と表示されないのでちゃんとメモっておく。

Gatby側の準備

  1. プロジェクト作成とgatsby-source-graphqlプラグインをインストールする
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
cd hello-world
npm install --save gatsby-source-graphql

#私の環境では「yarn install」しなおさないとエラーでした、、、
#yarn install
  1. gatsby-source-graphqlの設定
    gatsby-config.jsに接続設定を記述する。
    Authorization項目にFaunaDBで作成したセキュリティキーを設定。
gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "FaunaDB",
        fieldName: "fauna",
        url: "https://graphql.fauna.com/graphql",
        headers: {
          Authorization: "Bearer FaunaDBのセキュリティキー",
        },
      },
    }
  ]
}
  1. データが取得できるか確認
    開発サーバーを立ち上げて、「http://localhost:8000/___graphql」にアクセス。
    Explorerに「fauna」が表示されてデータが取得できることを確認。

gatsbyjs_faunadb_12.png

  1. 画面に表示してみる
    一応
GraphQLから取得して表示するだけのindex.js
import React from "react"
import { graphql } from "gatsby"

export default ({data}) => {
    return(
        <div>
            {/* graphqlの結果を表示 */}
            {data.fauna.users.data.map((user, index) => (
            <div key={index}>
                名前:{user.name}、年齢:{user.age}
            </div>
            ))}
        </div>
    )
}

// FaunaDBから取得するgraphqlを設定
export const query = graphql`
query {
    fauna {
      users {
        data {
          id
          name
          age
        }
      }
    }
  }  
`

画面にちゃんと表示されていることを確認。

gatsbyjs_faunadb_13.png

■同じタグの記事(最新5件)
GatsbyJS 検索機能を実装する(JsSearchを利用)
ReactからFaunaDBに接続する(サーバのJavaScript経由)
GatsbyJS PostgreSQLの内容を取得する
GatsbyJS rehypeReactでマークダウンの内容を変更する
GatsbyJS マークダウンにコンポーネントを表示する
■同じタグの記事を見る