在 Web 開發(fā)中，CRUD 操作是基本構(gòu)建塊，對于管理數(shù)據(jù)至關重要。它們幾乎在每個應用程序中無處不在，從簡單的網(wǎng)站到復雜的企業(yè)解決方案。

NestJS Boilerplate 用戶已經(jīng)能夠評估和使用功能強大的新工具 - CLI，它允許您自動創(chuàng)建資源及其屬性。使用此工具，您可以進行所有 CRUD 操作并向其中添加必要的字段，而無需手動編寫一行代碼。同時，正如我們一再宣布的，BC Boilerplates 生態(tài)系統(tǒng)包括一個完全兼容的 Extective-React-Boilerplate，以提供完整的功能（原則上，它可以是一個完全獨立的解決方案）?，F(xiàn)在讓我們從前端角度探討一下 CRUD 操作。

在具有服務器端渲染功能的 React 框架 Next.js 中，可以通過增強性能、SEO 和開發(fā)人員體驗的功能來有效管理這些操作。之前，我們發(fā)表了一篇關于啟動 NextJS 項目的有效方法的文章，現(xiàn)在我們想進一步分析使用 Next.js 中的 API 的細節(jié)和細微差別。

眾所周知，CRUD 縮寫代表創(chuàng)建、讀取、更新和刪除。這個概念代表了可以對任何數(shù)據(jù)執(zhí)行的基本操作。讓我們考慮使用管理面板用戶的示例來處理 CRUD 操作，其中實現(xiàn)了添加、編輯和刪除用戶等功能，以及檢索有關用戶的信息。下面討論的自定義 React 鉤子，用于處理 React Query 中的數(shù)據(jù)處理、分頁、錯誤管理等，已經(jīng)集成到 Extective-React-Boilerplate 中。當然，您可以直接利用這個樣板。在以下部分中，我們將分享我們對實現(xiàn)這些功能的見解。

創(chuàng)建操作

用例：提交數(shù)據(jù)以創(chuàng)建新資源（例如，用戶注冊、添加新產(chǎn)品）。
實現(xiàn)： 從表單收集數(shù)據(jù)，向服務器發(fā)送 POST 請求，處理響應，并相應地更新 UI。

讓我們觀察一個例子。向 API 發(fā)出 POST 請求會合并創(chuàng)建新用戶。在下面的代碼片段中，usePostUserService 鉤子用于封裝此邏輯。我們已經(jīng)通過定義請求和響應類型來指定創(chuàng)建新用戶的數(shù)據(jù)結(jié)構(gòu)，但這里省略這一部分以幫助您集中注意力。您可以在存儲庫 Extective-React-Boilerplate 中查看更詳細的信息或更完整的圖片，因為此代碼片段以及以下所有代碼片段都來自那里。
因此，我們將創(chuàng)建一個自定義掛鉤 usePostUserService，它使用 useFetch 掛鉤發(fā)送 POST 請求。它將用戶數(shù)據(jù)作為輸入并將其發(fā)送到 API：

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

函數(shù)wrapperFetchJsonResponse 將在本文稍后討論“錯誤處理”時進行研究。

讀操作

用例：獲取并顯示資源列表或單個資源（例如，獲取用戶配置文件和產(chǎn)品列表）。
實現(xiàn)：發(fā)送 GET 請求來獲取數(shù)據(jù)，處理加載和錯誤狀態(tài)，并在 UI 中呈現(xiàn)數(shù)據(jù)。

在我們的示例中，讀取數(shù)據(jù)涉及向 API 發(fā)出 GET 請求以獲取用戶數(shù)據(jù)。它可以包括使用分頁、過濾器獲取所有用戶，以及在定義請求 (UsersRequest) 和響應類型 (UsersResponse) 后按 ID 排序或獲取單個用戶。
要在自定義 useGetUsersService 掛鉤中獲取所有用戶，我們發(fā)送帶有用于分頁、過濾器和排序的查詢參數(shù)的 GET 請求：

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

用于獲取單個用戶 useGetUserService 掛鉤發(fā)送 GET 請求以按 ID 獲取用戶：

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}

更新操作

用例：編輯現(xiàn)有資源（例如，更新用戶信息、編輯博客文章）。
實現(xiàn)：收集更新的數(shù)據(jù)，向服務器發(fā)送 PUT 或 PATCH 請求，處理響應，并更新 UI。

讓我們更新現(xiàn)有用戶，這涉及到使用更新的用戶數(shù)據(jù)向 API 發(fā)送 PATCH 請求。為此，在自定義 usePatchUserService 掛鉤中，我們在定義請求 UserPatchRequest 和響應類型 UserPatchResponse 后發(fā)送帶有用戶 ID 和更新數(shù)據(jù)的 PATCH 請求：

function usePatchUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPatchRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "PATCH",
        body: JSON.stringify(data.data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPatchResponse>);
    },
    [fetch]
  );
}

注意：對于部分數(shù)據(jù)更新，使用 PATCH 代替 PUT 更為高級，而 PUT 通常用于完整資源更新。

刪除操作

用例：刪除資源（例如，刪除用戶或從列表中刪除項目）。
實現(xiàn)： 向服務器發(fā)送 DELETE 請求，處理響應，并更新 UI 以反映刪除。

在我們的下一個示例中，刪除用戶涉及使用用戶 ID 向您的 API 發(fā)送 DELETE 請求。在 useDeleteUsersService 掛鉤中定義請求 (UsersDeleteRequest) 和響應類型 (UsersDeleteResponse) 后，將傳輸 DELETE 請求以通過 ID 刪除用戶。

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

這些鉤子抽象了發(fā)出 HTTP 請求和處理響應的復雜性，使用這種方法可確保干凈且可維護的代碼庫，因為數(shù)據(jù)獲取邏輯被封裝并可在組件之間重用。

在 Next.js 中檢索數(shù)據(jù)

好了，我們已經(jīng)介紹了處理CRUD操作的例子，下面我們來仔細看看Next.js提供的獲取數(shù)據(jù)的方法，因為它作為一個框架，在React的基礎上增加了它的功能和優(yōu)化。很明顯，Next.js 除了 CSR（客戶端渲染）之外，還提供了高級功能，如 SSR（服務器端渲染）、SSG（靜態(tài)站點生成)、內(nèi)置 API 路由和混合渲染。那么，讓我們討論一下 Next.js 和 React 中檢索數(shù)據(jù)的共性和差異。

更適合使用SSR，在這種情況下，數(shù)據(jù)是在請求時在服務器上獲取的。 對于 SSG，它適用于數(shù)據(jù)不經(jīng)常更改的靜態(tài)頁面，數(shù)據(jù)是在構(gòu)建時獲取的。因此，getStaticProps 方法可以幫助我們
在構(gòu)建時獲取數(shù)據(jù) (SSG)。如果我們需要基于動態(tài)路由和構(gòu)建時獲取的數(shù)據(jù)來預渲染頁面，則 getStaticPaths 方法允許執(zhí)行此操作。它與 getStaticProps 結(jié)合使用在構(gòu)建時生成動態(tài)路由。需要注意的是，從 Next 14 開始，我們可以直接在組件中發(fā)出請求，而無需這些方法，從而提供了更多“React 體驗”。

將 React Query 與 Next.js 結(jié)合使用

React Query 提供了用于獲取、緩存、同步和更新服務器狀態(tài)的鉤子，使其成為處理 React 和 Next.js 應用程序中數(shù)據(jù)的絕佳工具。使用它的主要好處是：

• 高效的數(shù)據(jù)獲?。?/strong>它處理緩存和后臺數(shù)據(jù)同步，減少冗余的網(wǎng)絡請求。
• 自動重新獲?。?/strong>數(shù)據(jù)過時時可以在后臺自動重新獲取，確保UI始終顯示最新信息。
• 集成錯誤處理：內(nèi)置對處理錯誤和重試的支持，使管理網(wǎng)絡故障和服務器錯誤變得更加容易。
• 樂觀更新： useMutation 鉤子通過提供一種簡單的方法來處理樂觀 UI 更改和服務器請求失敗時的回滾邏輯，從而提供樂觀更新。
• 易于與 Next.js 集成：它可以與 getStaticProps 或 getServerSideProps（如果需要）等其他 Next.js 數(shù)據(jù)獲取方法無縫集成。
• 檢查查詢和突變：ReactQueryDevtools 工具提供了查看所有活動查詢和突變的狀態(tài)、數(shù)據(jù)、錯誤和其他詳細信息的可能性，并在應用程序運行時實時觀察查詢狀態(tài)更新.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}