仙丹 × GraphQL 系列

~ 快速进行Abshinthe-crient设置 ~

这篇文章是「Elixir连环日历2022」的第15篇。
我是YOSUKE，虽然我在东京，但我是fukuoka.ex的成员。

这是GraphQL设置系列的第二篇文章。本次我们将简洁地写下GraphQL客户端的设置步骤，只提供简单的指南。以这个理念为基础进行创建。

我计划将这个系列作为三部曲。

创建项目

mix phx.new ql_crient --no-ecto

添加依赖关系

defp deps do
    [
    # 省略 #
      {:absinthe_client, "~> 0.1.0"}
    ]
  end

执行

mix deps.get

为了确保与在Elixir × GraphQL系列1中创建的服务器的端口号4000不重叠，将端口号更改为4001。

# 省略　#
config :ql_crient, QlCrientWeb.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 4001],
# 省略 #

我们已经完成了，立即启动服务器吧。

iex -S mix phx.server

首先，在iex上尝试获取数据。
同时，将之前创建的GraphQL服务器也启动起来。

iex> alias AbsintheClient.{Utils, WebSocket}
iex> alias Req.Request
iex> req = Req.new(base_url: "http://localhost:4000/api") |> AbsintheClient.attach()
%Req.Request{
  method: :get,
  url: URI.parse(""),
  headers: [],
  body: nil,
  options: %{base_url: "http://localhost:4000/api"},
  registered_options: #MapSet<[:async, :auth, :base_url, :cache, :cache_dir,
# 省略 #

只需在Req.post!函数中编写一个仅包含所需数据的GraphQL来获取以下数据，如果能够获取成功，则表示成功。

iex()> Req.post!(req,
...()> graphql: """  
...()> query {
...()>  places {
...()>  id
...()>  name
...()>  }
...()> }
...()> """
...()> ).body["data"]
%{
  "places" => [
    %{"id" => "1", "name" => "test1"},
    %{"id" => "2", "name" => "test2"},
    %{"id" => "3", "name" => "test3"}
  ]
}

因为确认可以获取数据，所以开始实施。

defmodule QlCrientWeb.Graphql.Query do
  alias AbsintheClient.{Utils, WebSocket}
  alias Req.Request

  def set(path) do
    Req.new(base_url: "#{path}") |> AbsintheClient.attach()
  end

  def places_all_post!(req) do
    Req.post!(req,
      graphql: """
        query {
          places {
            id
            name
            location
            lat
            lon
            scale
          }
        }
      """
    ).body["data"]
  end
end

暫時，嘗試在 index.html.heex 中使用上述函數顯示數據。

<%
  req = QlCrientWeb.Graphql.Query.set("http://localhost:4000/api")
  %{ "places" => lists } = QlCrientWeb.Graphql.Query.places_all_post!(req)
%>

<section class="phx-hero">
  <%= for list <- lists do %>
    <h2>  <%= list["name"] %> </h2><br>
  <% end %>
</section>

暂时先以以下方式显示即为成功！

好的，總結一下，我們的準備工作到此為止已經完成了。終於建立起了可以進行各種事情的基礎，是吧。