next data hooks下載 - next data hooks源代碼下載

隔壁鉤·

將getStaticProps和getServerSideProps用作React Hooks

next-data-hooks是一個小而簡單的LIB，可以通過將靜態道具提升到React上下文中，使您可以在Next.js中為數據查詢編寫React Hooks。

 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 ;

為什麼？

每頁寫一個大查詢不是很好。異步數據獲取框架（例如Apollo，React-Query）已經允許您將查詢更靠近組件編寫。為什麼不能將靜態數據查詢也靠近組件寫？
與TypeScript更好地工作 - 導入數據掛鉤時，您還將導入其返回類型。當您調用組件內的鉤子時，類型已經存在。

為什麼不呢？

該庫提供的主要內容是組織getStaticProps / getServerSideProps模式。

配x注意：它沒有比Next.js的Vanilla的功能更多的功能。

看到此問題：為什麼數據掛鉤沒有參數化？

例子

有關如何使用此掛鉤組織靜態數據調用的一些想法，請參見此存儲庫中的示例。

安裝

安裝

 npm i next-data-hooks

或者

 yarn add next-data-hooks

添加Babel插件

在根上，添加一個.babelrc文件，其中包含以下內容：

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

配x不要忘記這一步。這使取消代碼可以消除客戶端代碼中的服務器端代碼。

將提供商添加到_app.tsx或_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 >
  ) ;
}

用法

創建一個數據鉤。這可以與您在其他任何地方使用的組件相同的文件中。

 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 ;

打字稿用戶？

注意：對於打字稿用戶，如果您只打算在getServerSideProps的上下文中使用數據掛鉤，則可以導入提供的類型huber， isServerSidePropsContext ，以縮小傳入上下文的類型。

 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 ;

使用組件中的數據鉤。將其添加到帶有其他數據鉤的數組中的靜態道具中，以向下構圖。

 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 ;

將數據掛在getStaticProps或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 ;

有用的模式

單獨的`routes`目錄

Next.js具有一個非常自明的基於文件的路由機制，不允許您將文件放入/pages文件夾中，而無需將其視為頁面。

簡而言之，這不允許太多組織。

使用next-data-hooks ，您可以將/pages文件夾視為入口點文件夾，並在其他地方組織文件。

 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 ;

注意：以上只是如何使用next-data-hooks組織項目的一個示例。主要要點是，您可以重新脫離頁面組件來更改結構，並且next-data-hooks與此模式效果很好。

組成數據鉤

每個數據掛鉤都會公開一個getData方法，該方法僅僅是您傳遞到createDataHook中的函數。

這可以在其他數據鉤中使用以獲取相同的數據：

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

注意：請注意，此方法重新運行該功能。

消除代碼

對於較小的捆綁包，Next.js消除了僅在getStaticProps中運行的代碼。

Babel插件的next-data-hooks將您的數據掛鉤定義帶有typeof window !== 'undefined' ? <stub> : <real data hook> 。

這是因為Next.js預先評估瀏覽器中'object'的表達式typeof window 。這將使上述三元始終對瀏覽器中的<stub>進行評估。然後，Terser搖動<real data hook>表達式從瀏覽器束中消除它。

如果您看到錯誤Create data hook was run in the browser.然後，消除代碼可能出了問題。請打開一個問題。

筆記。 Next.js的默認代碼消除和next-data-hooks代碼消除可能存在差異。仔細檢查您的捆綁包。

展開

next data hooks

隔壁鉤·

為什麼？

為什麼不呢？

例子

安裝

用法

有用的模式

單獨的`routes`目錄

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

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

組成數據鉤

消除代碼

MMEarth data

EMIT Data Resources

LLaVA NeXT

世外桃源下一步

生物資料探勘

智慧資料恢復

chat.petals.dev

GPT Prompt Templates

GPTyped

ML stack

awesome free chatgpt

pywin_contextmenu

Google Dorks

shepherd

mongo express

next data hooks

隔壁鉤·

為什麼？

為什麼不呢？

例子

安裝

用法

有用的模式

單獨的routes目錄

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

/pages/blog/[slug].ts

組成數據鉤

消除代碼

單獨的`routes`目錄

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

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