# @dillonkearns/elm-graphql 中文文档

规范地址：https://npmcn.com/package/%40dillonkearns/elm-graphql/

版本：4\.3\.2
npm 元数据更新时间：2025-06-23T14:12:02.907Z
中文译文更新时间：2026-11-12T09:46:43.411Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dillonkearns/elm-graphql
原文对照：https://npmcn.com/package/%40dillonkearns/elm-graphql/?lang=original
项目主页：https://github.com/dillonkearns/elm-graphql#readme
源码仓库：https://github.com/dillonkearns/elm-graphql

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.6 MB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2018-08-22T17:41:27.424Z
- 最新版本发布：2025-06-23T14:12:02.721Z
- 近 30 天下载量：37076（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 0 个）

## 中文简介

[![Build Status](https://github.com/dillonkearns/elm-graphql/workflows/CI/badge.svg)](https://github.com/dillonkearns/elm-graphql/actions?query=branch%3Amaster) \[![Elm package](https://img.shields.io/elm-package/v/dillonkearns/elm-graphql.svg)(https://pa) (中文(简体) )

## 安装

```sh
npm install @dillonkearns/elm-graphql
```

也可以使用：`pnpm add @dillonkearns/elm-graphql`、`yarn add @dillonkearns/elm-graphql`、`bun add @dillonkearns/elm-graphql`

## README

# 缩写/缩写

[![Build Status](https://github.com/dillonkearns/elm-graphql/workflows/CI/badge.svg)](https://github.com/dillonkearns/elm-graphql/actions?query=branch%3Amaster) [![Elm package](https://img.shields.io/elm-package/v/dillonkearns/elm-graphql.svg)](https://package.elm-lang.org/packages/dillonkearns/elm-graphql/latest/) [![npm](https://img.shields.io/npm/v/@dillonkearns/elm-graphql.svg)](https://npmjs.com/package/@dillonkearns/elm-graphql)

![elm-graphql logo](https://res.cloudinary.com/dillonkearns/image/upload/f_png,w_150,q_100/v1603750625/elm-graphql-logo.svg)

为什么用这个包来代替其他可用的 Elm GraphQL 包 ? 这是唯一的一个 为您的整个计划创建类型安全代码。 看看这个博客文章, [Elm 中的安全类型和可编译图形QL](https://medium.com/open-graphql/type-safe-composable-graphql-in-elm-b3378cc8d021)了解这个图书馆的动机 (这也是唯一安全的型号) 包含 Elm 0.18 或 0.19 支持的库,参见 [此语句线索](https://discourse.elm-lang.org/t/introducing-graphqelm-a-tool-for-type-safe-graphql-queries/472/5?u=dillonkearns)) (中文(简体) ).

我建这个包裹是因为我想要的东西:

1.  给您打入安全字的 GraphQL 查询(如果它编译出来,它根据计划是有效的),
2.  以无缝和安全的方式为您创建解码器
3.  消除有利于 Elm 语言构造的 GraphQL 特性,尽可能为更简单的 UX (例如 GraphQL 变量和片段应该只是 Elm 函数,常数, lets) .

见 [关于Ellie的行动实例](https://rebrand.ly/graphqelm)。在 [`examples/`](https://github.com/dillonkearns/elm-graphql/tree/master/examples) 文件夹.

## 概览

`dillonkearns/elm-graphql` 是一个 Elm 软件包和附带的命令行代码生成器,它为您的 GraphQL 端点创建了类型安全 Elm 代码。 你不为你的API写解码器 `dillonkearns/elm-graphql`,相反,您只是选择您想要的字段,类似于标准的 GraphQL 查询,但在 Elm 中。 例如,此 GraphQL 查询

```graphql
query {
  human(id: "1001") {
    name
    homePlanet
  }
}
```

看着 [像这样](https://github.com/dillonkearns/elm-graphql/blob/master/examples/src/ExampleFromReadme.elm) 内 `dillonkearns/elm-graphql` (此示例中的代码前缀为 `StarWars` 自动生成)

```elm
import Graphql.Operation exposing (RootQuery)
import Graphql.SelectionSet as SelectionSet exposing (SelectionSet)
import StarWars.Object
import StarWars.Object.Human as Human
import StarWars.Query as Query
import StarWars.Scalar exposing (Id(..))


query : SelectionSet (Maybe HumanData) RootQuery
query =
    Query.human { id = Id "1001" } humanSelection


type alias HumanData =
    { name : String
    , homePlanet : Maybe String
    }


humanSelection : SelectionSet HumanData StarWars.Object.Human
humanSelection =
    SelectionSet.map2 HumanData
        Human.name
        Human.homePlanet
```

GraphQL 和 Elm 是完美的匹配, 因为 GraphQL 用于强制执行您的 API 作为输入和输出的类型, 很像 Elm 的类型系统在 Elm 内部所做的 . `elm-graphql` 仅仅通过让您的 Elm 代码意识到您的 GraphQL 服务器的策略来弥补这个缺口 。 如果你是GraphQL新手的话, [图ql.org/learn/ (中文(简体) )](http://graphql.org/learn/) 是学习基本知识的好方法.

根据安装指令安装 [`@dillonkearns/elm-graphql`](https://npmjs.com/package/@dillonkearns/elm-graphql) 国家防范机制一揽子计划和适当的榆树一揽子计划(见 [设置区域](https://github.com/dillonkearns/elm-graphql#setup) 详细情况请查阅. 一旦你安装了一切,运行 `elm-graphql` 代码生成工具 就这么简单:

```bash
npx @dillonkearns/elm-graphql https://elm-graphql.onrender.com --base StarWars --output examples/src
```

如果需要信头,例如Bearer Token,则 `--header` 旗帜可以提供.

```bash
npx @dillonkearns/elm-graphql https://elm-graphql.onrender.com --base StarWars --output examples/src --header 'headerKey: header value'
```

## 学习资源

-   里面有一个完整的教程 [页:1 `SelectionSet` 文档](https://package.elm-lang.org/packages/dillonkearns/elm-graphql/latest/Graphql-SelectionSet)。 。 。 . `SelectionSet`s是这个库的核心概念, 所以我建议通过整个页面阅读(时间不长.
    
-   这个 [`examples/`](https://github.com/dillonkearns/elm-graphql/tree/master/examples) 文件夹是另一个很好的开始地 .
    
-   如果你想学习更多的 GraphQL 基础, 这是一个伟大的辅导, 并短读: [图ql.org/learn/ (中文(简体) )](http://graphql.org/learn/)
    
-   我的"精灵之会"2018年演讲进入了背后的哲学 `dillonkearns/elm-graphql`
    

[![Types Without Borders Elm Conf Talk](https://npmcn.com/package/%40dillonkearns/elm-graphql/assets/types-without-borders.png)](https://www.youtube.com/watch?v=memIRXFSNkU)

(单位:千美元)[跳转到 13: 06](https://youtu.be/memIRXFSNkU?t=786) 直接去到 `dillonkearns/elm-graphql` 演示).

-   我10分钟的视频辅导 如何利用自定义 Scalars in `elm-graphql` 使用 Scalar 代码特性. [![Scalar Codecs Tutorial](https://npmcn.com/package/%40dillonkearns/elm-graphql/assets/scalar-codecs-tutorial.png)](https://incrementalelm.com/scalar-codecs-tutorial)

-   [用 Elm 绘制图形QL 初始指南](https://medium.com/@zenitram.oiram/a-beginners-guide-to-graphql-with-elm-315b580f0aad) 以 [@ martimatix](https://github.com/martimatix)
-   [塞缪尔·伍德的精灵图克指南](https://medium.com/@samote.wood/an-intro-to-elm-graphql-cac214cc048)
-   [Graphqelm: 无可选参数的语言中的可选参数](https://medium.com/@zenitram.oiram/graphqelm-optional-arguments-in-a-language-without-optional-arguments-d8074ca3cf74) 以 [@ martimatix](https://github.com/martimatix)
-   [Hasura小组的综合辅导](https://learn.hasura.io/graphql/elm-graphql/introduction)

如果你想知道为什么代码是用某种方式生成的, 你很可能在其中找到一个答案 [常被问到的问题(FAQ)](https://github.com/dillonkearns/elm-graphql/blob/master/FAQ.md)。 。 。 .

#graphql频道中有一群人非常有帮助 [精灵之克](http://elmlang.herokuapp.com/)不要犹豫 问任何问题 关于开始,最佳做法, 或只是通用 GraphQL在那里!

## 设置

`dillonkearns/elm-graphql` 生成允许您建立类型安全GraphQL请求的榆树代码。 这里有设置步骤 `dillonkearns/elm-graphql`。 。 。 .

1.  添加 [页:1 `dillonkearns/elm-graphql` 精灵包](http://package.elm-lang.org/packages/dillonkearns/elm-graphql/latest) 作为你 `elm.json`您还需要确保 `elm/json` 是您工程的依赖关系 因为生成的代码里面有很多JSON解码器.
    
    ```shell
    elm install dillonkearns/elm-graphql
    elm install elm/json
    ```
    
2.  安装 `@dillonkearns/elm-graphql` 命令行工具通过 npm。 这是您用来生成 Elm 代码的 API . 建议您保存 `@dillonkearns/elm-graphql` 命令行工具作为 dev 依赖, 以便每个人对您的项目使用相同的版本 .
    
    ```shell
    npm install --save-dev @dillonkearns/elm-graphql
    # you can now run it locally using `npx elm-graphql`,
    # or by calling it through an npm script as in this project's package.json
    ```
    
3.  运行 `@dillonkearns/elm-graphql` 命令行工具上安装以生成代码。 如果你用这个 `--save-dev` 方法上,您可以简单地在您的软件包中创建脚本. json类似如下:
    
    ```
    {
      "name": "star-wars-elm-graphql-project",
      "version": "1.0.0",
      "scripts": {
        "api": "elm-graphql https://elm-graphql.onrender.com/api --base StarWars"
      }
    ```
    
4.  上面写着: `package.json`运行 `npm run api` 将生成 `dillonkearns/elm-graphql` 您需要调用代码 `./src/StarWars/`。您现在可以像这里那样使用生成的代码 [艾丽的例子](https://rebrand.ly/graphqelm) 或其中 [`examples`](https://github.com/dillonkearns/elm-graphql/tree/master/examples) 文件夹.
    

## 订阅支持

您可以使用 GraphQL 订阅和 `dillonkearns/elm-graphql`。 。 。 . 打开 WebSocket 连接的框架专用 JavaScript 代码中的线 通过一个港口。 这是 [现场演示](https://dillonkearns.github.io/elm-graphql/) 联 合 国 [源代码](https://github.com/dillonkearns/elm-graphql/tree/master/examples/subscription)编辑 [演示服务器正在运行 Elixir/ Absinthe](https://github.com/dillonkearns/graphqelm-demo)。 。 。 .

## 贡献者

感谢马里奥·马丁内斯[马提马提克斯](https://github.com/martimatix)用于 所有反馈,精灵格式的公关,和用于 [不可思议的标志设计](https://github.com/martimatix/logo-graphqelm/)来啊!

谢谢迈克·斯托克(英语:[迈克斯托克](https://github.com/mikeastock/)用于 陷害崔维斯CI!

谢谢 [保留字词拉动请求](https://github.com/dillonkearns/elm-graphql/pull/41) @madsflensted(英语:!

非常感谢 [@xtian (韩语)](https://github.com/xtian) 做绝大多数 会 议 日 程 和 议 程 [0.19 升级工作](https://github.com/dillonkearns/elm-graphql/pull/60)塔达:

谢谢 [乔什·亚当斯(@knewter)](https://github.com/knewter) 代码示例 埃利克西尔/阿布辛的订阅通过榆树端口连接!!

谢谢 [罗姆里奥](https://github.com/romariolopezc) 用于添加 [`OptionalArgument.map`](https://github.com/dillonkearns/elm-graphql/pull/73)来啊!

谢谢 [亚伦·怀特](https://github.com/aaronwhite) 页:1 [您的拉动请求以改善性能和 联合国 `elm-format` 步骤](https://github.com/dillonkearns/elm-graphql/pull/87)!

## 路线图

所有核心特性都得到支持。 也就是说,你可以构建任何查询或突变 还有你的 `dillonkearns/elm-graphql`\- 生成代码,并且保证它有效 到您的服务器的策略.

`dillonkearns/elm-graphql` 将生成代码供您生成订阅 并解码答复,但它不处理低级细节 如何通过网络套接字发送它们。 要做到这一点,你需要使用 自定义代码或知道如何通过websockets(或以 协议),以您特定的框架设置订阅. 见 [本次讨论](https://github.com/dillonkearns/elm-graphql/issues/43) 为什么 这些细节不是由这个图书馆直接处理的.

如果你使用 GraphQL 订阅, 我很乐意听到反馈。 特别是, 我很想看看现场的代码 来推动订阅的任何改进 设计。 请帮我查查Slack 留言 [\# 图克勒#](https://elmlang.slack.com/channels/graphql) 频道,或打开一个 Github问题要讨论!

我想调查一下帮手的生成情况 以便更简单 连接(基于 [中继光标连接规格](https://relay.dev/graphql/connections.htm)) (中文(简体) ). 狦稱硂 chi [此线程](https://github.com/dillonkearns/elm-graphql/issues/29)。 。 。 .

见 [关于特雷洛的完整路线图](https://trello.com/b/BCIWtZeL/dillonkearns-elm-graphql)。 。 。 .

## 常见问题

### @dillonkearns/elm-graphql 是什么？

\[\(https://pa\) \(中文\(简体\) \)

### 如何安装 @dillonkearns/elm-graphql？

在项目目录运行 npm install @dillonkearns/elm-graphql，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 elm-graphql，可以用 npx elm-graphql 直接运行。

### @dillonkearns/elm-graphql 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dillonkearns\_\_elm-graphql 是否存在。

### @dillonkearns/elm-graphql 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dillonkearns/elm-graphql 可以商用吗？

@dillonkearns/elm-graphql 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @dillonkearns/elm-graphql 的下载量有多少？

根据 npm 官方下载统计，@dillonkearns/elm-graphql 在 2026/10/12 – 2026/11/10 这 30 天内被下载 37,076 次，日均约 1,236 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dillonkearns/elm-graphql 还在维护吗？

最新版本 4\.3\.2 发布于 2025/06/23（1\.4 年前）；至今共发布 43 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。