当前位置: 首页 > 知识库问答 >
问题:

图形化突变如何自动刷新阿波罗客户端正在关注的查询?

饶滨海
2023-03-14

最近开始使用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>

共有2个答案

明星剑
2023-03-14

我建议您使用fetchPolicy:“缓存和网络”,因为它会获取已存储的数据,但也会更新缓存,使您的查询更快,但仍会更新缓存。您可以在此处阅读有关了解Apollo Fetch策略的更多信息--

岳晟
2023-03-14

我想通了。默认情况下,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