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`