Download next data hooks - Unduh Kode Sumber next data hooks

Next-Data-Hooks ·

Gunakan getStaticProps dan getServerSideProps sebagai react hooks

next-data-hooks adalah lib kecil dan sederhana yang memungkinkan Anda menulis kait bereaksi untuk kueri data di Next.js dengan mengangkat alat peraga statis ke dalam konteks React.

 import { createDataHook } from 'next-data-hooks' ;

const useBlogPost = createDataHook ( 'BlogPost' , async ( context ) => {
  const { slug } = context . params ;

  return ; // ... get the blog post
} ) ;

function BlogPost ( ) {
  const { title , content } = useBlogPost ( ) ;

  return (
    < >
      < h1 > { title } </ h1 >
      < p > { content } </ p >
    </ >
  ) ;
}

BlogPost . dataHooks = [ useBlogPost ] ;

export default BlogPost ;

Mengapa?

Menulis satu permintaan besar per halaman tidak berorganisasi dengan baik. Data asinkron membuat kerangka kerja seperti Apollo, Relay, dan React-Query sudah memungkinkan Anda untuk menulis kueri lebih dekat ke komponen. Mengapa kueri data statis tidak dapat ditulis lebih dekat ke komponen juga?
Bekerja lebih baik dengan TypeScript - saat Anda mengimpor pengait data, Anda juga mengimpor tipe pengembaliannya. Saat Anda memanggil kait di dalam komponen Anda, jenisnya sudah ada.

Mengapa tidak?

Hal utama yang ditawarkan perpustakaan ini adalah pola pengorganisasian getStaticProps / getServerSideProps .

️ Catatan: Itu tidak menawarkan kemampuan lebih dari vanilla Next.js.

Lihat pertanyaan ini: Mengapa kait data tidak diparameterisasi?

Contoh

Lihat contoh dalam repo ini untuk beberapa ide tentang cara mengatur panggilan data statis Anda menggunakan kait ini.

Instalasi

Memasang

 npm i next-data-hooks

atau

 yarn add next-data-hooks

Tambahkan plugin Babel

Pada root, tambahkan file .babelrc yang berisi berikut ini:

{
  "presets" : [ " next/babel " ],
  "plugins" : [ " next-data-hooks/babel " ]
}

️ Jangan lupa langkah ini. Ini memungkinkan eliminasi kode untuk menghilangkan kode sisi server dalam kode klien.

Tambahkan penyedia ke _app.tsx atau _app.js

 import { AppProps } from 'next/app' ;
import { NextDataHooksProvider } from 'next-data-hooks' ;

function App ( { Component , pageProps } : AppProps ) {
  const { children , ... rest } = pageProps ;

  return (
    < NextDataHooksProvider { ... rest } >
      < Component { ... rest } > { children } </ Component >
    </ NextDataHooksProvider >
  ) ;
}

Penggunaan

Buat pengait data. Ini bisa dalam file yang sama dengan komponen yang Anda gunakan di atau di mana pun.

 import { createDataHook } from 'next-data-hooks' ;

// this context is the GetStaticPropsContext from 'next'
//                                                      ?
const useBlogPost = createDataHook ( 'BlogPost' , async ( context ) => {
  const slug = context . params ?. slug as string ;

  // do something async to grab the data your component needs
  const blogPost = /* ... */ ;

  return blogPost ;
} ) ;

export default useBlogPost ;

Pengguna TypeScript?

Catatan: Untuk pengguna TypeScript, jika Anda berencana hanya menggunakan pengait data dalam konteks getServerSideProps , Anda dapat mengimpor tipe penjaga yang disediakan, isServerSidePropsContext , untuk mempersempit jenis konteks yang masuk.

 import { createDataHook , isServerSidePropsContext } from 'next-data-hooks' ;

const useServerSideData = createDataHook ( 'Data' , async ( context ) => {
  if ( ! isServerSidePropsContext ( context ) ) {
    throw new Error ( 'This data hook only works in getServerSideProps.' ) ;
  }

  // here, the type of `context` has been narrowed to the server side conext
  const query = context . req . query ;
} ) ;

export default useServerSideData ;

Gunakan pengait data dalam komponen. Tambahkan ke prop statis dalam array dengan pengait data lain untuk menyusunnya ke bawah.

 import ComponentThatUsesDataHooks from '..' ;
import useBlogPost from '..' ;
import useOtherDataHook from '..' ;

function BlogPostComponent ( ) {
  const { title , content } = useBlogPost ( ) ;
  const { other , data } = useOtherDataHook ( ) ;

  return (
    < article >
      < h1 > { title } </ h1 >
      < p > { content } </ p >
      < p >
        { other } { data }
      </ p >
    </ article >
  ) ;
}

// compose together other data hooks
BlogPostComponent . dataHooks = [
  ... ComponentThatUsesDataHooks . dataHooks ,
  useOtherDataHooks ,
  useBlogPost ,
] ;

export default BlogPostComponent ;

Lewati pengait data di getStaticProps atau getServerSideProps .

 import { getDataHooksProps } from 'next-data-hooks' ;
import { GetStaticPaths , GetStaticProps } from 'next' ;
import BlogPostComponent from '..' ;

export const getStaticPaths : GetStaticPaths = async ( context ) => {
  // return static paths...
} ;

// NOTE: this will also work with `getServerSideProps`
export const getStaticProps : GetStaticProps = async ( context ) => {
  const dataHooksProps = await getDataHooksProps ( {
    context ,
    // this is an array of all data hooks from the `dataHooks` static prop.
    //                             ???
    dataHooks : BlogPostComponent . dataHooks ,
  } ) ;

  return {
    props : {
      // spread the props required by next-data-hooks
      ... dataHooksProps ,

      // add additional props to Next.js here
    } ,
  } ;
} ;

export default BlogPostComponent ;

Pola yang berguna

Direktori `routes` terpisah

Next.js memiliki mekanisme perutean berbasis file yang sangat berpendapat yang tidak memungkinkan Anda untuk meletakkan file di folder /pages tanpa dianggap sebagai halaman.

Sederhananya, ini tidak memungkinkan banyak organisasi.

Dengan next-data-hooks , Anda dapat memperlakukan folder /pages sebagai folder titik masuk dan mengatur file di tempat lain.

 my-project
# think of the pages folder as entry points to your routes
├── pages
│   ├── blog
│   │   ├── [slug].ts
│   │   └── index.ts
│   └── shop
│       ├── category
│       │   └── [slug].ts
│       ├── index.ts
│       └── product
│           └── [slug].ts
|
# think of each route folder as its own app with it's own components and helpers
└── routes
    ├── blog
    │   ├── components
    │   │   ├── blog-index.tsx
    │   │   ├── blog-post-card.tsx
    │   │   └── blog-post.tsx
    │   └── helpers
    │       └── example-blog-helper.ts
    └── shop
        ├── components
        │   ├── category.tsx
        │   ├── product-description.tsx
        │   └── product.tsx
        └── helpers
            └── example-shop-helper.ts

`/routes/blog/components/blog-post.tsx`

 import { createDataHook } from 'next-data-hooks' ;

// write your data hook in a co-located place
const useBlogPostData = createDataHook ( 'BlogPost' , async ( context ) => {
  const blogPostData = // get blog post data…
  return blogPostData ;
} ) ;

function BlogPost ( ) {
  // use it in the component
  const { title , content } = useBlogPostData ( ) ;

  return (
    < article >
      < h1 > { title } </ h1 >
      < p > { content } </ p >
    </ article >
  ) ;
}

BlogPost . dataHooks = [ useBlogPostData ] ;

export default BlogPost ;

`/pages/blog/[slug].ts`

 import { GetStaticProps , GetStaticPaths } from 'next' ;
import { getDataHooksProps } from 'next-data-hooks' ;
import BlogPost from 'routes/blog/components/blog-post' ;

export const getStaticPaths : GetStaticPaths = { } ; /* ... */

export const getStaticProps : GetStaticProps = async ( context ) => {
  const dataHooksProps = getDataHooksProps ( {
    context ,
    dataHooks : BlogPost . dataHooks ,
  } ) ;
  return { props : dataHooksProps } ;
} ;

// re-export your component. this file is just an entry point
export default BlogPost ;

Catatan: Di atas hanyalah contoh bagaimana Anda dapat menggunakan next-data-hooks untuk mengatur proyek Anda. Takeaway utama adalah Anda dapat mengekspor kembali komponen halaman untuk mengubah struktur dan next-data-hooks bekerja dengan baik dengan pola ini.

Menyusun kait data

Setiap pengait data memperlihatkan metode getData yang merupakan fungsi yang Anda masuk ke createDataHook .

Ini dapat digunakan dalam kait data lain untuk menarik data yang sama:

 import { createDataHook } from 'next-data-hooks' ;

const useHook = createDataHook ( 'DataHook' , async ( context ) => {
  return ; // ...
} ) ;

export default useHook ;

 import useHook from './' ;

const useOtherHook = createDataHook ( 'Other' , async ( context ) => {
  const data = await useHook . getData ( context ) ;

  // use data to do something…
} ) ;

Catatan: Perlu diketahui bahwa metode ini menjalankan kembali fungsi.

Eliminasi kode

Untuk bundel yang lebih kecil, Next.js menghilangkan kode yang hanya dimaksudkan untuk berjalan di dalam getStaticProps .

next-data-hooks melakukan hal yang sama dengan plugin Babel yang mengawali definisi pengait data Anda dengan typeof window !== 'undefined' ? <stub> : <real data hook> .

Ini berfungsi karena Next.js pra-evaluasi typeof window ekspresi ke 'object' di browser. Ini akan membuat ternary di atas selalu mengevaluasi ke <stub> di browser. Terser kemudian mengguncang ekspresi <real data hook> yang menghilangkannya dari bundel browser.

Jika Anda melihat kesalahan Create data hook was run in the browser. Kemudian ada sesuatu yang salah dengan eliminasi kode. Harap buka masalah.