LoginSignup
TrendQuestionOfficial EventOfficial ColumnOpportunitiesOrganization
8
3

More than 3 years have passed since last update.

Elixir Advent Calendar 2019 Day 24

@Yoosuke(fukuoka.ex：福岡Elixirコミュ)

posted at

updated at

Organization

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

Elixir,Phoenix,React,Absinthe,GraphCMS

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

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

そしてこの記事は、「fukuoka.ex Elixir／Phoenix Advent Calendar 2019」の1日目から始まった３部作の３つ目の記事で、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

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

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

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

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

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

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

2. GraphCMSでModelの作成

８. Schemaの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

NodeJSのインストール

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

インストールの確認

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

node --version

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

npm --version

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

Yarn install

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

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

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

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で無事に自分の入力したデータが表示される事を確認します。

ここからは、こちらのブログで書いた手順の５番目以降の説明と同じものになります。
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を追加する

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

最後に

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
8
3