[Day15] 實戰演練：在 Vue 中，運用 GraphQL 的魔法分頁查詢優化使用者體驗！

2023 iThome 鐵人賽

DAY 15

Vue.js

Vue & GraphQL 探險之旅：30天，從新手村到魔王之巔系列第 15 篇

15th鐵人賽

Miyuki

2023-09-30 22:29:40

321 瀏覽

分享至

在現代的 Web 應用中，使用者體驗是至關重要的。很多時候，網頁載入速度直接影響到使用者的滿意度，特別是當資料量龐大時。GraphQL 是一種允許客戶端明確請求所需資料的查詢語言，透過分頁查詢，我們可以進一步優化使用者體驗，避免一次載入過多不必要的資料。

本次實戰演練中，我們將探討如何在 Vue 框架中運用 GraphQL 的分頁查詢功能，進而優化文章列表頁面的載入速度。而不是一次性讀取全部的一百篇文章，我們會使用分頁技巧，每次只載入部分文章，從而加速頁面的載入並提供更流暢的滾動體驗。

文章範例程式碼 GitHub

範例程式碼 GitHub 連結

Day15 開始前分支：feat/day_14/implement_blog_detail_view_using_variables
Day15 進度完成分支：feat/day_15/enhance_blog_list_view_by_pagination

分頁查詢 Pagination

分頁查詢泛指一種只取出部分資料的技術。當我們面對大量的資料時，一次性地取出所有資料是不實際的，也可能會造成系統的過度負擔。這時，分頁查詢就派上用場，它允許我們基於某些條件（如資料的順序、特定範圍、或用戶的請求）來取出部分資料。

舉一個常見的例子：當使用者在一個電商平台上搜尋商品時，結果可能有上千個商品，但螢幕上只會顯示前 20 筆。當使用者觸發下一個分頁顯示條件時，更多的商品才會被加載顯示。這就是分頁查詢的實際應用。

GraphQL 的分頁查詢

在 GraphQL 的語境中，分頁查詢允許我們以更靈活和高效的方式取得部分資料集。傳統的 RESTful API 中，分頁通常是透過 URL 參數來完成，而在 GraphQL 中，我們可以進一步定制查詢，取得確切所需的資料。

GraphQL 提供了兩種主要的分頁方法：

Offset-based Pagination: 這是最基本的分頁方法，通常使用 limit 和 offset 參數來確定要取得的資料範圍。
Cursor-based Pagination: 較為先進，且被許多大型應用所採用。它使用特定的 cursor 來標記資料的起始和結束位置，通常結合 first 或 last 參數來取得資料。

稍後，本文將會使用基礎的 Offset-based Pagination 作為分頁查詢的示範。

為何分頁查詢對使用者體驗如此重要？

資料效率: 使用者只需取得他們真正需要的資料。這不僅加速了頁面的載入時間，也減少了不必要的資料傳輸。
提供更流暢的使用者體驗: 避免因資料過多而造成的頁面卡頓，尤其在移動網絡環境下更為重要。
前後端解耦: GraphQL 的分頁查詢方法允許前端和後端團隊獨立地進行優化和調整，確保系統的總體效能。

總之，GraphQL 的分頁查詢提供了一種更加高效、靈活和使用者友善的方法來獲取資料，確保應用在各種情境下都能夠提供最佳的使用者體驗。

實戰：運用分頁查詢優化使用者體驗

先前我們選用的 Fake Online GraphQL API — GraphQLZero — 在其文件中明確表示支援分頁功能。

因此，我們只需根據該文件指引修改 GraphQL 查詢，即可輕鬆開始實作分頁查詢功能。

撰寫分頁查詢

在 Play Ground 的測試結果中，正如我們所指定的，系統只回傳了前五筆資料。

Offset-based Pagination 的計算方法:

Offset-based Pagination 主要使用 limit 和 offset 這兩個參數來定義資料的範圍。

簡單來說，offset 是告訴系統從哪條記錄開始，而 limit 是指定要取得多少筆資料。

假設每頁要顯示 10 筆資料，那麼 limit 就設為 10。而 offset 的值則會根據頁碼而變，計算公式為：(頁碼 - 1) * 每頁資料量

舉例：

如果想要取得第一頁的資料：
- limit = 10
- offset = (1 - 1) * 10 = 0
如果想要取得第三頁的資料：
- limit = 10
- offset = (3 - 1) * 10 = 20

通過這種方式，系統知道第三頁的資料是從第 21 筆開始，並取得 10 筆資料。

更新文章列表頁面

完整程式碼範例請參考：feat/day_15/enhance_blog_list_view_by_pagination

in src/views/BlogListView.vue

引入新的分頁查詢文檔 gqlGetPostsPerPage
設定分頁查詢所需變數，這裡示範了另一種方式讓 GraphQL Variables 具有響應式

<script setup lang="ts">
// ...

// 設定起始頁面為第一頁面
const defaultPage = 1
// 當前頁碼
const currentPage = ref(defaultPage)
// 一頁幾筆資料
const limit = ref(8)

const { result, loading, error } = useQuery(gqlGetPostsPerPage, () => ({
  options: {
    paginate: {
      page: currentPage.value,
      limit: limit.value,
    },
  },
}))

const posts = computed(() => (result.value?.posts?.data ?? []) as Post[])
const totalCount = computed(() => result.value?.posts?.meta?.totalCount ?? 0)
</script>

<template>
// ...
</template>

加入 Pagination 元件

<template>
  <!-- ... -->
  <Pagination v-slot="{ page }" :total="totalCount" :items-per-page="limit" :sibling-count="1" show-edges :default-page="defaultPage" class="mt-8">
    <PaginationList v-slot="{ items }" class="flex items-center justify-center gap-1">
      <PaginationFirst />
      <PaginationPrev />

      <template v-for="(item, index) in items">
        <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
          <Button class="w-10 h-10 p-0" :variant="item.value === page ? 'default' : 'outline'" @click.prevent="currentPage = item.value">
            {{ item.value }}
          </Button>
        </PaginationListItem>
        <PaginationEllipsis v-else :key="item.type" :index="index" />
      </template>

      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </Pagination>
</template>

由於之前的重構並採取了模組化的策略，即使我們從撈取大量文章切換到分頁查詢，我們也只需進行如此簡單的修改即可完成分頁功能。