Tích hợp dịch vụ RESTful và GraphQL

Trong bất kỳ ứng dụng web hiện đại nào, việc giao tiếp với các dịch vụ API là điều không thể thiếu. Nuxt.js hỗ trợ mạnh mẽ cả hai kiểu API phổ biến: RESTful và GraphQL. Bài học này sẽ hướng dẫn bạn cách gọi API REST bằng useFetch(), cách tích hợp dịch vụ GraphQL bằng các công cụ như @nuxtjs/apollo hoặc graphql-request, và cách tổ chức cấu hình endpoint một cách gọn gàng, dễ mở rộng. Cuối cùng là phần demo gọi dữ liệu bài viết từ một API công khai.

Tích hợp dịch vụ RESTful và GraphQL

1. Gọi API RESTful với useFetch

Ví dụ gọi dữ liệu bài viết từ JSONPlaceholder:

<script setup>
const { data, pending, error } = await useFetch('https://jsonplaceholder.typicode.com/posts')
</script>

<template>
  <div v-if="pending">Đang tải bài viết...</div>
  <div v-else-if="error">Lỗi: {{ error.message }}</div>
  <ul v-else>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Lưu ý:

• useFetch() tự động SSR nếu gọi ở cấp trang.
• Có thể cấu hình baseURL để tránh hard-code URL.

2. Tích hợp GraphQL trong Nuxt

Cách 1: Sử dụng @nuxtjs/apollo

Cài đặt:

npm install @nuxtjs/apollo

Cấu hình trong nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clients: {
      default: {
        httpEndpoint: 'https://graphql-pokeapi.graphcdn.app'
      }
    }
  }
})

Truy vấn GraphQL:

<script setup>
const query = gql`
  query GetPokemons {
    pokemons(limit: 5) {
      name
      image
    }
  }
`

const { result, loading, error } = useAsyncQuery(query)
</script>

Cách 2: Sử dụng graphql-request

Cài đặt:

npm install graphql-request

Gọi dữ liệu:

<script setup>
import { request, gql } from 'graphql-request'

const query = gql`
  {
    pokemons(limit: 5) {
      name
      image
    }
  }
`

const { data, pending, error } = await useAsyncData('pokemons', async () => {
  return await request('https://graphql-pokeapi.graphcdn.app', query)
})
</script>

3. Quản lý cấu hình endpoint

Để giúp code dễ bảo trì, bạn có thể định nghĩa endpoint trong biến môi trường hoặc trong runtimeConfig:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: 'https://jsonplaceholder.typicode.com'
    }
  }
})

Sử dụng:

const config = useRuntimeConfig()
const { data } = await useFetch(`${config.public.apiBase}/posts`)

4. Demo: Gọi dữ liệu bài viết từ API ngoài

Dùng JSONPlaceholder REST API:

<script setup>
const { data, pending, error } = await useFetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
</script>

<template>
  <div v-if="pending">Đang tải...</div>
  <ul v-else>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Dùng GraphQL API (PokéAPI):

<script setup>
import { request, gql } from 'graphql-request'

const query = gql`
  {
    pokemons(limit: 3) {
      name
      image
    }
  }
`

const { data, pending } = await useAsyncData('pokemon', () =>
  request('https://graphql-pokeapi.graphcdn.app', query)
)
</script>

<template>
  <ul v-if="!pending">
    <li v-for="p in data.pokemons" :key="p.name">
      <img :src="p.image" width="50" /> {{ p.name }}
    </li>
  </ul>
</template>

Kết luận bài học

Bạn vừa học cách tích hợp cả RESTful API và GraphQL API vào dự án Nuxt.js. Với REST, bạn có thể nhanh chóng dùng useFetch() và tổ chức endpoint bằng runtimeConfig. Với GraphQL, bạn có hai lựa chọn phổ biến là @nuxtjs/apollo hoặc graphql-request, tuỳ vào độ phức tạp và nhu cầu. Những kiến thức này là nền tảng để làm việc với backend và xây dựng ứng dụng động, kết nối dữ liệu linh hoạt.