Tuốt tuồn tuột về 4 loại Apollo Client Fetching

2266

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Làm việc với Apollo Client Fetching chắc chắn anh em sẽ gặp 4 từ khoá chính là Queries, Mutation, Subscriptions và Fragment.

Bài viết này mình tham khảo từ trang document của Apollo Client GraphQL, giải thích lại một cách dễ hiểu hơn về các kiểu Fetching. Do tham khảo từ document nên một số nội dung khác ngoài định nghĩa và ví dụ tôi sẽ không đem vào.

Cảm ơn anh em và bắt đầu với Queries thôi.

Xem thêm việc làm SSIS hấp dẫn trên TopDev

1. Apollo Client Queries

Queries thì chắc chắn là quá familiar với anh em rồi. Query là để collect data, Apollo Client Queries cũng sinh ra với mục đích tương tự như vậy (Fetch data với useQuery hook).

Tuy nhiên Query này thì khác với Query bên SQL, nên nếu anh em nào beginner với GraphQL chắc ghé đọc qua tí rồi hãy quay lại.

Ví dụ về Queries:

import { gql, useQuery } from '@apollo/client';

const GET_DOGS = gql`
query GetDogs {
dogs {
id
breed
}
}
`;
Xem tiếp...

Phía trên là câu query với GraphQl, query name là GET_DOGS. Primary API mà ta sử dụng là useQuery, argument cho nó là query string. Data trả về từ query sẽ bao gồm 3 thứ.

  • loading
  • error
  • data

Một cái hay của Apollo Client Queries là nó hỗ trợ Caching query result.

Apollo ClientNguồn ảnh: apollographql.com

Cache thì dễ, nhưng lúc update data mới thì sao?. Phải clear hoặc update cache nếu không data trả về sẽ bị sai.

1.1 Các loại Queries Cache

Với câu hỏi này thì Apollo hỗ trợ 2 chiến lược để update lại data:

  • Thứ nhất là Polling
  • Thứ hai là Refetching

Polling thì đúng như cái tên của nó, về cơ bản thì thằng này gần với realtime. Gần thôi nha anh em, vì nó sẽ fetch data theo định kì chứ không phải fetch liên tục.

Ông cố nội Refetching thì khác, ông này cũng update query result, nhưng chỉ lúc nào user có action nào đó. Ví dụ như khi chuyển page sẽ update lại total items chưa xem chẳng hạn.

Thôi viết đến đây, chi tiết cụ thể anh em có thể lên Docs của Apollo đọc ha, ta đi tiếp với Mutation.

  Giới thiệu Fetch API trong Javascript
  Hướng dẫn tắt cách tắt Superfetch (SysMain) trên Windows 10

2. Apollo Client Mutation

Khác với Queries như ở mục một, nhắc tới query là anh em biết ngay collect data từ backend. Định nghĩa về mutation trong Apollo Client đơn giản hơn nhiều.

2.1 Định nghĩa

Mutations đẻ ra để trả lời cho câu hỏi:

Câu trả lời thì không thể dễ dàng hơn, mutations. Mutations đẻ ra để thực hiện các methods như REST API ta thường thực hiện (POST, PUT, UPDATE, PATCH, …)

Về mấy cái method này anh em có thể tham khảo bài Http Methods: thất tinh bắc đẩu trận.

Giờ cùng xem thử với Apollo Client Mutation thì làm sao có thể modify data:

import { gql, useMutation } from '@apollo/client';

// Define mutation
const INCREMENT_COUNTER = gql`
# Increments a back-end counter and gets its resulting value
mutation IncrementCounter {
currentValue
}
`;

function MyComponent() {
// Pass mutation to useMutation

const [mutateFunction, { data, loading, error }] = useMutation(INCREMENT_COUNTER);
}
Xem tiếp...

Đầu tiên là khúc import, khúc này cần work với những API nào bên Apollo thì ta cần thảy vào.

Apollo Client MutationNguồn ảnh: apollographql.com

Sau khi dã khai báo thì ta cần pass câu query vào useMutation câu query cần thực thi.

const [mutateFunction, { data, loading, error }] = useMutation(INCREMENT_COUNTER);

Tiện lợi không khác gì Queries, nhưng có một điều anh em cần nhớ kĩ:

Cái này thì dễ hiểu, tại vì các actions change tới DB thường mapping tới các actions của user trên FE. Tuy nhiên, với các actions initial khi render, ta cũng thoải mái gọi các function mutation để thực thi.

2.2 Một số thứ khác

Còn data, loading thì tương tự như useQuery, cái này anh em có thể tham khảo ở mục Result bên Apollo Client

function AddTodo() {
let input;

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);

if (loading) return 'Submitting...';
if (error) return `Submission error! ${error.message}`;

return (
{
e.preventDefault();addTodo({ variables: { text: input.value } });
input.value = ”;
}}
>
{
input = node;
}}
/>
);
}

Ví dụ trên đây thì onSubmit (line 12) sẽ gọi tới mutation function. Apollo Client lúc này sẽ gọi tới Apollo Server để thực thi.

Một số các topics khác liên quan tới Mutation như Providing options, Tracking mutation status và Resetting mutation status thì anh em có thể tham khảo trên trang docs nha. Mình không viết kĩ quá ở đây.

3. Apollo Client Subscriptions

Ngoài queries và mutations, GraphQL cũng support thêm một kiểu tương tác với Apollo Server khác là Subscriptions.

3.1 Định nghĩa

Vậy Subscriptions là gì?

Về mặt bản chất thì Subscriptions cũng giống như Queries, nhưng có một điểm khác biệt chí mạng là chữ “real time”.

Lý thuyết lèo nhèo là thế, về cơ bản ta cứ nhớ Apollo client Subscriptions là real time data. Dựa trên cơ chế của web socket, server có thể liên tục trả về data mới cho client thông qua một connection alive. Tiện lợi mà không cần mò mẫm tới Web Socket.

3.2 Khi nào nên xài?

Khi nào ta nên sử dụng Subscriptions?

Má, viết vậy có khi dễ hiểu hơn.

Sau đây là ví dụ cụ thể. Về phía server:

type Subscription {
commentAdded(postID: ID!): Comment
}

Subscriptions là đăng kí, ở phía server khi viết function này đồng nghĩa với việc ta đăng kí bất kì khi nào người dùng có comment mới add vào thì ta sẽ thực hiện một actions gì đó.

Ở phía client thì ta chỉ cần define subscription ta muốn Apollo Client thực thi:

const COMMENTS_SUBSCRIPTION = gql`
subscription OnCommentAdded($postID: ID!) {
commentAdded(postID: $postID) {
id
content
}
}
`;

4. Apollo Client Fragments

Fragments thì hơi confuse, nhưng anh em cứ bám vào title trên document nha.

fragment NameParts on Person {
firstName
lastName
}

Mỗi thằng Fragment sẽ bao gồm một tập hợp con của các trường thuộc kiểu liên kết của nó. Ví dụ ở trên thì thằng Person sẽ khai báo firstName, và thằng lastName thì thuộc về thằng NameParts.

Lúc này thằng NameParts sẽ trở thành Fragments, ta có thể thêm Fragment vào bất kì cái queries và mutations nào có liên quan tới Person.

query GetPerson {
people(id: "7") {
...NameParts
avatar(size: LARGE)
}
}

Khi thêm NameParts, câu query này tương đương với:

query GetPerson {
people(id: "7") {
firstName
lastName
avatar(size: LARGE)
}
}

Ngon, vậy lúc nào thì ta cần xài tới Fragments. Cái này quan trọng, kinh nghiệm thực tế là nhiều bạn trong teams mình sử dụng Fragments theo kiểu dùng dao mổ trâu đi thịt chim sẻ.

  • Sharing fields between multiple queries, mutations or subscriptions.
  • Breaking your queries up to allow you to co-locate field access with the places they are used.

Đầu tiên là chia sẻ fields giữa các queries, mutations. Thứ hai là bẻ nhỏ queries ra, cho phép xác định chính xác field đó sẽ được sử dụng ở đâu.

Viết mệt vãi nhưng anh em yên tâm. GraphQL sẽ là một topics lớn và có bài ra thường xuyên nha.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm công việc CNTT hấp dẫn trên TopDev