Menguasai CRUD dengan NextJS

Dalam pembangunan web, operasi CRUD merupakan blok binaan asas dan penting untuk mengurus data. Ia ada di mana-mana dalam hampir setiap aplikasi, daripada tapak web ringkas kepada penyelesaian perusahaan yang kompleks.

Pengguna NestJS Boilerplate telah pun dapat menilai dan menggunakan alat baharu yang berkuasa - CLI, yang membolehkan anda mencipta sumber dan sifatnya secara automatik. Dengan alat ini, anda boleh membuat semua operasi CRUD dan menambah medan yang diperlukan padanya tanpa menulis satu baris kod secara manual. Sementara itu, seperti yang telah kami umumkan berulang kali, ekosistem BC Boilerplates termasuk Extensive-React-Boilerplate yang serasi sepenuhnya untuk menyediakan kefungsian penuh (yang, pada dasarnya, boleh menjadi penyelesaian bebas sepenuhnya). Sekarang mari kita terokai operasi CRUD dari perspektif bahagian hadapan.

Dalam Next.js, rangka kerja React dengan keupayaan pemaparan sebelah pelayan, operasi ini boleh diurus dengan cekap dengan ciri yang meningkatkan prestasi, SEO dan pengalaman pembangun. Sebelum ini, kami menerbitkan artikel tentang Cara Berkesan Untuk Memulakan Projek NextJS, dan kini kami ingin pergi lebih jauh dan menganalisis butiran dan nuansa bekerja dengan API dalam Next.js.

Seperti yang kita ketahui, akronim CRUD ialah singkatan kepada Create, Read, Update dan Delete. Konsep ini mewakili operasi asas yang boleh dilakukan pada mana-mana data. Mari kita pertimbangkan untuk bekerja dengan operasi CRUD menggunakan contoh pengguna panel pentadbiran, di mana fungsi seperti menambah, mengedit dan memadam pengguna dilaksanakan, bersama-sama dengan mendapatkan maklumat tentang mereka. Cangkuk React tersuai yang dibincangkan di bawah, mengendalikan pemprosesan data dalam React Query, penomboran, pengurusan ralat dan banyak lagi, sudah disepadukan ke dalam Extensive-React-Boilerplate. Sememangnya, anda boleh memanfaatkan boilerplate ini secara langsung. Dalam bahagian berikut, kami akan berkongsi pandangan kami tentang melaksanakan ciri ini.

Buat Operasi

Kes Penggunaan: Menyerahkan data untuk mencipta sumber baharu (cth., pendaftaran pengguna, menambah produk baharu).
Pelaksanaan: Kumpul data daripada borang, hantar permintaan POST ke pelayan, kendalikan respons dan kemas kini UI dengan sewajarnya.

Mari kita perhatikan satu contoh. Membuat permintaan POST kepada API digabungkan untuk mencipta pengguna baharu. Dalam coretan di bawah cangkuk usePostUserService digunakan untuk merangkum logik ini. Kami telah menentukan struktur data untuk membuat pengguna baharu dengan mentakrifkan jenis permintaan dan respons tetapi tinggalkan bahagian ini di sini untuk membantu anda memfokuskan. Anda boleh melihat maklumat yang lebih terperinci atau gambar yang lebih lengkap dalam repositori Extensive-React-Boilerplate kerana ini dan semua coretan kod berikut adalah dari sana.
Jadi, kami akan membuat cangkuk tersuai usePostUserService yang, menggunakan cangkuk useFetch untuk menghantar permintaan POST. Ia mengambil data pengguna sebagai input dan menghantarnya ke 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]
  );
}

Fungsi pembalutFetchJsonResponse akan diperiksa kemudian dalam artikel ini apabila kita sampai ke "pengendalian ralat".

Baca Operasi

Kes Penggunaan: Mengambil dan memaparkan senarai sumber atau satu sumber (mis., mengambil profil pengguna dan senarai produk).
Pelaksanaan: Hantar permintaan GET untuk mengambil data, mengendalikan keadaan pemuatan dan ralat serta memaparkan data dalam UI.

Dalam contoh kami, membaca data melibatkan membuat permintaan GET kepada API untuk mengambil data pengguna. Ia boleh termasuk mengambil semua pengguna dengan penomboran, penapis dan mengisih atau mengambil pengguna tunggal mengikut ID selepas mentakrifkan permintaan (UsersRequest) dan jenis respons (UsersResponse).
Untuk mengambil semua pengguna dalam cangkuk useGetUsersService tersuai, kami menghantar permintaan GET dengan parameter pertanyaan untuk penomboran, penapis dan pengisihan:

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

Untuk mengambil Pengguna Tunggal cangkuk useGetUserService menghantar permintaan GET untuk mengambil pengguna melalui 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]
  );
}

Kemas kini Operasi

Kes Penggunaan: Mengedit sumber sedia ada (cth., mengemas kini maklumat pengguna, mengedit catatan blog).
Pelaksanaan: Kumpul data yang dikemas kini, hantar permintaan PUT atau PATCH ke pelayan, kendalikan respons dan kemas kini UI.

Mari kita mengemas kini pengguna sedia ada, yang melibatkan penghantaran permintaan PATCH ke API dengan data pengguna yang dikemas kini. Untuk ini, dalam cangkuk usePatchUserService tersuai, kami menghantar permintaan PATCH dengan ID pengguna dan data yang dikemas kini selepas mentakrifkan permintaan UserPatchRequest dan jenis respons UserPatchResponse:

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

Nota: Menggunakan PATCH dan bukannya PUT adalah lebih maju untuk kemas kini data separa, manakala PUT biasanya digunakan untuk kemas kini sumber penuh.

Padam Operasi

Kes Penggunaan: Mengalih keluar sumber (cth., memadamkan pengguna atau mengalih keluar item daripada senarai).
Pelaksanaan: Hantar permintaan PADAM ke pelayan, kendalikan respons dan kemas kini UI untuk menggambarkan pengalihan keluar.

Dalam contoh kami yang seterusnya, pemadaman pengguna melibatkan penghantaran permintaan DELETE ke API anda dengan ID pengguna. Selepas mentakrifkan permintaan (UsersDeleteRequest) dan jenis respons (UsersDeleteResponse) dalam cangkuk useDeleteUsersService, permintaan DELETE dihantar untuk mengalih keluar pengguna melalui 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]
  );
}

Kail ini mengabstrakkan kerumitan membuat permintaan HTTP dan mengendalikan respons, Menggunakan pendekatan sedemikian memastikan pangkalan kod yang bersih dan boleh diselenggara, kerana logik pengambilan data dirangkumkan dan boleh digunakan semula merentas komponen anda.

Mendapatkan semula data dalam Next.js

Ok, kami telah menangani contoh pemprosesan operasi CRUD, dan mari kita lihat dengan lebih dekat kaedah mendapatkan data yang ditawarkan oleh Next.js kerana ia, sebagai rangka kerja, menambahkan fungsi dan pengoptimumannya berbanding React. Jelas sekali bahawa Next.js, melangkaui CSR (Rendering Sisi Pelanggan), menyediakan ciri lanjutan seperti SSR (Rendering Sisi Pelayan), SSG (Penjanaan Tapak Statik), laluan API terbina dalam dan pemaparan hibrid. Jadi, mari kita bincangkan persamaan dan perbezaan dalam mendapatkan semula data dalam Next.js dan React.

Sebaik sahaja apl React berada di pihak pelanggan semata-mata, jadi pengambilan data berlaku pada klien selepas halaman awal dimuatkan. Untuk halaman dinamik yang perlu mengambil data setiap kali halaman dimuatkan, adalah lebih sesuai untuk menggunakan SSR, dalam kes ini, data diambil pada pelayan pada masa permintaan.
Dalam kes SSG, yang sesuai untuk halaman statik yang data tidak kerap berubah, data diambil pada masa binaan. Jadi, kaedah getStaticProps membantu kami mengambil data pada masa bina (SSG). Jika kami memerlukan halaman untuk diprapaparkan berdasarkan laluan dinamik dan data yang diambil pada masa binaan, kaedah getStaticPaths membenarkan untuk melakukan ini. Ia digunakan bersama-sama dengan getStaticProps untuk menjana laluan dinamik pada masa bina. Perlu diingat bahawa bermula dengan 14 Seterusnya, kita boleh membuat permintaan terus dalam komponen tanpa kaedah ini, yang memberikan lebih "pengalaman React".

Pengambilan Data Sebelah Pelanggan dengan useQuery boleh digunakan untuk komponen interaktif yang perlu mengambil data pada bahagian klien, dengan keadaan awal terhidrat daripada data yang diambil sebelah pelayan. Untuk mengambil data yang kerap berubah atau untuk menambah interaktiviti pihak pelanggan, strategi useSWR adalah berguna. Ia adalah cangkuk React untuk pengambilan data pihak pelanggan dengan caching dan pengesahan semula. Ia membenarkan pengambilan data pada bahagian klien, biasanya selepas halaman awal dimuatkan. Namun begitu, ia tidak mengambil data pada masa binaan atau pada pelayan untuk SSR, tetapi ia boleh mengesahkan semula dan mengambil data baharu apabila diperlukan.

Untuk meringkaskan maklumat tentang kaedah di atas, kita boleh melihat jadual yang menyediakan gambaran keseluruhan menyeluruh tentang kaedah pengambilan data yang berbeza dalam Next.js, menyerlahkan pemasaan dan kes penggunaan masing-masing.

Method	Data Fetching	Timing	Use Case
getStaticPaths	Static Site Generation (SSG)	At build time	Pre-render pages for dynamic routes based on data available at build time.
getStaticProps	Static Site Generation (SSG)	At build time	Pre-render pages with static content at build time. Ideal for content that doesn't change frequently.
getServerSideProps	Server-Side Rendering (SSR)	On each request	Fetch data on the server for each request, providing up-to-date content. Ideal for dynamic content that changes frequently.
useQuery	Client-Side Rendering (CSR)	After the initial page load	Fetch initial data server-side, hydrate, reduce redundant network requests, Background Refetching.
useSWR	Client-Side Rendering (CSR)	After the initial page load	Fetch and revalidate data on the client-side, suitable for frequently changing data.

Menggunakan React Query dengan Next.js

React Query menyediakan cangkuk untuk mengambil, menyimpan cache, menyegerak dan mengemas kini keadaan pelayan, menjadikannya alat yang hebat untuk mengendalikan data dalam aplikasi React dan Next.js. Manfaat utama penggunaannya ialah:

• Pengambilan data yang cekap: Ia mengendalikan cache dan penyegerakan data latar belakang, mengurangkan permintaan rangkaian yang berlebihan.
• Pengumpulan semula automatik: Data boleh diambil semula secara automatik di latar belakang apabila ia menjadi lapuk, memastikan UI sentiasa memaparkan maklumat terkini.
• Pengendalian ralat bersepadu: Sokongan terbina dalam untuk mengendalikan ralat dan percubaan semula, menjadikannya lebih mudah untuk mengurus kegagalan rangkaian dan ralat pelayan.
• Kemas kini optimistik: Cangkuk useMutation menyediakan kemas kini optimistik dengan menyediakan cara mudah untuk mengendalikan kedua-dua perubahan UI yang optimistik dan logik rollback jika permintaan pelayan gagal.
• Kemudahan penyepaduan dengan Next.js: Ia boleh disepadukan dengan lancar dengan kaedah pengambilan data Next.js lain seperti getStaticProps atau getServerSideProps (jika perlu).
• Pemeriksaan pertanyaan dan mutasi: alat ReactQueryDevtools menyediakan kemungkinan melihat status, data, ralat dan butiran lain bagi semua pertanyaan dan mutasi aktif serta melihat keadaan pertanyaan dikemas kini dalam masa nyata semasa aplikasi anda berjalan .

QueryClientProvider

QueryClientProvider ialah komponen penyedia konteks yang membekalkan contoh QueryClient kepada pepohon komponen React. Contoh ini diperlukan untuk menggunakan cangkuk seperti useQuery. Untuk menyediakannya, ia perlu diletakkan pada akar pokok komponen anda dan mengkonfigurasi tetapan global untuk pertanyaan dan mutasi seperti tingkah laku cuba semula, masa cache dan banyak lagi. Selepas ini, ia memulakan klien React Query dan menjadikannya tersedia sepanjang aplikasi.

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

Jadi, mengapa ia perlu ditambah pada projek? Ia bermanfaat untuk:

• Konfigurasi terpusat untuk semua pertanyaan dan mutasi.
• Mudah untuk disediakan dan disepadukan ke dalam aplikasi React sedia ada.
• Mendayakan ciri seperti caching, pengambilan semula latar belakang dan ketidaksahihan pertanyaan.

React Query Devtools

Ciri penting lain yang disediakan oleh React Query ialah React Query Devtools - alat pembangunan untuk memeriksa dan menyahpepijat keadaan React Query. Ia boleh ditambah dengan mudah pada aplikasi anda dan diakses melalui sambungan penyemak imbas atau sebagai komponen seperti dalam contoh sebelum ini.
Semasa pembangunan, React Query Devtools boleh digunakan untuk pemeriksaan pertanyaan dan mutasi individu, memahami sebab pertanyaan tertentu mengambil awal dan memantau keadaan cache pertanyaan dan melihat cara ia berkembang dari semasa ke semasa.

Penomboran dan Tatal Tak Terhingga

Untuk melaksanakan kawalan penomboran atau penatalan tak terhingga menggunakan ciri dalam perpustakaan, useInfiniteQuery sangat sesuai. Pertama, kami menjana kunci unik untuk caching dan mendapatkan semula pertanyaan dalam React Query. Kaedah mengikut di sini mencipta kunci unik berdasarkan pilihan pengisihan dan penapisan.

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

Untuk melakukan ini, kami akan menggunakan fungsi useInfiniteQuery daripada React Query dan menggunakan cangkuk useGetUsersService yang dibincangkan di atas dalam bahagian Operasi Baca.

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 di sini mendapatkan semula data pengguna berdasarkan halaman semasa, penapis dan parameter isihan, dan fungsi getNextPageParam menentukan halaman seterusnya untuk diambil berdasarkan respons halaman terakhir. Apabila pengguna menatal atau meminta lebih banyak data, useInfiniteQuery secara automatik mendapatkan semula set data seterusnya berdasarkan parameter nextPage - beginilah cara penatalan tak terhingga berlaku. Masa cache untuk pertanyaan ditetapkan oleh parameter gcTime.

Secara keseluruhan, React Query menyediakan penyelesaian yang komprehensif untuk mengurus dan menyahpepijat keadaan pelayan dalam aplikasi React. QueryClientProvider memastikan konfigurasi terpusat dan konsisten untuk semua pertanyaan dan mutasi, manakala ReactQueryDevtools menawarkan alat yang berkuasa untuk memeriksa dan memahami tingkah laku pertanyaan semasa pembangunan.

Pengendalian Ralat

Melaksanakan operasi CRUD sentiasa memerlukan pengendalian ralat yang betul untuk memastikan kemesraan pengguna dan kebolehpercayaan aplikasi. Ralat pelayan biasanya dikaitkan dengan pemprosesan permintaan pelanggan yang gagal, ralat dalam kod pelayan, lebihan sumber, salah konfigurasi infrastruktur atau kegagalan dalam perkhidmatan luaran. Untuk pengendalian ralat, Extensive-react-boilerplate mencadangkan menggunakan fungsi wrapperFetchJsonResponse:

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

Kesimpulan

Dalam artikel ini, kami membincangkan operasi CRUD asas, meneroka teknik mendapatkan data dalam NextJS. Kami menyelidiki menggunakan React Query untuk mengurus keadaan, juga menggariskan keupayaan QueryClientProvider dan ReactQueryDevtools untuk menyahpepijat dan mengoptimumkan pengambilan data. Selain itu, kami berbincang untuk melaksanakan penomboran dan penatalan tanpa had untuk mengendalikan set data yang besar dan menangani pengendalian ralat untuk menjadikan aplikasi anda lebih berdaya tahan dan memastikan pengalaman pengguna yang lancar.

Dengan mengikuti contoh dan teknik yang digariskan dalam artikel ini, anda kini seharusnya dilengkapi dengan baik untuk mengendalikan operasi CRUD dalam projek NextJS anda. Sebagai alternatif, anda boleh menggunakan templat Extensive-react-boilerplate kami untuk projek anda. Ia mempunyai bahagian belakang Nestjs-boilerplate yang serasi sepenuhnya yang melaksanakan keupayaan untuk bekerja dengan operasi CRUD dalam beberapa minit, tanpa satu baris kod menggunakan CLI, kami telah membincangkan perkara ini dengan lebih terperinci di sini dan di sini untuk perhubungan entiti. Teruskan mencuba, kekal kemas kini dengan amalan terbaik dan dialu-alukan untuk mencuba boilerplate ini jika anda rasa ia berguna.

Pasukan BC Boilerplates kami sentiasa mencari jalan untuk meningkatkan pembangunan. Kami ingin mendengar pendapat anda tentang perbincangan GitHub atau dalam ulasan di bawah.

Kredit penuh untuk artikel ini kepada Olena Vlasenko dan Vlad Shchepotin ??

Atas ialah kandungan terperinci Menguasai CRUD dengan NextJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!