Help us understand the problem. What is going on with this article?

GraphCMS から入り、Absintheを利用して作って動かす「チュートリアル」

この記事は、「Elixir Advent Calendar 2019」の24日目になります。

「Elixir Advent Calendar 2019」23日目は、@sanpo_shihoさんのElixirで作るニューラルネットワークを用いた手書き数字認識①でした。

そしてこの記事は、「fukuoka.ex Elixir/Phoenix Advent Calendar 2019」の1日目から始まった3部作の3つ目の記事で、Advent Calendar NervesJP 6日目の続きになります。

東京だけど fukuoka.ex の YOSUKENAKAO.me です。

普段は合同会社The Waggleで「教育」に関わるサービス作りのお仕事と学習教材の開発や
研修講座の企画開発をしています。

この記事の構成
Advent Calendar fukuoka.ex 1日目
https://qiita.com/advent-calendar/2019/fukuokaex
GraphCMS から Absinthe を利用して作る Elixir で体験的に GraphQLSever を作る「ポエム」

Advent Calendar NervesJP 6日目
https://qiita.com/advent-calendar/2019/nervesjp
Nerves と GraphQLsever の組み合わせを考える「ポエム」

Advent Calendar Elixir 24日目
https://qiita.com/advent-calendar/2019/elixir
GraphCMS から入り、Absintheを利用して作って動かす「チュートリアル」

となっています。

対象者はプログラミングを始めたい人で、新しい技術を学びたい人

逆を言えば、このチュートリアルができない人で、プログラミングを学びたい人は
Elixir |> Collegeの対象者です。

また、このチュートリアルは完了して、日本語で学びたい人は TheWaggleのオンライン教材の対象者(2020年春頃ローンチに向けて作成中)です。

注意点

このチュートリアルは、最短で何を学ぶべきかと、流れを通してそれぞれの技術的な繋がりを把握してもらう為のものです。

独学ができる人に向けた最初の入り口です。
PHP? Python? Ruby? がやりたいだって?やりたい勉強すりゃいいよ。ただし一言だけ言っておく、Elixirは良いぞ(笑)

  • HTML,CSS,JavaScript
  • React
  • GraphCMS
  • Elixir
  • Phoenix
  • Ecto
  • GraphQL(Queryのみ)
  • Apollo
  • Absinthe
  • SQL
  • mix

チュートリアルの流れ

  1. GraphCMSのアカウント登録
  2. GraphCMSでModelの作成
  3. Reactの環境構築(Yarnが使える人は飛ばす)
  4. サンプルプログラムのダウンロードと作成
  5. サンプルデータの作成
  6. GraphCMS Endpointの設定
  7. ElixirでGraphQL Server構築

1.GraphCMSのアカウント登録

下記のサイトへアクセスしてください。
https://graphcms.com/

330af3a7-3a8c-52e5-1b79-e6fcb62fcfcd.png

  1. SignUpよりユーザー登録をします。
  2. その後、ログインして下さい。
  3. Login後、「Create new project」をクリックします。
    ae4f442c-2688-af08-0376-f60b318c919e.png

  4. 「Form Scrach」を選択します。

bdd26e33-0720-7b54-77a6-f598b079e763.png

5. 「Asia East」のリージョンを選びます。

f7a63dbe-f92b-c924-2d71-4d8b5c8938e9.png

6. Pearsonalプランを選択し、Continueを選びます。

9536e393-68dc-62a2-e802-5a82154136f0.png

7. モデルの作成から順に行って行きます。

f109de0f-aeae-aa14-37ac-8d633a176c7f.png

2. GraphCMSでModelの作成

8. Schemaの設定

Schemaと書かれたタイトルの下にModelsと書かれていてサイドに[+]のボタンがあります。

743a34b0-4370-1bb9-150b-43d4d9820eb0-1.png

9. Create Modelで「Display Name」の欄にAuthorと入力し、Create Modelを押します。

0e2b3e5b-5235-cd3f-2968-0b4c4211518c.png

10. 右側にFIELDSと書かれたタブが表示されるので、クリックします。

c781f204-fc61-5ae0-fa5a-19a6bb89127b.png

11. 様々なFiledsのタイプがあります。今回は、Single Textをドラッグしてドロップします。

9423fd1c-d442-ae67-c120-ffd0e32319c2.png

12. Display Nameに nameと入力します。

88bbaeed-7744-3e01-3e32-9d5bd197eb52.png

13. フィールドタイプが追加されるとこのような形になります。

b855a074-78fc-af15-7912-7861cda50ee8.png

同じ要領で、Authorのフィールドは以下のように設定します。

スクリーンショット 2019-12-23 20.15.57.png

14. Authorを設定したら新しく、ModelをPostで作成します。フィールドは以下のようにします。
スクリーンショット 2019-12-23 20.16.37.png

3.Reactの環境構築(Yarnが使える人は飛ばす)

NodeJSのインストール

https://nodejs.org/ja/

LTS版と最新版があります。 LTS版をインストール

インストールの確認

コンソールを再起動します。

node --version

次のv12.13.1ようにバージョン番号が表示されていたらインストール完了です。

npm --version

次のv6.12.1ようにバージョン番号が表示されていたら成功です。

Yarn install

https://yarnpkg.com/ja/docs/install#mac-stable

Windowsの場合は、yarn のインストーラーをダウンロードできるボタンが表示されるので
それをダウンロードしてインストールして下さい。

4. サンプルプログラムのダウンロードと作成

https://github.com/GraphCMS/graphcms-examples/tree/master/current/react-apollo-blog

上記のサイトに下記コマンドを実行と記載があるので、下記のコマンドを実行します。

git clone https://github.com/GraphCMS/graphcms-examples.git && cd graphcms-examples/current/react-apollo-blog && yarn && yarn start

実行すると、ブラウザでlocalhost:3000で以下のサイトが見れたら成功です。

blog_.png

5. サンプルデータの作成

  1. 「content」ボタン(三本の横棒マーク)をクリックし、データを入力したい、「Model名」(画像の例は、Author)を選びます。
  2. 「Create New」をクリックすると、入力フィールドが表示されるので、適当な値を入れて「Published」を選んで「Save」します。

※Postにも忘れずに、同じ要領でサンプルデータを作成してください。

sample_data_set.png

6. GraphCMS Endpointの設定

設定から、Endpointをコピーします。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323936322f66343739643633622d663938342d363839382d323733302d3761666335353961633036362e706e67.png

Endpointをコピーしたら、設定より、PermissionsのScopeを「PROTECTED」から「QUERY」に変更します。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323936322f36613236663035302d326638342d643965322d653162302d3631366139633264393532342e706e67.png

Endpointをプログラムに反映する

react-apollo-blog/src/index.js
// Replace this with your project's endpoint
 const GRAPHCMS_API = 'ここに先ほどコピーしたEndpointのURLを入れる'

index.jsの全体像
スクリーンショット 2019-12-24 10.12.43.png

ここまできたら yarn startで無事に自分の入力したデータが表示される事を確認します。

ここからは、こちらのブログで書いた手順の5番目以降の説明と同じものになります。
https://qiita.com/Yoosuke/items/2346137ac39715b19cde

6. Absinthe を使用して GraphQL のアプリをセットアップします。

mix.exs
defp deps do
 [
   # existing dependencies

   {:absinthe, "~> 1.4.16"},
   {:absinthe_plug, "~> 1.4.0"},
   {:absinthe_phoenix, "~> 1.4.0"}
 ]
end
mix deps.get

7.sampleBlog_web に schema フォルダを作成し、schema.ex ファイルを作成して、ファイルを作成します。

lib/sampleBlog_web/schema/schema.ex
defmodule SampleBlogWeb.Schema.Schema do
    use Absinthe.Schema

    query do
      @desc "Get a list of authors"
      field :authors, list_of(:authors) do
        resolve &SampleBlogWeb.Resolvers.Blog.authors/3
      end

      @desc "Get a author by its id"
      field :author, :author do
        arg :id, non_null(:id)
        resolve &SampleBlogWeb.Resolvers.Blog.author/3
      end
    end

    object :author do
      field :id, non_null(:id)
      field :name, non_null(:string)
      field :bibliography, non_null(:string)
    end
  end

8.リゾルバモジュールファイルを作成します。 sampleBlog_web に resolvers フォルダを作成し、blog.exファイルを作成して、ファイルを作成します。

lib/sampleBlog_web/resolvers/blog.ex
defmodule SampleBlog.Resolvers.Blog do
  alias Getaways.Blog

  def authors(_, _, _) do
    {:ok, Blog.list_authors()}
  end

  def author(_, %{id: id}, _) do
    {:ok, Blog.get_author!(id)}
  end
end

9.スキーマとリゾルバの準備をしたら、ルーターを設定します。

sampleBlog/lib/sampleBlog_web/router.ex
defmodule SampleBlogWeb.Router do
defmodule SampleBlogWeb.Router do
  use SampleBlogWeb, :router

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/" do
    pipe_through :api

    forward "/api", Absinthe.Plug,
      schema:  SampleBlogWeb.Schema.Schema

    forward "/graphiql", Absinthe.Plug.GraphiQL,
      schema:  SampleBlogWeb.Schema.Schema,
      interface: :simple
  end
end

最後にサーバーを起動してみます。

mix phx.server

これでlocalhost:4000/graphiqlにアクセスして以下の画面が出てきたら作成準備完了です。

キャプチャ.PNG

GraphQLのクエリを書く

query {
  authors{
     id
   name
    bibliography
  }
}

クエリを書いて、無事に成功していれば下記のようなデータが返ってきます。

graphql_1.PNG

React のreact-apollo-blog のAbout.jsに上記のクエリを上書きする

src/components/About.js
export const authors = gql`
query authors {
  authors{
    id
    name
    bibliography
  }
}
`

エンドポイントを書き換える

src/index.js
const GRAPHCMS_API = http://localhost:4000/api/

これで、yarn startしてlocalhost:3000/aboutページにアクセスすると、、、見れません。
エラーを確認するとクロスサイトスクリプティングの問題でデータが取得できてないです。そこで、GraphQL server側に機能を追加します。

Cros_plugを追加する

https://hex.pm/packages/cors_plug

mix.exs
  defp deps do
    [
# ~省略
      {:absinthe, "~> 1.4.2"},
      {:absinthe_plug, "~> 1.4.0"},
      {:absinthe_phoenix, "~> 1.4.0"},
      {:cors_plug, "~> 2.0"},     #<- 追加
    ]
  end

機能を追加する。

$ mix deps.get

router.exのパイプラインにプラグを追加

lib/sampleBlog_web/router.ex
  pipeline :api do
    plug CORSPlug, origin: "http://localhost:3000" #<-追加
    plug :accepts, ["json"]
  end

これで、http://localhost:3000/aboutにアクセスで以下のようにデータが取得できたら成功です。

blog.PNG

最後に

いかがだったでしょうか、あまりにも長いのでもしかしたら、抜け漏れがあるかもしれません。
見つけたら遠慮なく、おしらせ下さい。喜んで修正したいと思います。

よければ、いいね。よろしくお願いします。励みになります。

fukuokaex
エンジニア/企業向けにElixirプロダクト開発・SI案件開発を支援する福岡のコミュニティ
https://fukuokaex.fun/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした