ReactからFaunaDBに接続する(サーバのJavaScript経由)

2019-10-07

Reactから手軽にアクセスできるDBを探していいたらFaunaDBというものがあったのでメモ。

今回やっていることはこちらのチュートリアルの内容。

目次

チュートリアルの内容

こんな感じのTODOアプリが動きます。
TODOを登録したり、 netlify_react_faunadb_10.png

チェックを入れたり。
netlify_react_faunadb_11.png

元のチュートリアルでは画面を操作すると、 Netlify Functionsへ処理を投げ、FaunaDBへ参照するという内容ですが、
とりあえずローカル環境で動かしてみます。

FaunaDBでデータベース作成

データベース作成

  1. ログインしたての何もない画面の「NEW DATABASE」からDBを作成する。今回はDB名「Netlify」で作成する。

netlify_react_faunadb_1.png

  1. 完成!!

netlify_react_faunadb_2.png

アクセスキーを作成する

  1. Netlifyデータベースメニューに入った後、「SECURITY」メニューへ遷移。

「NEW KEY」からキー情報を入力する

netlify_react_faunadb_3.png

  1. 完成!!
    2度と表示されないので、ちゃんと保存しておく。
    netlify_react_faunadb_4.png

ローカルで動かしてみる

  1. コードの取得

チュートリアル用のコードはここからgitで取得する。

# gitで取得
git clone git@github.com:netlify/netlify-faunadb-example.git
cd netlify-faunadb-example
# 依存環境のインストール
npm install
  1. アクセスキーを環境変数にセットする
    コード内で環境変数に設定されているアクセスキーを使用しているので、セットする。
# Linux、Macの場合
export FAUNADB_SERVER_SECRET=アクセスキー
# Windowsの場合
set FAUNADB_SERVER_SECRET=アクセスキー
  1. Collectionの作成
    /scripts/bootstrap-fauna-database.jsに作成コードが記述されているので、実行する。
npm run bootstrap

# 無事終わると完了メッセージが表示される。
Creating your FaunaDB Database...

Create the database!
Database created

FaunaDBを見ても[todos]、[all_todos] が作成されていることが確認できる。

netlify_react_faunadb_6.png

  1. さっそくコードを動かしてみる
npm start

# 実行完了すると↓のメッセージが表示される
Compiled successfully!

You can now view netlify-fauna in the browser.

  Local:            http://localhost:3000/

ブラウザでhttp://localhost:3000/にアクセスすると、アプリが表示される

netlify_react_faunadb_7.png

  1. ちゃんと動くか確認

さっそくTODOを追加してみる。

netlify_react_faunadb_8.png

FaunaDBを見ても追加されていることが確認できるすごい。

netlify_react_faunadb_9.png

TODO登録時の処理の流れを見てみる

画面で[Create todo]ボタンを押した時の処理の流れはざっくり
ブラウザ(App.js)

サーバーサイド(functions\todos-create.js)

FaunaDB
となっている。

  1. src/App.jsのsaveTodoが実行され、入力された値api.createに渡している。
src/App.js
  saveTodo = (e) => {
    ...省略

    const todoInfo = {
      title: todoValue,
      completed: false,
    }

    ...省略

    // 入力された情報(todoInfo)をsrc\utils\api.jsのcreateに渡す
    api.create(todoInfo).then((response) => {
      console.log(response)
      // remove temporaryValue from state and persist API response
      const persistedState = removeOptimisticTodo(todos).concat(response)
      // Set persisted value to state
      this.setState({
        todos: persistedState
      })
    }).catch((e) => {
      console.log('An API error occurred', e)
      const revertedState = removeOptimisticTodo(todos)
      // Reset to original state
      this.setState({
        todos: revertedState
      })
    })
  }
  1. src\utils\api.jsのapi.createでサーバ側のtodos-createへ渡している。
src\utils\api.js
const create = (data) => {
  //渡された入力値(data)をパラメータにセットして非同期通信
  return fetch('/.netlify/functions/todos-create', {
    body: JSON.stringify(data),
    method: 'POST'
  }).then(response => {
    return response.json()
  })
}

※サーバ側のURLが「.netlify」で始まっているのは、[Netlify Functions]上のプログラムに渡すことを想定しているため。
なぜローカルでも動くかは[src\setupProxy.js]でURLの変換をおこなっているから(実際はfunctions\todos-createへ通信している)。

  1. faunaDB sdkを使いデータを登録する。

登録処理はAPIが用意されているのでfaunadbをインポートする(FQLというらしい)。
Create関数を使用して、渡された入力値の登録処理を行っている。

functions\todos-create.js
import faunadb from 'faunadb' /* Import faunaDB sdk */

// faunadbクエリとクライアントのインスタンスを作成
// process.env.FAUNADB_SERVER_SECRETは環境変数のアクセスキーが渡される
const q = faunadb.query
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SERVER_SECRET
})

exports.handler = (event, context, callback) => {
  const data = JSON.parse(event.body)
  const todoItem = {
    data: data
  }
  // 渡された入力値(todoItem)をtodosコレクションに作成する
  return client.query(q.Create(q.Ref('classes/todos'), todoItem))
    .then((response) => {
      ・・・成功処理
    }).catch((error) => {
      ・・・エラー処理
    })
}
  1. その他のAPI

他の機能も登録処理と同じような流れ(更新時はq.Update、読み込みはq.Get)。
詳しいドキュメントはこちらにまとまっていました。
GraphQLを使っても登録、読み込みは可能のようです。

参考

Building Serverless CRUD apps with Netlify Functions & FaunaDB
FaunaDB documentation

■同じタグの記事(最新5件)
GatsbyJS FaunaDBからデータを取得する
■同じタグの記事を見る