Hướng dẫn dành cho người mới bắt đầu với GraphQL

Một trong những thuật ngữ được thảo luận phổ biến nhất hiện nay là API. Rất nhiều người không biết chính xác API là gì. Về cơ bản, API là viết tắt của Giao diện lập trình ứng dụng. Đúng như tên gọi, giao diện mà mọi người - nhà phát triển, người dùng, người tiêu dùng - có thể tương tác với dữ liệu.

Bạn có thể nghĩ về một API như một người pha chế. Bạn yêu cầu nhân viên pha chế uống nước, và họ cung cấp cho bạn những gì bạn muốn. Đơn giản. Vậy tại sao đó là một vấn đề?

Kể từ khi bắt đầu web hiện đại, việc xây dựng API không khó như âm thanh. Nhưng học và hiểu API là. Các nhà phát triển tạo thành phần lớn những người sẽ sử dụng API của bạn để xây dựng một cái gì đó hoặc chỉ tiêu thụ dữ liệu. Vì vậy, API của bạn phải sạch sẽ và trực quan nhất có thể. API được thiết kế tốt rất dễ sử dụng và học hỏi. Nó cũng trực quan, một điểm tốt cần ghi nhớ khi bạn bắt đầu thiết kế API của mình.

Chúng tôi đã sử dụng REST để xây dựng API trong một thời gian dài. Cùng với đó là một số vấn đề. Khi xây dựng API bằng thiết kế REST, bạn sẽ gặp một số vấn đề như:

1) bạn sẽ có rất nhiều điểm cuối

2) Nó sẽ khó hơn nhiều cho các nhà phát triển tìm hiểu và hiểu API của bạn

3) có quá nhiều thông tin

Để giải quyết những vấn đề này, Facebook đã tạo ra GraphQL. Ngày nay, tôi nghĩ rằng GraphQL là cách tốt nhất để xây dựng API. Bài viết này sẽ cho bạn biết lý do tại sao bạn nên bắt đầu học nó ngay hôm nay.

Trong bài viết này, bạn sẽ tìm hiểu cách hoạt động của GraphQL. Tôi sẽ chỉ cho bạn cách tạo API mạnh mẽ, hiệu quả, được thiết kế tốt bằng cách sử dụng GraphQL.

Bạn có thể đã nghe nói về GraphQL, vì nhiều người và các công ty đang sử dụng nó. Vì GraphQL là nguồn mở, cộng đồng của nó đã phát triển rất lớn.

Bây giờ, đã đến lúc bạn bắt đầu tìm hiểu thực tế về cách thức hoạt động của GraphQL và tất cả về phép thuật của nó.

GraphQL là gì?

GraphQL là ngôn ngữ truy vấn nguồn mở được phát triển bởi Facebook. Nó cung cấp cho chúng tôi cách thiết kế, tạo và tiêu thụ API hiệu quả hơn. Về cơ bản, nó là sự thay thế cho REST.

GraphQL có rất nhiều tính năng, như:

  1. Bạn viết dữ liệu mà bạn muốn và bạn có được chính xác dữ liệu mà bạn muốn. Không có quá nhiều thông tin như chúng ta đã quen với REST.
  2. Nó cung cấp cho chúng tôi một điểm cuối duy nhất, không còn phiên bản 2 hoặc phiên bản 3 cho cùng một API.
  3. GraphQL được gõ mạnh và với điều đó bạn có thể xác thực một truy vấn trong hệ thống loại GraphQL trước khi thực hiện. Nó giúp chúng tôi xây dựng các API mạnh mẽ hơn.

Đây là phần giới thiệu cơ bản về GraphQL - tại sao nó lại mạnh mẽ như vậy và tại sao nó lại trở nên phổ biến trong những ngày này. Nếu bạn muốn tìm hiểu thêm về nó, tôi khuyên bạn nên truy cập trang web GraphQL và kiểm tra nó.

Bắt đầu

Mục tiêu chính trong bài viết này không phải là tìm hiểu cách thiết lập máy chủ GraphQL, vì vậy hiện tại chúng tôi không đi sâu vào vấn đề đó. Mục tiêu là tìm hiểu cách thức hoạt động của GraphQL trong thực tế, vì vậy chúng tôi sẽ sử dụng máy chủ GraphQL có cấu hình 0 được gọi là Graphpack.

Để bắt đầu dự án của chúng tôi, chúng tôi sẽ tạo một thư mục mới và bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn. Tôi sẽ đặt tên cho nó là graphql-server:

Mở thiết bị đầu cuối của bạn và gõ:

mkdir graphql-server

Bây giờ, bạn nên cài đặt npm hoặc sợi trong máy của bạn. Nếu bạn không biết những thứ này là gì, thì npm và sợi là các trình quản lý gói cho ngôn ngữ lập trình JavaScript. Đối với Node.js, trình quản lý gói mặc định là npm.

Trong thư mục đã tạo của bạn gõ lệnh sau:

npm init -y

Hoặc nếu bạn sử dụng sợi:

sợi init

npm sẽ tạo một tệp pack.json cho bạn và tất cả các phụ thuộc mà bạn đã cài đặt và các lệnh của bạn sẽ ở đó.

Vì vậy, bây giờ, chúng tôi sẽ cài đặt phần phụ thuộc duy nhất mà chúng tôi sẽ sử dụng.

Graphpack cho phép bạn tạo một máy chủ GraphQL với cấu hình bằng không. Vì chúng tôi chỉ mới bắt đầu với GraphQL, điều này sẽ giúp chúng tôi tiếp tục và tìm hiểu thêm mà không phải lo lắng về cấu hình máy chủ.

Trong thiết bị đầu cuối của bạn, bên trong thư mục gốc của bạn, cài đặt nó như thế này:

cài đặt npm - graphave-dev

Hoặc, nếu bạn sử dụng sợi, bạn nên đi như thế này:

sợi thêm --dev graphpack

Sau khi Graphpack được cài đặt, hãy chuyển đến tập lệnh của chúng tôi trong tệp pack.json và đặt đoạn mã sau vào đó:

Chúng tôi sẽ tạo một thư mục có tên là src và nó sẽ là thư mục duy nhất trong toàn bộ máy chủ của chúng tôi.

Tạo một thư mục có tên src, sau đó, trong thư mục của chúng tôi, chúng tôi sẽ chỉ tạo ba tệp.

Trong thư mục src của chúng tôi tạo một tệp có tên là lược đồ. Trong tập tin đầu tiên này, đặt mã sau đây:

Trong tệp lược đồ này sẽ là toàn bộ lược đồ GraphQL của chúng tôi. Nếu bạn không biết đó là gì, tôi sẽ giải thích sau - đừng lo lắng.

Bây giờ, trong thư mục src của chúng tôi, tạo một tệp thứ hai. Gọi nó là decvers.js và, bên trong tệp thứ hai này, đặt đoạn mã sau:

Tệp độ phân giải này sẽ là cách chúng tôi cung cấp các hướng dẫn để biến một hoạt động GraphQL thành dữ liệu.

Và cuối cùng, trong thư mục src của bạn, tạo một tệp thứ ba. Gọi db.js này và, bên trong tệp thứ ba này, đặt mã sau đây:

Trong hướng dẫn này, chúng tôi không sử dụng cơ sở dữ liệu trong thế giới thực. Vì vậy, tệp db.js này sẽ mô phỏng cơ sở dữ liệu, chỉ dành cho mục đích học tập.

Bây giờ thư mục src của chúng ta sẽ trông như thế này:

src
  | --db.js
  | --resolvers.js
  | --schema.graphql

Bây giờ, nếu bạn chạy lệnh npm chạy dev hoặc, nếu bạn sử dụng sợi, sợi dev, bạn sẽ thấy đầu ra này trong thiết bị đầu cuối của mình:

Bây giờ bạn có thể truy cập localhost: 4000. Điều này có nghĩa là chúng tôi đã sẵn sàng để bắt đầu viết các truy vấn, đột biến và đăng ký đầu tiên của chúng tôi trong GraphQL.

Bạn thấy Sân chơi GraphQL, một IDE GraphQL mạnh mẽ cho quy trình phát triển tốt hơn. Nếu bạn muốn tìm hiểu thêm về Sân chơi GraphQL, bấm vào đây.

Lược đồ

GraphQL có loại ngôn ngữ riêng mà sử dụng để viết lược đồ. Đây là một cú pháp lược đồ có thể đọc được của con người được gọi là Schema Định nghĩa ngôn ngữ (SDL). SDL sẽ giống nhau, bất kể bạn sử dụng công nghệ nào - bạn có thể sử dụng công nghệ này với bất kỳ ngôn ngữ hoặc khung nào bạn muốn.

Ngôn ngữ lược đồ này rất hữu ích vì nó đơn giản để hiểu loại API của bạn sẽ có. Bạn có thể hiểu nó chỉ bằng cách nhìn đúng nó.

Các loại

Các loại là một trong những tính năng quan trọng nhất của GraphQL. Các loại là các đối tượng tùy chỉnh thể hiện API của bạn sẽ trông như thế nào. Ví dụ: nếu bạn đang xây dựng một ứng dụng truyền thông xã hội, API của bạn sẽ có các loại như Bài đăng, Người dùng, Lượt thích, Nhóm.

Các loại có các trường và các trường này trả về một loại dữ liệu cụ thể. Ví dụ: chúng tôi sẽ tạo một loại Người dùng, chúng ta nên có một số trường tên, email và tuổi. Các trường loại có thể là bất cứ thứ gì và luôn trả về một loại dữ liệu là Int, Float, String, Boolean, ID, Danh sách các loại đối tượng hoặc Loại đối tượng tùy chỉnh.

Vì vậy, bây giờ để viết Loại đầu tiên của chúng tôi, hãy chuyển đến tệp giản đồ của bạn và thay thế Loại truy vấn đã có ở đây bằng:

Mỗi người dùng sẽ có một ID, vì vậy chúng tôi đã cung cấp cho nó một loại ID. Người dùng cũng sẽ có một tên và email, vì vậy chúng tôi đã đặt cho nó một loại Chuỗi và tuổi, mà chúng tôi đã đưa ra một loại Int. Khá đơn giản phải không?

Nhưng, những gì về những người! ở cuối mỗi dòng? Dấu chấm than có nghĩa là các trường không có giá trị, có nghĩa là mọi trường phải trả về một số dữ liệu trong mỗi truy vấn. Trường không thể duy nhất mà chúng tôi sẽ có trong loại Người dùng của chúng tôi sẽ là tuổi.

Trong GraphQL, bạn sẽ đối phó với ba khái niệm chính:

  1. truy vấn - cách bạn sẽ lấy dữ liệu từ máy chủ.
  2. đột biến - cách bạn sẽ sửa đổi dữ liệu trên máy chủ và lấy lại dữ liệu đã cập nhật (tạo, cập nhật, xóa).
  3. đăng ký - cách mà bạn sẽ duy trì kết nối thời gian thực với máy chủ.

Tôi sẽ giải thích tất cả chúng cho bạn. Hãy bắt đầu với câu hỏi.

Truy vấn

Để giải thích điều này một cách đơn giản, các truy vấn trong GraphQL là cách bạn sẽ lấy dữ liệu. Một trong những điều đẹp nhất về các truy vấn trong GraphQL là bạn sẽ nhận được dữ liệu chính xác mà bạn muốn. Không nhiều không ít. Điều này có tác động tích cực rất lớn trong API của chúng tôi - không còn quá nhiều thông tin hoặc tìm nạp thông tin như chúng tôi đã có với API REST.

Chúng tôi sẽ tạo Truy vấn loại đầu tiên trong GraphQL. Tất cả các truy vấn của chúng tôi sẽ kết thúc bên trong loại này. Vì vậy, để bắt đầu, chúng tôi sẽ đi đến lược đồ của chúng tôi và viết một loại mới gọi là Truy vấn:

Nó rất đơn giản: truy vấn người dùng sẽ trả về cho chúng tôi một mảng gồm một hoặc nhiều Người dùng. Nó sẽ không trả về null, bởi vì chúng tôi đưa vào! , có nghĩa là nó LẬP một truy vấn không thể rỗng. Nó sẽ luôn luôn trả lại một cái gì đó.

Nhưng chúng tôi cũng có thể trả lại một người dùng cụ thể. Vì vậy, chúng tôi sẽ tạo một truy vấn mới gọi là người dùng. Trong loại Truy vấn của chúng tôi, đặt mã sau đây:

Bây giờ loại Truy vấn của chúng tôi sẽ trông như thế này:

Như bạn thấy, với các truy vấn trong GraphQL, chúng ta cũng có thể truyền các đối số. Trong trường hợp này, để truy vấn một người dùng cụ thể, chúng tôi sẽ vượt qua ID của nó.

Nhưng, bạn có thể tự hỏi: làm thế nào để GraphQL biết nơi lấy dữ liệu? Đó là lý do tại sao chúng ta nên có một tệp decvers.js. Tệp đó cho GraphQL biết cách thức và nơi nó sẽ tìm nạp dữ liệu.

Đầu tiên, hãy truy cập tệp giải quyết của chúng tôi và nhập db.js mà chúng tôi vừa tạo cách đây vài phút. Tệp decvers.js của bạn sẽ trông như thế này:

Bây giờ, chúng tôi sẽ tạo Truy vấn đầu tiên. Chuyển đến tệp decvers.js của bạn và thay thế chức năng hello. Bây giờ loại Truy vấn của bạn sẽ trông như thế này:

Bây giờ, để giải thích nó sẽ hoạt động như thế nào:

Mỗi trình giải quyết truy vấn có bốn đối số. Trong hàm người dùng, chúng tôi sẽ chuyển id dưới dạng đối số và sau đó trả về người dùng cụ thể phù hợp với id đã truyền. Khá đơn giản.

Trong chức năng người dùng, chúng tôi sẽ trả về mảng người dùng đã tồn tại. Nó luôn luôn trả lại cho tất cả người dùng của chúng tôi.

Bây giờ, chúng tôi sẽ kiểm tra xem các truy vấn của chúng tôi có hoạt động tốt không. Truy cập localhost: 4000 và nhập mã sau:

Nó sẽ trả lại cho bạn tất cả người dùng của chúng tôi.

Hoặc, nếu bạn muốn trả về một người dùng cụ thể:

Bây giờ, chúng tôi sẽ bắt đầu tìm hiểu về các đột biến, một trong những tính năng quan trọng nhất trong GraphQL.

Đột biến

Trong GraphQL, các đột biến là cách bạn sẽ sửa đổi dữ liệu trên máy chủ và nhận lại dữ liệu cập nhật. Bạn có thể nghĩ như CUD (Tạo, Cập nhật, Xóa) của REST.

Chúng tôi sẽ tạo ra đột biến loại đầu tiên của chúng tôi trong GraphQL và tất cả các đột biến của chúng tôi sẽ kết thúc bên trong loại này. Vì vậy, để bắt đầu, hãy truy cập lược đồ của chúng tôi và viết một loại mới gọi là đột biến:

Như bạn có thể thấy, chúng tôi sẽ có ba đột biến:

createdUser: chúng ta nên vượt qua ID, tên, email và tuổi. Nó sẽ trả lại một người dùng mới cho chúng tôi.

updateUser: chúng ta nên vượt qua ID và tên mới, email hoặc tuổi. Nó sẽ trả lại một người dùng mới cho chúng tôi.

xóaUser: chúng ta nên vượt qua một ID. Nó sẽ trả lại một người dùng mới cho chúng tôi.

Bây giờ, hãy truy cập tệp giải quyết của chúng tôi và bên dưới đối tượng Truy vấn, tạo một đối tượng đột biến mới như thế này:

Bây giờ, tệp giải quyếtversvers.js của chúng tôi sẽ trông như thế này:

Bây giờ, chúng tôi sẽ kiểm tra xem các đột biến của chúng tôi có hoạt động tốt không. Truy cập localhost: 4000 và nhập mã sau:

Nó sẽ trả lại một người dùng mới cho bạn. Nếu bạn muốn thử tạo đột biến mới, tôi khuyên bạn nên tự mình thử! Hãy thử xóa cùng một người dùng mà bạn đã tạo để xem nó có hoạt động tốt không.

Cuối cùng, chúng tôi sẽ bắt đầu tìm hiểu về đăng ký và lý do tại sao chúng rất mạnh mẽ.

Đăng ký

Như tôi đã nói trước đây, đăng ký là cách bạn sẽ duy trì kết nối thời gian thực với máy chủ. Điều đó có nghĩa là bất cứ khi nào một sự kiện xảy ra trong máy chủ và bất cứ khi nào sự kiện đó được gọi, máy chủ sẽ gửi dữ liệu tương ứng đến máy khách.

Bằng cách làm việc với đăng ký, bạn có thể cập nhật ứng dụng của mình với những thay đổi mới nhất giữa những người dùng khác nhau.

Một thuê bao cơ bản là như thế này:

Bạn sẽ nói nó rất giống với một truy vấn, và đúng vậy. Nhưng nó hoạt động khác nhau.

Khi một cái gì đó được cập nhật trong máy chủ, máy chủ sẽ chạy truy vấn GraphQL được chỉ định trong đăng ký và gửi kết quả mới được cập nhật cho khách hàng.

Chúng tôi sẽ không làm việc với các mục đăng ký trong bài viết cụ thể này, nhưng nếu bạn muốn đọc thêm về chúng, hãy nhấp vào đây.

Phần kết luận

Như bạn đã thấy, GraphQL là một công nghệ mới thực sự mạnh mẽ. Nó cho chúng ta sức mạnh thực sự để xây dựng các API được thiết kế tốt hơn và tốt hơn. Đó là lý do tại sao tôi khuyên bạn nên bắt đầu học nó ngay bây giờ. Đối với tôi, nó cuối cùng sẽ thay thế REST.

Cảm ơn đã đọc bài viết, xin vui lòng cho một bình luận dưới đây!

Theo dõi tôi trên Twitter!
Theo dõi tôi trên GitHub!

Tôi đang tìm kiếm một cơ hội từ xa, vì vậy nếu có bất kỳ tôi thích nghe về nó, vì vậy hãy liên hệ với tôi tại Twitter của tôi!