angular - 错误:Apollo 已经创建
问题描述
我对 GraphQL 相当陌生。
我想做的是onBlur
在文本输入的每个事件上调用 GraphQL 服务器。
问题是:
- 呼叫仅成功进行一次。
- 在第二次通话中,我收到此错误:
ERROR Error: Apollo has been already created.
这可能很明显,但我找不到解决方案。
有没有办法成功地对每个onBlur
连续发生的事件进行新的 graphql 调用?
onBlurZIP(zip) {
const zipQuery = gql`
query {
getAddressByPostalCode(postalCode: "${zip}") {
country
city
street
streettype
state
stateInitials
quarter
}
}
`;
const httpLink = createHttpLink({
uri: environment.endpoint
});
const link = setContext((_, { headers }) => {
return {
headers: {
// headers object...
}
}
});
this._apollo.create({
link: link.concat(httpLink),
cache: new InMemoryCache()
});
this.querySubscription = this._apollo.watchQuery<any>({
query: zipQuery,
variables: { zip },
fetchPolicy: 'network-only'
})
.valueChanges
.subscribe(
res => {
// do stuff...
},
err => console.log(err)
);
}
的HTML:
<input formControlName="zip" (blur)="onBlurZIP($event.target.value)" type="text" class="form-control" name="zip" id="zip" required>
解决方案
Apollo 客户端实例必须是单例的。您需要在应用程序中定义一次,然后使用<ApolloProvider>
. 您可以参考 react-apollo 文档:https ://www.apollographql.com/docs/react/essentials/get-started.html 。
您的代码抛出错误,因为您在每个 onBlur 事件上创建 apollo 客户端实例。
编辑:
在 angular.js 中初始化 apollo 客户端的相关文档:https ://www.apollographql.com/docs/angular/basics/setup.html
推荐阅读
- python - Flask+nginx+uwsgi:如果flask没有路由,则仅使用nginx提供url
- javascript - 如何使用 js 或 jquery 在动态更改的 html 中获取最后一条评论?
- html - Flexbox 一长列和短列
- mysql - MySQL 基于另一个表的条件选择更新表
- sql - 寻找只写历史书的作者
- javascript - 显示 Google Cloud Speech-to-Text
- javascript - 使用 jest 和 react-testing-library 编写测试以检查本地 setState 调用
- python - 我不断收到 Django OAuth Toolkit 的 403 错误
- powerbi - Power BI V2 - 审核或使用指标
- javascript - React - 将从 API 获取的数据作为道具传递给组件