Web 開発では、CRUD 操作は基本的な構(gòu)成要素であり、データ管理に不可欠です。これらは、単純な Web サイトから複雑なエンタープライズ ソリューションに至るまで、事実上あらゆるアプリケーションに遍在しています。

NestJS Boilerplate ユーザーは、リソースとそのプロパティを自動的に作成できる強力な新しいツール CLI をすでに評価して使用できるようになりました。このツールを使用すると、コードを 1 行も手動で記述することなく、すべての CRUD 操作を?qū)g行し、必要なフィールドを追加できます。一方、繰り返し発表しているように、BC ボイラープレート エコシステムには、完全な機能を提供するための完全互換性のある Extensive-React-Boilerplate が含まれています (原則として、完全に獨立したソリューションにすることができます)。次に、フロントエンドの観點から CRUD 操作を見てみましょう。

サーバー側(cè)レンダリング機能を備えた React フレームワークである Next.js では、パフォーマンス、SEO、開発者のエクスペリエンスを向上させる機能を使用して、これらの操作を効率的に管理できます。以前、NextJS プロジェクトを開始する効果的な方法に関する記事を公開しましたが、今回はさらに進んで、Next.js の API の操作の詳細とニュアンスを分析したいと思います。

ご存知のとおり、CRUD は作成、読み取り、更新、削除の頭字語です。この概念は、あらゆるデータに対して実行できる基本的な操作を表します。管理パネル ユーザーの例を使用して、CRUD 操作を検討してみましょう。ここでは、ユーザーの追加、編集、削除などの機能と、ユーザーに関する情報の取得が実裝されています。 React Query でのデータ処理、ページネーション、エラー管理などを処理する、以下で説明するカスタム React フックは、すでに Extensive-React-Boilerplate に統(tǒng)合されています。當然のことながら、この定型文を直接利用することもできます。次のセクションでは、これらの機能の実裝に関する洞察を共有します。

オペレーションの作成

ユースケース: 新しいリソースを作成するためにデータを送信します (ユーザー登録、新しい製品の追加など)。
実裝: フォームからデータを収集し、POST リクエストをサーバーに送信し、応答を処理し、それに応じて UI を更新します。

例を見てみましょう。 API への POST リクエストの実行は、新しいユーザーの作成に組み込まれています。以下のスニペットでは、usePostUserService フックを使用してこのロジックをカプセル化しています。リクエストとレスポンスのタイプを定義することで、新しいユーザーを作成するためのデータ構(gòu)造を指定しましたが、ここでは集中しやすいようにこの部分を省略します。これと以下のすべてのコード スニペットはリポジトリ Extensive-React-Boilerplate から取得したものであるため、より詳細な情報やより完全な全體像をリポジトリで確認できます。
そこで、useFetch フックを使用して POST リクエストを送信するカスタム フック usePostUserService を作成します。ユーザーデータを入力として受け取り、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]
  );
}

wrapperFetchJsonResponse 関數(shù)については、この記事の後半で「エラー処理」を説明するときに説明します。

読み取り操作

ユースケース: リソースまたは単一リソースのリストを取得して表示します (ユーザー プロファイルや製品リストの取得など)。
実裝: GET リクエストを送信してデータを取得し、読み込み狀態(tài)とエラー狀態(tài)を処理し、UI でデータをレンダリングします。

この例では、データの読み取りには、API に対して GET リクエストを発行してユーザー データを取得することが含まれます。これには、ページネーション、フィルターを使用したすべてのユーザーの取得、リクエスト (UsersRequest) と応答タイプ (UsersResponse) の定義後の ID による?yún)g一ユーザーの並べ替えまたは取得が含まれます。
カスタム useGetUsersService フックですべてのユーザーを取得するため、ページネーション、フィルター、並べ替えのクエリ パラメーターを含む 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 フックは 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]
  );
}

更新操作

ユースケース: 既存のリソースの編集 (ユーザー情報の更新、ブログ投稿の編集など)。
実裝: 更新されたデータを収集し、PUT または PATCH リクエストをサーバーに送信し、応答を処理して、UI を更新します。

既存のユーザーの更新を?qū)g行してみましょう。これには、更新されたユーザー データを含む PATCH リクエストを API に送信することが含まれます。このため、カスタム usePatchUserService フックで、リクエスト UserPatchRequest とレスポンス タイプ UserPatchResponse:
を定義した後、ユーザー 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]
  );
}

注: 部分的なデータ更新には PUT の代わりに PATCH を使用する方が高度ですが、通常はリソース全體の更新には PUT が使用されます。

削除操作

ユースケース: リソースの削除 (ユーザーの削除やリストからの項目の削除など)。
実裝: DELETE リクエストをサーバーに送信し、応答を処理し、削除を反映するように UI を更新します。

次の例では、ユーザーを削除するために、ユーザー ID を使用して API に 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]
  );
}

これらのフックは、HTTP リクエストの作成とレスポンスの処理の複雑さを抽象化します。このようなアプローチを使用すると、データ取得ロジックがカプセル化され、コンポーネント間で再利用できるため、クリーンで保守可能なコードベースが保証されます。

Next.js でのデータの取得

OK、CRUD オペレーションの処理例について説明しました。Next.js が提供するデータ取得方法を詳しく見てみましょう。これは、Next.js がフレームワークとして React に機能と最適化を追加しているためです。 Next.js が CSR (クライアントサイド レンダリング) を超えて、SSR (サーバーサイド レンダリング)、SSG (靜的サイト生成) などの高度な機能を提供していることは明らかです。 ??>)、組み込み API ルート、ハイブリッド レンダリング。それでは、Next.js と React でのデータ取得の共通點と相違點について説明しましょう。

React アプリは純粋にクライアント側(cè)であるため、最初のページの読み込み後にクライアント上でデータの取得が行われます。ページがロードされるたびにデータをフェッチする必要がある動的ページの場合、SSRを使用するのがより適しています。この場合、データはリクエスト時にサーバー上でフェッチされます。
SSG の場合、データが頻繁に変更されない靜的ページに適しており、データはビルド時にフェッチされます。したがって、getStaticProps メソッドは、ビルド時にデータを取得する (SSG) に役立ちます。動的ルートとビルド時にフェッチされたデータに基づいてページを事前レンダリングする必要がある場合は、getStaticPaths メソッドを使用してこれを行うことができます。これは getStaticProps と組み合わせて使用??され、ビルド時に動的ルートを生成します。 Next 14 以降では、これらのメソッドを使用せずにコンポーネント內(nèi)で直接リクエストを行うことができるため、より「React エクスペリエンス」が得られることに注意してください。

useQuery を使用したクライアント側(cè)のデータ フェッチは、サーバー側(cè)でフェッチされたデータから初期狀態(tài)がハイドレートされ、クライアント側(cè)でデータをフェッチする必要がある対話型コンポーネントに使用できます。頻繁に変更されるデータを取得したり、クライアント側(cè)の対話性を追加したりするには、useSWR 戦略が役立ちます。これは、キャッシュと再検証を使用してクライアント側(cè)でデータを取得するための React フックです。これにより、通常は最初のページの読み込み後に、クライアント側(cè)でデータをフェッチできるようになります。ただし、SSR のビルド時またはサーバー上でデータを取得することはありませんが、必要に応じて新しいデータを再検証して取得することができます。

上記のメソッドに関する情報を要約するために、Next.js のさまざまなデータ取得メソッドの包括的な概要を示し、それぞれのタイミングとユースケースを強調(diào)した表を見てみましょう。

Next.js で React Query を使用する

React Query は、サーバー狀態(tài)の取得、キャッシュ、同期、更新のためのフックを提供し、React と Next.js アプリケーションの両方でデータを処理するための優(yōu)れたツールとなります。これを使用する主な利點は次のとおりです:

• 効率的なデータ取得: キャッシュとバックグラウンド データの同期を処理し、冗長なネットワーク リクエストを削減します。
• 自動再取得: データが古くなった場合、バックグラウンドで自動的に再取得できるため、UI には常に最新の情報が表示されます。
• 統(tǒng)合されたエラー処理: エラーと再試行を処理するためのサポートが組み込まれており、ネットワーク障害とサーバー エラーの管理が容易になります。
• オプティミスティックな更新: useMutation フックは、オプティミスティックな UI 変更と、サーバー リクエストが失敗した場合のロールバック ロジックの両方を簡単に処理する方法を提供することで、オプティミスティックな更新を提供します。
• Next.js との統(tǒng)合の容易さ: getStaticProps や getServerSideProps などの他の Next.js データ取得メソッド (必要な場合) とシームレスに統(tǒng)合できます。
• クエリとミューテーションの検査: ReactQueryDevtools ツールは、すべてのアクティブなクエリとミューテーションのステータス、データ、エラー、その他の詳細を表示し、アプリケーションの実行中にリアルタイムでクエリの狀態(tài)が更新されるのを監(jiān)視する機能を提供します。 .

クエリクライアントプロバイダー

QueryClientProvider は、React コンポーネント ツリーに QueryClient インスタンスを提供するコンテキスト プロバイダー コンポーネントです。このインスタンスは、useQuery などのフックを使用するために必要です。 これを設(shè)定するには、コンポーネント ツリーのルートに配置し、再試行動作やキャッシュ時間などのクエリとミューテーションのグローバル設(shè)定を構(gòu)成する必要があります。この後、React Query クライアントを初期化し、アプリケーション全體で利用できるようにします。

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]
  );
}

それでは、なぜそれをプロジェクトに追加する必要があるのでしょうか?以下の場合に有益です:

• すべてのクエリとミューテーションの一元化された構(gòu)成。
• セットアップが簡単で、既存の React アプリケーションに統(tǒng)合できます。
• キャッシュ、バックグラウンド再取得、クエリの無効化などの機能を有効にします。

React クエリ開発ツール

React Query が提供するもう 1 つの重要な機能は、React Query Devtools です。これは、React Query の狀態(tài)を検査およびデバッグするための開発ツールです。これはアプリケーションに簡単に追加でき、ブラウザ拡張機能を介して、または前の例のようにコンポーネントとしてアクセスできます。
開発中に、React Query Devtools を使用して、個々のクエリと変更を検査し、特定のクエリがプリフェッチする理由を理解し、クエリ キャッシュの狀態(tài)を監(jiān)視し、時間の経過とともにどのように変化するかを確認できます。

ページネーションと無限スクロール

ライブラリの機能を使用してページネーション コントロールや無限スクロールを?qū)g裝するには、useInfiniteQuery が最適です。まず、React Query でクエリをキャッシュおよび取得するための一意のキーを生成します。ここでの by メソッドは、並べ替えとフィルターのオプションに基づいて一意のキーを作成します。

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]
  );
}

これを行うには、React Query の useInfiniteQuery 関數(shù)を使用し、読み取り操作セクションで前述した useGetUsersService フックを使用します。

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]
  );
}

ここでの

QueryFn は、現(xiàn)在のページ、フィルター、および並べ替えパラメーターに基づいてユーザー データを取得し、getNextPageParam 関數(shù)は、最後のページの応答に基づいて取得する次のページを決定します。ユーザーがスクロールするか、追加のデータを要求すると、useInfiniteQuery は nextPage パラメーターに基づいて次のデータ セットを自動的に取得します。これが無限スクロールの仕組みです。クエリのキャッシュ時間は gcTime パラメータによって設(shè)定されます。

全體として、React Query は、React アプリケーションのサーバー狀態(tài)の管理とデバッグのための包括的なソリューションを提供します。 QueryClientProvider は、すべてのクエリとミューテーションに対して一元化された一貫した構(gòu)成を保証します。一方、ReactQueryDevtools は、開発中にクエリの動作を検査して理解するための強力なツールを提供します。

エラー処理

CRUD 操作の実裝には、使いやすさとアプリケーションの信頼性を確保するために、常に適切なエラー処理が必要です。サーバー エラーは通常、クライアント要求の処理の失敗、サーバー コードのエラー、リソースの過負荷、インフラストラクチャの構(gòu)成ミス、または外部サービスの障害に関連しています。エラー処理については、Extensive-react-boilerplate では、wrapperFetchJsonResponse 関數(shù)の使用を推奨しています。

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]
  );
}

結(jié)論

この記事では、基本的な CRUD 操作について説明し、NextJS でのデータ取得テクニックについて説明しました。 React Query を使用して狀態(tài)を管理する方法について詳しく説明し、データ取得のデバッグと最適化のための QueryClientProvider と ReactQueryDevtools の機能の概要も説明しました。さらに、大規(guī)模なデータセットを処理するためのページネーションと無限スクロールの実裝について説明し、アプリケーションの回復力を高め、スムーズなユーザー エクスペリエンスを保証するためのエラー処理に対処しました。

この記事で説明した例とテクニックに従うことで、NextJS プロジェクトで CRUD 操作を処理するための準備が整っているはずです。あるいは、プロジェクトに Extensive-react-boilerplate テンプレートを使用することもできます。これには完全な互換性のある Nestjs-boilerplate バックエンドがあり、CLI を使用して 1 行のコードを使用することなく、數(shù)分で CRUD 操作を操作できる機能を?qū)g裝しています。エンティティ関係については、こことここで詳しく説明しています。実験を続け、ベスト プラクティスの最新情報を常に入手してください。役立つと思われる場合は、この定型文をぜひお試しください。

當社の BC ボイラープレート チームは、開発を強化する方法を常に模索しています。 GitHub ディスカッションや以下のコメントについてのご意見をお待ちしております。

この記事の全クレジットは Olena Vlasenko と Vlad Shchepotin にあります ??

以上がNextJS で CRUD をマスターするの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。