在 Web 開發(fā)中，CRUD 操作是基本構(gòu)建塊，對於管理資料至關(guān)重要。它們幾乎在每個(gè)應(yīng)用程式中無處不在，從簡單的網(wǎng)站到複雜的企業(yè)解決方案。

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

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

眾所周知，CRUD 縮寫代表建立、讀取、更新和刪除。這個(gè)概念代表了可以對任何資料執(zhí)行的基本操作。讓我們考慮使用管理面板使用者的範(fàn)例來處理 CRUD 操作，其中實(shí)現(xiàn)了新增、編輯和刪除使用者等功能，以及檢索有關(guān)使用者的信息。下面討論的自訂 React 鉤子，用於處理 React Query 中的資料處理、分頁、錯誤管理等，已經(jīng)整合到 Extective-React-Boilerplate 中。當(dāng)然，您可以直接利用這個(gè)樣板。在以下部分中，我們將分享我們對實(shí)現(xiàn)這些功能的見解。

建立操作

使用案例：提交資料以建立新資源（例如，使用者註冊、新增產(chǎn)品）。
實(shí)作： 從表單收集數(shù)據(jù)，向伺服器發(fā)送 POST 請求，處理回應(yīng)，並相應(yīng)地更新 UI。

讓我們觀察一個(gè)例子。向 API 發(fā)出 POST 請求會合併建立新使用者。在下面的程式碼片段中，usePostUserService 鉤子用於封裝此邏輯。我們已經(jīng)透過定義請求和回應(yīng)類型來指定建立新使用者的資料結(jié)構(gòu)，但這裡省略這一部分以幫助您集中註意力。您可以在儲存庫 Extective-React-Boilerplate 中查看更詳細(xì)的資訊或更完整的圖片，因?yàn)榇顺淌酱a片段以及以下所有程式碼片段都來自那裡。
因此，我們將建立一個(gè)自訂掛鉤 usePostUserService，它使用 useFetch 掛鉤發(fā)送 POST 請求。它將用戶資料作為輸入並將其發(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 將在本文稍後討論「錯誤處理」時(shí)進(jìn)行研究。

讀取操作

使用案例：取得並顯示資源清單或單一資源（例如，取得使用者設(shè)定檔和產(chǎn)品清單）。
實(shí)作：發(fā)送 GET 請求來取得數(shù)據(jù)，處理載入和錯誤狀態(tài)，並在 UI 中呈現(xiàn)數(shù)據(jù)。

在我們的範(fàn)例中，讀取資料涉及向 API 發(fā)出 GET 請求以取得使用者資料。它可以包括使用分頁、過濾器來取得所有用戶，以及在定義請求 (UsersRequest) 和回應(yīng)類型 (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)有資源（例如，更新使用者資訊、編輯部落格文章）。
實(shí)作：收集更新的數(shù)據(jù)，向伺服器發(fā)送 PUT 或 PATCH 請求，處理回應(yīng)，並更新 UI。

讓我們更新現(xiàn)有用戶，這涉及使用更新的用戶資料向 API 發(fā)送 PATCH 請求。為此，在自訂 usePatchUserService 掛鉤中，我們在定義請求 UserPatchRequest 和回應(yīng)類型 UserPatchResponse 後發(fā)送帶有使用者 ID 和更新資料的 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]
  );
}

注意：對於部分資??料更新，使用 PATCH 取代 PUT 更為高級，而 PUT 通常用於完整資源更新。

刪除操作

使用案例：刪除資源（例如，刪除使用者或從清單中刪除項(xiàng)目）。
實(shí)作： 向伺服器發(fā)送 DELETE 請求，處理回應(yīng)，並更新 UI 以反映刪除。

在我們的下一個(gè)範(fàn)例中，刪除使用者涉及使用使用者 ID 向您的 API 發(fā)送 DELETE 請求。在 useDeleteUsersService 掛鉤中定義請求 (UsersDeleteRequest) 和回應(yīng)類型 (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 請求和處理回應(yīng)的複雜性，使用此方法可確保乾淨(jìng)且可維護(hù)的程式碼庫，因?yàn)橘Y料擷取邏輯已封裝並可在元件之間重複使用。

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

好了，我們已經(jīng)介紹了處理CRUD操作的例子，下面我們來仔細(xì)看看Next.js提供的獲取資料的方法，因?yàn)樗鳛橐粋€(gè)框架，在React的基礎(chǔ)上增加了它的功能和優(yōu)化。很明顯，Next.js 除了CSR（客戶端渲染）之外，還提供了高級功能，如SSR（伺服器端渲染）、SSG（靜態(tài)站點(diǎn)生成)、內(nèi)建API 路由和混合渲染。那麼，讓我們討論一下 Next.js 和 React 中檢索資料的共通點(diǎn)和差異。

更適合使用SSR，在這種情況下，資料是在請求時(shí)在伺服器上取得的。 對於 SSG，它適用於資料不經(jīng)常更改的靜態(tài)頁面，資料是在建置時(shí)取得的。因此，getStaticProps 方法可以幫助我們
在建置時(shí)取得資料 (SSG)。如果我們需要基於動態(tài)路由和建置時(shí)取得的資料來預(yù)先渲染頁面，則 getStaticPaths 方法允許執(zhí)行此操作。它與 getStaticProps 結(jié)合使用在建置時(shí)產(chǎn)生動態(tài)路由。需要注意的是，從 Next 14 開始，我們可以直接在元件中發(fā)出請求，而無需這些方法，從而提供了更多「React 體驗(yàn)」。

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

React Query 提供了用於獲取、快取、同步和更新伺服器狀態(tài)的鉤子，使其成為處理 React 和 Next.js 應(yīng)用程式中資料的絕佳工具。使用它的主要好處是：

• 高效率的資料取得：它處理快取和後臺資料同步，減少冗餘的網(wǎng)路請求。
• 自動重新獲?。?/strong>資料過時(shí)時(shí)可以在背景自動重新獲取，確保UI始終顯示最新資訊。
• 整合錯誤處理：內(nèi)建對處理錯誤和重試的支持，使管理網(wǎng)路故障和伺服器錯誤變得更加容易。
• 樂觀更新： useMutation 鉤子透過提供一種簡單的方法來處理樂觀 UI 變更和伺服器請求失敗時(shí)的回滾邏輯，從而提供樂觀更新。
• 易於與 Next.js 整合：它可以與 getStaticProps 或 getServerSideProps（如果需要）等其他 Next.js 資料擷取方法無縫整合。
• 檢查查詢和突變：ReactQueryDevtools 工具提供了查看所有活動查詢和突變的狀態(tài)、資料、錯誤和其他詳細(xì)資訊的可能性，並在應(yīng)用程式運(yùn)行時(shí)即時(shí)觀察查詢狀態(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]
  );
}