如果使用 elm-form-decoder 对用户输入进行类型定义，然后使用 elm-graphql 进行操作

由于我对AdCare文章中大家过度努力的问题表示共鸣，尽量想要简略一些。

借助道具的支撑

arowM/elm-form-decoder是一个用于解码HTML表单中用户输入的库。

• アプリケーションの要請に基づくValidationを行い、

かつ、適切な型を与える、

这是一个优秀的抽象概念。

此外，dillonkearns/elm-graphql的API以类型SelectionSet为核心。

• サーバ側のexposeするGraphQLスキーマに沿ったElm側moduleを自動生成した上で、

GraphQLの強みである操作(operation)の組み合わせを容易にする、

如果你目前在使用Elm处理GraphQL的话，可以说这是一个非常成熟的包。

如果你对类似于Json.Decoder的抽象化有一定的熟悉度，那么你应该能够直观地向上迈进。

给出一些解释和介绍两者的日语文章的链接

• フォームバリデーションからフォームデコーディングの時代へ

• arowM/elm-form-decoderのAPIを【かんぜんりかい】しよう！

ElmとGraphQLの出会い – さようならJson Decoder !

如果解码Form，则将其输入SelectionSet就可以搞定了。

在elm-form-decoder中，首先将用户输入保存在类似Form的预先准备好的记录中，并将其”解码”为具有适当类型的Elm值。这个过程由Form.Decoder中的程序执行。

Form.Decoder input error output

所以，您需要输入类型、错误类型以及成功时的输出类型。

ユーザ入力
 ↓
Form
 |
 | (Form.Decoder Form error output)
 ↓
output

在一方面的 elm-graphql 中，基于服务器的模式，操作（查询或变更）被生成为函数的代码。这些函数具有 SelectionSet 类型。SelectionSet 类型是……

• 組み合わせ・合成(compose)できるようになっている

• Composeしたものを最終的に送信APIに投入すれば、サーバへの送信とエラー検知はよしなにやってくれる2

あるoperationのために必要な引数の情報を格納する
さらに、operationが成功したときのレスポンスを最終的にどのようなElm型で受けるか、という情報も保持する、

以下是以多种方式组织的结构。

SelectionSet decodesTo typeLock

type Lock的含义可能有些模糊，但是它可以表示操作类型的RootQuery、RootMutation或RootSubscription之一，或者是通过codec进行转换的原始数据类型。

通常从表单接收值并进行一些操作是通过mutation实现的，mutation需要参数（arguments），并且其响应类型也在模式中定义。

elm-graphql 可以根据模式生成以下类型和函数。

-- 生成コード

type alias MyMutationRequiredArguments =
    { value : String
    }


myMutation :
    MyMutationRequiredArguments
    -> SelectionSet decodesTo AutoGenerated.Object.ResponseObject
    -> SelectionSet decodesTo RootMutation
-- 実装は複雑なので略

换句话说，最简单的用法就是将表单的用户输入解码为MyMutationRequiredArguments，然后在myMutation函数中连接到SelectionSet中。

在这种情况下，我们还提供了将模式中定义的响应类型（在此示例中为ResponseObject）转换为稍后用于Elm的类型的SelectionSet。

ユーザ入力
 ↓
Form
 |
 | (Form.Decoder Form error MyMutationRequiredArguments)
 ↓
MyMutationRequiredArguments
 |
 | (myMutation)
 | (SelectionSet AtodeTsukauKata ResponseObject)
 ↓
SelectionSet AtodeTsukauKata RootMutation

只要把這個東西直接塞到 elm-graphql 的發送API中，結果就會返回成 Result error AtodeTsukauKata！好了，接下來就拜託了！再見！

我希望能在一种被保护起来的温水中纯净培养并存活下去。

Elm-GraphQL 生成的类型（只要没有错误）与模式是匹配的，因此 3。

ユーザ入力
 ↓
Form                                     -┐
 ↓                                        |
MyMutationRequiredArguments               |     ∧∧∧∧∧∧∧∧
 ↓                                        |-- < 型で守られてる！>
SelectionSet AtodeTsukauKata RootMutation |     ∨∨∨∨∨∨∨∨
                                          |
GraphQL schema                           -┘

如果服务器端的API也是通过GraphQL Schema自动生成的实现方法创建的，那么

ユーザ入力
 ↓
Form                                     -┐
 ↓                                        |
MyMutationRequiredArguments               |     ∧∧∧∧∧∧∧∧
 ↓                                        |-- < 型で守られてる！>
SelectionSet AtodeTsukauKata RootMutation |     ∨∨∨∨∨∨∨∨
 ↓                                        |
GraphQL API (GraphQL schema)             -┘

如果服务器的实现语言是静态类型的话，那么连数据库也能一直受到类型的保护。真棒！

说实话，Form.Decoder和SelectionSet的设计都很周密，尤其是它们的可组合性很高，而且很难迷失方向（只要你熟悉类型拼图，你基本上就可以完成想做的事情），所以我认为使用Elm进行服务开发会加速开发的乐趣。如果想要了解更多细节，请在评论或Twitter上提问，我会尽快回答。（现在正是Advent Calendar的时期，可能还会有其他文章发表）

祝你有一个美好的Elm生活！