[英]How to connect to Graphql server using Ember-Apollo?
I am working with a full stack GraqlQL based application.我正在使用基于 GraqlQL 的全栈应用程序。 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: items.graphql:
query {
items {
_id
name
}
}
environment.js:环境.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):监控.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:监控.hbs:
<h3>Monitoring</h3>
<div>
{{#each model as |item|}}
<h3>{{item.name}}</h3>
{{/each}}
</div>
{{outlet}}
Thank you for attention!感谢您的关注!
I see this error:我看到这个错误:
Uncaught (in promise) Error: fetch is not defined - maybe your browser targets are not covering everything you need?
The solution is to fix two things.解决方案是解决两件事。 First is to put this in ember-cli-build.js:
首先是把它放在 ember-cli-build.js 中:
'ember-fetch': {
preferNative: true
}
And fix the route file:并修复路由文件:
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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.