如何使用 Ember-Apollo 连接到 Graphql 服务器？答案

【问题标题】：How to connect to Graphql server using Ember-Apollo?如何使用 Ember-Apollo 连接到 Graphql 服务器？
【发布时间】：2025-12-11 21:25:03
【问题描述】：

我正在使用基于 GraqlQL 的全栈应用程序。服务器工作正常，现在我需要在客户端尝试第一个查询和突变。出于某种原因，“监控”路线及其后面的所有内容都不会显示。下面我将展示我编辑或创建的文件。

items.graphql：

query {
  items {
    _id
    name
  }
}

环境.js：

'use strict';

module.exports = function(environment) {
  let ENV = {
    apollo: {
      apiURL: 'http://localhost:5000/graphql'
    },
    modulePrefix: 'client',
    environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        //
      },
      EXTEND_PROTOTYPES: {
        Date: false
      }
    },

    APP: {
      //
    }
  };

  if (environment === 'development') {
    //
  }

  if (environment === 'test') {
    ENV.locationType = 'none';

    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
    ENV.APP.autoboot = false;
  }

  if (environment === 'production') {
    //
  }

  return ENV;
};

monitoring.js（路由）：

import Route from '@ember/routing/route';
import { queryManager } from 'ember-apollo-client';
import query from 'client/gql/items.graphql';

export default Route.extend({
  apollo: queryManager(),

  model() {
    return this.apollo.watchQuery({ query }, 'items');
  }
});

monitoring.hbs：

<h3>Monitoring</h3>

<div>
  {{#each model as |item|}}
    <h3>{{item.name}}</h3>
  {{/each}}
</div>

{{outlet}}

感谢您的关注！

我看到了这个错误：

Uncaught (in promise) Error: fetch is not defined - maybe your browser targets are not covering everything you need?

【问题讨论】：

我不熟悉 graphql 的这个变体，但是“模型”的类型是什么？它是数组还是对象？如果您添加 {{log model}}，它将打印到控制台
即使我在模板中评论了这个块，它也不起作用
什么不起作用？你登录了吗？你能分享一下输出吗？
model() { // let variables = { id: params.id }; console.log(model.toJSON());返回 this.apollo.watchQuery({ query }, 'items'); } // 没有帮助
我的意思是登录模板以查看您的模型挂钩返回的内容。保持路线原样:)

标签： javascript ember.js graphql apollo ember-cli

【解决方案1】：

解决方案是解决两件事。首先是把它放在 ember-cli-build.js 中：

'ember-fetch': {
  preferNative: true
}

并修复路由文件：

import Route from '@ember/routing/route';
import { queryManager } from 'ember-apollo-client';
import query from 'client/gql/queries/items.graphql';

export default Route.extend({
  apollo: queryManager(),

  async model() {
    let queryResults = await this.apollo.watchQuery({ query }, 'items');
    return Object.values(queryResults);
  }
});

【讨论】：