Блог

Главная - Вопросы по программированию - Как подключиться к серверу Graphql с помощью Ember-Apollo?

Как подключиться к серверу Graphql с помощью Ember-Apollo?

#javascript #ember.js #graphql #apollo #ember-cli

#javascript #ember.js #graphql #apollo #ember-cli

Вопрос:

Я работаю с приложением на основе GraqlQL с полным стеком. Сервер работает нормально, и теперь мне нужно опробовать первые запросы и изменения на стороне клиента. По какой-то причине маршрут «мониторинг» и все, что за ним следует, не отображаются. Ниже я покажу файлы, которые я отредактировал или создал.

items.graphql:

 query {
  items {
    _id
    name
  }
}

environment.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?

Комментарии:

1. Я не знаком с этим вариантом graphql, но каков тип «модели»? Это массив или объект? Если вы добавите {{модель журнала}}, он будет выводиться на консоль

2. Это не работает даже после того, как я прокомментировал этот блок в шаблоне

3. Что не работает? Вы вошли в систему? Можете ли вы поделиться выводом?

4. model() { // let variables = { id: params.id }; console.log(model.toJSON()); верните this.apollo. watchQuery({ query }, ‘items’); } // не помогает

5. Я имел в виду войти в шаблон, чтобы увидеть, что возвращает ваш модельный хук. Оставьте маршрут как есть 🙂

Ответ №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);
  }
});