Ember.js 是一个流行的前端框架，而 GraphQL 是一种强大的查询语言。现如今，很多前端项目都在使用 GraphQL。
本文将介绍如何在 Ember.js 项目中使用 npm 包 ember-graphql-tools-shim 来集成 GraphQL。本文将涵盖以下主题：
- ember-graphql-tools-shim 简介
- 安装并配置 ember-graphql-tools-shim
- 如何在 Ember.js 项目中集成 GraphQL
- 示例代码
ember-graphql-tools-shim 简介
ember-graphql-tools-shim 是一个 Ember.js 的插件，可以将 GraphQL 集成到项目中，使我们能够更加方便地使用 GraphQL。该插件是由 apolloengine.io 提供的，可以用于更好地管理 GraphQL 的查询、缓存、数据加载和错误处理。
安装并配置 ember-graphql-tools-shim
在使用 ember-graphql-tools-shim 之前，您需要先在本地安装 Ember.js，然后再安装该插件。您可以按照以下步骤进行操作：
执行以下代码，在本地安装 Ember.js：
npm install -g ember-cli
在 Ember.js 项目中，执行以下代码安装 ember-graphql-tools-shim :
ember install ember-graphql-tools-shim
然后，在您的项目的
./ember-cli-build.js文件中添加以下代码：const app = new EmberApp(defaults, { // ... 'ember-graphql-tools-shim': { // ... graphQLShimPath: 'node_modules/ember-graphql-tools-shim/app-shims/graphql-tools.js' // 指定 graphql-tools.js 文件路径（根据具体情况可自行指定） } });最后，在
ember-cli-build.js文件中配置您的 Apollo Client，以便在 Ember.js 中使用 GraphQL。-- -------------------- ---- ------- -- ----------------------- -- ----- ------------ - ------------------------- ----- - ------------- - - --------------------------------- ----- - -------- - - ---------------------------- ----- ------ - --- -------------- ----- --- ---------- ---- ------------------------------- --- ------ --- --------------- ---
如何在 Ember.js 项目中集成 GraphQL
在您的组件、路由或服务中调用
graphql函数，执行 GraphQL 查询。-- -------------------- ---- ------- -- ---- ------ - ------- - ---- --------------------------- ------ ------- -------------- ------- ---------- ------- - --- ------ - ------------------- --- ----- - -- --- ------- ---- --- ------ --------------- ------ - -- ----- -- --- - ---然后，在您的模板中使用之前查询到的数据。
<!-- 示例代码 --> <ul> {{#each model as |data|}} <li>{{data}}</li> {{/each}} </ul>
示例代码
下面是一个完整的 Ember.js 组件示例，可以使用 GraphQL 查询 GitHub 上的前 10 个仓库，并在模板中显示它们的名称和所有者名称。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------ -- ------- - ---- -----------------
------ - ------- - ---- ----------------------
----- ----- - -
----- ---------------- ----- -
------------------ --------------- -
----- -
----
----- -
-----
-
-
-
-
--
------ ------- ------------------
------- ----------
-------------- ---
------------- -----
----- ------------------ -
--- ----- - ------
--- --------- - - -------------- ------------------------- --
--- -------- - ----- --------------------------- ------ -----------
------------------------ -----------------------------
--
-------- -
---------- -
------------------------- ------------------------- - ----
------------------------
-
-
---<!-- 模板示例代码 -->
<ul>
{{#each repositories as |repo|}}
<li>{{repo.owner.login}}/{{repo.name}}</li>
{{/each}}
</ul>
<button {{action "increase"}}>加载更多</button>上述代码向我们演示了如何在 Ember.js 中使用 GraphQL 查询数据的基本流程，以及如何在组件的模板中显示查询到的数据。当然，您需要按照实际的项目需求，对代码进行相应的修改和调整。
总的来说，ember-graphql-tools-shim 插件可以让我们更加方便地在 Ember.js 中使用 GraphQL，提高开发效率，降低出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e14a563576b7b1ec9e6