如何在Angular4+中使用Apollo客户端GraphQL

Apollo Client 是灵活的、社区驱动的 GraphQL 客户端，适用于 Angular、JavaScript 和原生平台。它是从头开始设计的，可以轻松构建使用 GraphQL 获取数据的 UI 组件。本文是关于如何在 Angular 4+ 中使用 Apollo 客户端 GraphQL 的快速总结。因此，在阅读以下文章之前，您需要了解 GraphQl 和 Angular 4+。

设置：

在开始运行以下命令之前安装 Angular CLI：

ng add apollo-angular

您需要设置的一件事是 GraphQL 服务器的 URL，因此打开 src/app/graphql.module.ts 并设置 URI 变量：

const uri = 'https://w5xlvm3vzz.lp.gql.zone/graphql'; //our test Graphql Server which returns rates

查询：

我们将使用 Apollo 将 GraphQL 查询结果附加到我们的 Angular UI 元素，我们将使用 Apollo.watchQuery 方法。我们需要使用 graphql-tag 库将查询解析为 GraphQL 文档。 Apollo.watchQuery 方法需要一个参数，一个带有选项的对象，您可以在同一对象中提供任何可用的选项。如果您的查询需要变量，这是传递它们的地方：

const currentUser = gql`query currentUser($avatarSize: Int!) {
    currentUser {
      login
      avatar_url(avatarSize: $avatarSize)
    }
  }`;

@Component({template:`Login: {{currentUser?.profile}}`,})
class UserComponent implements OnInit, OnDestroy {
  currentUser: any;
  private querySubscription: Subscription;
  ngOnInit() {
    this.querySubscription = this.apollo.watchQuery({
      query: currentUser,
      variables: {
        avatarSize: 100,
      },
    }).valueChanges.subscribe(({data}) => {
      this.currentUser = data.currentUser;
    });
  }
  ngOnDestroy() {
    this.querySubscription.unsubscribe();
  }
}

突变：

Apollo 处理 GraphQL 突变。突变在语法上与查询相同，唯一的区别是您使用关键字突变而不是查询。

GraphQL 突变由两部分组成：

带有参数的突变名称，表示要在服务器上执行的实际操作。
您希望从突变结果中返回以更新客户端的字段。

我们将使用 mutate 方法。当我们调用它时，我们可以将选项传递给 mutate：

const submitRepository = gql`mutation submitRepository($repoFullName: String!) {
    submitRepository(repoFullName: $repoFullName) {
      createdAt
    }
  }`;

@Component({ ... })
class NewEntryComponent {
  constructor(private apollo: Apollo) {}

  newRepository() {
    this.apollo.mutate({
      mutation: submitRepository,
      variables: {
        repoFullName: 'graphql/angular'
      }
    }).subscribe(({ data }) => {
      console.log('got data', data);
    },(error) => {
      console.log('there was an error sending the query', error);
    });
  }
}

乐观回应：

有时在服务器响应结果之前，我们可以预测突变的结果。例如，当用户对一篇文章发表评论时，我们希望立即在上下文中显示新评论，而无需等待往返服务器的延迟，这就是我们所说的 Optimistic UI。

Apollo Client 为您提供了一种指定 optimisticResponse 选项的方法，该选项将用于立即更新活动查询，就像服务器的突变响应一样。一旦实际的变异响应返回，乐观的部分将被丢弃并替换为真实的结果。

import { Component } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

const submitComment = gql`mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
      postedBy {
        login
        html_url
      }
      createdAt
      content
    }
  }`;

@Component({ ... })
class CommentPageComponent {
  currentUser: User;

  constructor(private apollo: Apollo) {}

  submit({ repoFullName, commentContent }) {
    this.apollo.mutate({
      mutation: submitComment,
      variables: { repoFullName, commentContent },
      optimisticResponse: {
        __typename: 'Mutation',
        submitComment: {
          __typename: 'Comment',
          postedBy: this.currentUser,
          createdAt: +new Date,
          content: commentContent,
        },
      },
    }).subscribe();
  }
}

结论

在本文中，我们快速了解了将 Apollo Client GraphQL 与 Angular 结合使用。