Vue.js với RESTful API & GraphQL

Trong bài học này, chúng ta sẽ tìm hiểu về RESTful API và GraphQL, hai cách tiếp cận phổ biến nhất để giao tiếp giữa client và server trong Vue.js. Ngoài ra, chúng ta sẽ tích hợp Vue.js với Apollo Client để lấy dữ liệu từ GraphQL API.

RESTful API & GraphQL

RESTful API là gì?

• RESTful API (Representational State Transfer) là kiến trúc phổ biến để giao tiếp giữa client (Vue.js) và server.
• Dữ liệu được gửi/nhận qua HTTP Request như GET, POST, PUT, DELETE.
• Mỗi tài nguyên được đại diện bởi một URL duy nhất.

Ví dụ REST API:

Ưu điểm của REST API:

• Dễ hiểu, dễ triển khai, phổ biến.
  Nhược điểm:
• Mỗi request chỉ trả về dữ liệu cố định (không tùy chỉnh được).

GraphQL là gì? So sánh với REST API

• GraphQL là một query language cho API, cho phép client chỉ yêu cầu những dữ liệu cần thiết thay vì nhận toàn bộ dữ liệu như REST.
• Sử dụng một endpoint duy nhất (/graphql) thay vì nhiều endpoint như REST API.

Ví dụ so sánh:

REST API (trả về toàn bộ thông tin sản phẩm)

GET /products/1
{
  "id": 1,
  "name": "Laptop",
  "price": 1000,
  "description": "Laptop mạnh mẽ",
  "category": {
    "id": 5,
    "name": "Electronics"
  }
}

GraphQL (chỉ lấy name và price)

{
  product(id: 1) {
    name
    price
  }
}

Ưu điểm của GraphQL:

• Tối ưu request → Chỉ lấy những dữ liệu cần thiết.
• Một endpoint duy nhất (/graphql) thay vì nhiều endpoint REST.
• Dữ liệu có quan hệ (nested queries) dễ dàng lấy dữ liệu liên quan.

Nhược điểm:

• Cấu hình phức tạp hơn REST API.
• Yêu cầu backend hỗ trợ GraphQL.

Tích hợp Vue.js với GraphQL (Apollo Client)

Apollo Client là thư viện phổ biến để kết nối Vue.js với GraphQL API.

1. Cài đặt Apollo Client

Dùng npm hoặc yarn để cài đặt Apollo Client:

npm install @apollo/client graphql

Hoặc với yarn:

yarn add @apollo/client graphql

2. Cấu hình Apollo Client trong Vue.js

Tạo file apollo.js:

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const apolloClient = new ApolloClient({
  uri: "https://countries.trevorblades.com/", // GraphQL API demo
  cache: new InMemoryCache(),
});

Tiếp theo, tích hợp Apollo vào Vue.js:

import { createApp } from "vue";
import { DefaultApolloClient } from "@vue/apollo-composable";
import { apolloClient } from "./apollo";
import App from "./App.vue";

const app = createApp(App);
app.provide(DefaultApolloClient, apolloClient);
app.mount("#app");

Thực hành: Xây dựng ứng dụng Vue.js lấy dữ liệu từ GraphQL API

Bước 1: Tạo Component CountryList.vue

<template>
  <div>
    <h2>Danh sách quốc gia</h2>

    <ul v-if="!loading">
      <li v-for="country in countries" :key="country.code">
        {{ country.name }} ({{ country.code }})
      </li>
    </ul>

    <p v-if="loading">Đang tải dữ liệu...</p>
    <p v-if="error" class="error">Lỗi: {{ error.message }}</p>
  </div>
</template>

<script>
import { gql, useQuery } from "@vue/apollo-composable";

const GET_COUNTRIES = gql`
  query {
    countries {
      code
      name
    }
  }
`;

export default {
  setup() {
    const { result, loading, error } = useQuery(GET_COUNTRIES);
    return { countries: result, loading, error };
  },
};
</script>

<style scoped>
.error {
  color: red;
  font-weight: bold;
}
</style>

Bước 2: Chạy ứng dụng

Chạy lệnh:

npm run dev

Kết quả: Hiển thị danh sách quốc gia từ GraphQL API.

So sánh Axios (REST API) vs Apollo Client (GraphQL)

Kết luận

• REST API (Axios): Đơn giản, phổ biến, phù hợp với dự án nhỏ.
• GraphQL (Apollo Client): Linh hoạt, tối ưu dữ liệu, phù hợp với ứng dụng lớn.
• Thực hành giúp bạn hiểu cách Vue.js tương tác với cả REST API & GraphQL.