How to connect to Graphql server using Ember-Apollo?

1

Hello! I am working with a full stack GraqlQL based application. The server is working fine and now I need to try out the first queries and mutations on the client side. For some reason, the “monitoring” route, and everything that follows it, is not displayed. Below I will show the files that I have edited or created.

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 (route):

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}}

Thank you for attention!

2

Do you have any console errors? If nothing from the route is displayed it sounds like there could be an error happening somewhere.

If the heading/etc is rendering but not the model… what happens if you stick

{{log model}}

in the template?

1 Like
3

I tried, but it doesn’t help. I see this error: “Uncaught (in promise) Error: fetch is not defined - maybe your browser targets are not covering everything you need?”

4

Do you have ember-fetch installed in your app package.json? And if not how did you install ember-apollo-client? If you didn’t use ember install ember-apollo-client it didn’t run the default blueprint which appears to install ember-fetch. You can run it manually via ember g ember-apollo-client or you can just install ember-fetch.

1 Like
5

Yes, I have installed ember-apollo-client and ember-fetch. Here is my package.json:

{
  "name": "client",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for client goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "npm-run-all lint:* test:*",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@ember/optional-features": "^1.3.0",
    "@glimmer/component": "^1.0.0",
    "@glimmer/tracking": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-apollo-client": "^3.0.0",
    "ember-auto-import": "^1.5.3",
    "ember-cli": "~3.17.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.18.0",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^4.2.3",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-uglify": "^3.0.0",
    "ember-data": "~3.17.0",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^6.7.2",
    "ember-load-initializers": "^2.1.1",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^4.6.0",
    "ember-resolver": "^7.0.0",
    "ember-source": "~3.17.0",
    "ember-template-lint": "^2.4.0",
    "ember-welcome-page": "^4.0.0",
    "eslint": "^6.8.0",
    "eslint-plugin-ember": "^7.10.1",
    "eslint-plugin-node": "^11.0.0",
    "graphql": "^14.7.0",
    "loader.js": "^4.7.0",
    "npm-run-all": "^4.1.5",
    "qunit-dom": "^1.1.0"
  },
  "engines": {
    "node": "10.* || >= 12"
  },
  "ember": {
    "edition": "octane"
  },
  "dependencies": {
    "graphql-tag": "^2.11.0"
  }
}
6

Ah looks like others have had this same issue. Maybe an issue with the way ember-apollo-client sets up fetch maybe not. The workaround appears to be putting this in your ember-cli-build.js:

  'ember-fetch': {
    preferNative: true
  }
1 Like
7

Thanks, it helps! it was’nt in docs