Question

我有一个Angular 7应用程序，可以从GraphQL服务器访问数据。

我直接从文档中实现了示例： https://www.apollographql.com/docs/react/advanced/caching.html#automatic-updates

这是获取post对象并执行upvote突变的服务。

export class PostService {

  constructor(private apollo: Apollo) { }

  public getPost() {
    return this.apollo.query({
      query: gql`query getPost($id: String!) {
        post(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' }
    });
  }

  public upvote() {
    return this.apollo.mutate({
      mutation: gql`mutation upvote($id: String!) {
        upvotePost(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' }
    });
  }
}

在我的component.ts文件中

  public post = this.postService.getPost();
  public vote() {
    this.postService.upvote().subscribe(console.log);
  }

在我的component.html

中

    <input type="text" [value]="(post | async).data.post.score" />
    <button class="button" (click)="vote()"></button>

框中的值不变。

如果我添加了一个额外的按钮来调用此功能

public updateView() {
  post = this.postService.getPost();
}

gui将在不查询服务器的情况下进行更新，因此显然是从缓存中获取的。

根据规范，此手动刷新步骤是不必要的。

If the id field on both results matches up, then the score field everywhere in our UI will be updated automatically!

我的包裹的版本：

阿波罗角：1.5.0
apollo-angular-link-http：1.4.0
apollo-angular-link-http-common：1.4.0
阿波罗缓存：1.1.25
apollo-cache-memory：1.4.2
阿波罗客户端：2.4.12

我需要更改什么，以便实际上可以在原始请求返回的可观察结果中更新结果？

还是我只是不了解预期的机制？

Answer 1

这里有些大胆的猜测，但是我建议这是由于您没有编写内联查询；文档将有所不同。看看可以传递给Mutation的refetchQueries道具，即

  public upvote() {
    return this.apollo.mutate({
      mutation: gql`mutation upvote($id: String!) {
        upvotePost(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' },
      refetchQueries: [],
    });

执行变异时，您要告诉GraphQL您要执行在该refetchQueries数组中提供的查询。结果，缓存将更新。但是，我不是100％确信您的查询将执行，因为您没有从技术上进行订阅，所以您要做的只是执行一次承诺以从GraphQL端点获取数据。

Answer 2

现在，我使用了docu的有角部分而不是React部分，我找到了解决方案。（@tombraider感谢您向正确的方向推动我。）

我需要使用query而不是watchQuery。

  public getPost(id: string) {
    return this.apollo.watchQuery({
      query: gql`query getPost($id: String!) {
        post(id: $id) {
          id
          score
        }
      }`,
      variables: { id }
    }).valueChanges;
  }

此已更改的服务功能版本会不断更新GUI。

阿波罗缓存+自动刷新

2 个答案: