Cách sử dụng Đồ thị ứng dụng khách Apollo với Angular 4+

---

Apollo Client là ứng dụng GraphQL linh hoạt, hướng tới cộng đồng cho Angular, JavaScript và các nền tảng root . Nó được thiết kế từ đầu để giúp bạn dễ dàng xây dựng các thành phần giao diện user tìm nạp dữ liệu bằng GraphQL. Bài viết này là một bản tóm tắt nhanh về cách sử dụng Apollo client GraphQL với Angular 4+ của bạn. Do đó bạn cần biết về GraphQl và Angular 4+ trước khi đọc bài sau.

Cài đặt :

Cài đặt Angular CLI trước khi bạn bắt đầu bằng cách chạy lệnh sau:

ng add apollo-angular

Một thứ bạn cần đặt là URL của Server GraphQL của bạn, vì vậy hãy mở src/app/graphql.module.ts và đặt các biến URI:

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

Truy vấn:

Ta sẽ sử dụng Apollo để đính kèm kết quả truy vấn GraphQL vào các phần tử Angular UI của ta , ta sẽ sử dụng phương thức Apollo.watchQuery . Ta cần phân tích cú pháp truy vấn của bạn thành một tài liệu GraphQL bằng cách sử dụng thư viện graphql-tag . Phương thức Apollo.watchQuery một đối số, một đối tượng có các tùy chọn, bạn có thể cung cấp bất kỳ tùy chọn có sẵn nào trong cùng một đối tượng. Nếu truy vấn của bạn có các biến, đây là nơi để chuyển chúng vào:

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();
  }
}

Đột biến:

Apollo xử lý các đột biến GraphQL. Các đột biến giống với các truy vấn về cú pháp, sự khác biệt duy nhất là bạn sử dụng đột biến từ khóa thay vì truy vấn.

Đột biến GraphQL bao gồm hai phần:

1. Tên đột biến có đối số, đại diện cho hoạt động thực tế sẽ được thực hiện trên server .
2. Các trường bạn muốn lấy lại từ kết quả của đột biến để cập nhật ứng dụng client .

Ta sẽ sử dụng phương pháp mutate . Ta có thể chuyển các tùy chọn để biến đổi khi ta gọi nó:

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);
    });
  }
}

Phản hồi lạc quan:

Đôi khi trước khi server phản hồi kết quả, ta có thể dự đoán kết quả của đột biến. Ví dụ: khi user comment về một bài báo, ta muốn hiển thị comment mới trong ngữ cảnh ngay lập tức, mà không cần chờ đợi độ trễ của chuyến đi vòng quanh server , Đây là cái mà ta gọi là Giao diện user lạc quan .

Apollo Khách hàng cung cấp cho bạn một cách để xác định optimisticResponse tùy chọn, sẽ được sử dụng để cập nhật các truy vấn hoạt động ngay lập tức, trong cùng một cách mà phản ứng đột biến của server sẽ. Một khi phản ứng đột biến thực tế trở lại, phần lạc quan sẽ bị vứt bỏ và thay thế bằng kết quả thực.

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();
  }
}

Kết luận

Trong bài viết này, ta đã giới thiệu sơ lược về cách sử dụng Apollo Client GraphQL với Angular.

---

---

Các tin liên quan