最近开始使用graphQL和Apollo-Apollo客户端。
我在graph QL之上构建了一个Web服务,它运行得很好。我面临的唯一问题是项目的客户端。例如(请参阅下面的代码),在运行createVideo()后,我的组件的data
属性是可观察的,它正在观察查询不会自动刷新,并且在回调上手动调用apollo.query似乎没有任何效果,因为查询返回缓存的结果,而不是来自服务器的结果。
我错过什么了吗?
app.component.ts
import {Component, OnInit} from '@angular/core';
import {Apollo, ApolloQueryObservable} from 'apollo-angular';
import 'rxjs/Rx';
import gql from 'graphql-tag';
// http://dev.apollodata.com/angular2/mutations.html
const NewVideoQuery = gql`
mutation AddVideoQuery($title: String!,$duration: Int!, $watched: Boolean!){
createVideo(video: { title: $title, duration: $duration, watched: $watched } ){
id,
title
}
}
`;
const VideoQuery = gql`
{
videos {
id,
title
}
}
`;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: ApolloQueryObservable<any>;
video: any = {};
constructor(private apollo: Apollo) {
}
ngOnInit() {
this.data = this.apollo.watchQuery({query: VideoQuery});
}
createVideo() {
/**
* This will send a mutate query to the server.
*/
// @todo After running the mutate, the watch query doesn't refresh
this.apollo.mutate({
mutation: NewVideoQuery,
variables: {
'title': this.video.title || 'Some Video' + Math.floor(Math.random() * 10),
'duration': 123213,
'watched': true
}
}).subscribe((afterMutation) => {
console.log(afterMutation);
// This fires but query doesn't hit the server since it's coming from cache.
// @todo Not even by re-running it here
this.apollo.query({query: VideoQuery})
.subscribe((data) => {
console.log(data);
});
}, (err) => alert(err));
}
}
//app.component.html
<div *ngFor="let x of data | async | select: 'videos'">
<div><b>{{x.id}}</b>{{x.title}}</div>
</div>
<label>
Title
<input type="text" [(ngModel)]="video.title">
</label>
<button (click)="createVideo()">{{title}}</button>
我建议您使用fetchPolicy:“缓存和网络”,因为它会获取已存储的数据,但也会更新缓存,使您的查询更快,但仍会更新缓存。您可以在此处阅读有关了解Apollo Fetch策略的更多信息--
我想通了。默认情况下,Apollo-Client会缓存我们的查询,重新运行相同的查询当然会从缓存中返回结果,而不是从服务器返回。
当然,因为我做了一个变异来创建一个新记录,所以我希望服务器自动刷新数据集,但事实并非如此。
为了解决这个问题,我想到了从createVideo变体的成功回调中重新运行查询的想法,但这次我添加了一个名为fetchPolicy的特殊选项,该选项支持以下值:
'cache-first' | 'cache-and-network' | 'network-only' | 'cache-only' | 'standby'
最后,我的fetch查询如下所示:
this.apollo.query({query: VideoQuery, fetchPolicy: 'network-only'})
.subscribe(()=>{ console.log('refresh done, our watchQuery will update') })
奖金提示:
Apollo的另一个有趣特性是,您可以像这样设置池间隔,以便您的数据始终与服务器同步
this.data = this.apollo.watchQuery({query: VideoQuery, pollInterval: 10000});
在apollo客户端发生变异后,如何将react组件的道具传递给选项? 我正在使用。在一个组件中,我试图运行一个删除突变,之后我想从本地存储中删除该项目,而无需执行。为了这样做,我一直在使用命令。 为了更新存储,我需要尝试删除的对象的父ID。它在react组件中可用,我只需要找到一种方法将其传递到
我在AWS Lambda上写一个图形服务器组件(不使用图形服务器)。在客户端,我使用阿波罗客户端。我设置的λ函数的响应 在使用ApolloClient的客户端上,我得到以下错误 对起飞前请求的响应没有通过权限改造检查:请求的资源上没有“访问控制允许起源”标头。因此,不允许访问起源http://localhost:8080。 然而,当我使用axios之类的东西执行相同的请求时,它就可以正常工作了。此
我是新的Android Studio,想写一个小的示例应用程序与GraphQL和阿波罗客户端。 我已经成功地设置了我的构建环境和自动代码生成。下面是文件结构的屏幕截图,构建/生成/apollo/AllPostsQuery是基于自动生成的类: 我现在唯一的问题是我不知道如何将类导入我的
我已经用React Apollo设置了一个React应用程序,可以成功地查询我的API。 但是,当我进行突变时,会出现奇怪的效果。我成功地取回了所有数据(如Chrome开发工具的网络选项卡中所示),但是当尝试数据时,它说它是。 以下是相关代码: 因此,当我调用函数时,我在控制台中收到以下内容: 但是在网络选项卡中查看时,我看到数据毕竟确实存在,并且正是我正在寻找的。此外,我的数据库已正确更新所有预
Apollo(阿波罗)是一款可靠的分布式配置管理中心,诞生于携程框架研发部,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限、流程治理等特性,适用于微服务配置管理场景。 一、背景介绍 服务端基于 Spring Boot 和 Spring Cloud 开发,打包后可以直接运行,不需要额外安装 Tomcat 等应用容器。 Java 客户端不依赖任何框架,能
简介 阿波罗 STM32F429 是正点原子推出的一款基于 ARM Cortex-M4 内核的开发板,最高主频为 180Mhz,该开发板具有丰富的板载资源,可以充分发挥 STM32F429 的芯片性能。 开发板外观如下图所示: 该开发板常用 板载资源 如下: MCU:STM32F429IGT6,主频 180MHz,1024KB FLASH ,256KB RAM 外部 RAM:W9825G6KH(S