next data hooks

Дат-крючки ·

Используйте getStaticProps и getServerSideProps в качестве крючков React

next-data-hooks -это небольшая и простая LIB, которая позволяет писать крючки React для запросов данных в next.js, поднимая статические реквизиты в контекст 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 ;

Почему?

Написание одного большого запроса на страницу плохо организуется. Асинхронные структуры извлечения данных, такие как Apollo, Relay и React-Query, уже позволяют вам писать запросы ближе к компоненту. Почему статические запросы данных не могут быть записаны ближе к компоненту?
Лучше работает с TypeScript - когда вы импортируете крюк данных, вы также импортируете его тип возврата. Когда вы называете крючок внутри вашего компонента, типы уже существуют.

Почему нет?

Основная вещь, которую предлагает библиотека, - это образец организации getStaticProps / getServerSideProps .

️ Примечание: он не предлагает больше возможностей, чем Vanilla Next.js.

Смотрите этот вопрос: почему данные не параметризованы?

Пример

Посмотрите пример в этом репо для некоторых идей о том, как организовать ваши статические вызовы данных, используя этот крючок.

Установка

Установить

 npm i next-data-hooks

или

 yarn add next-data-hooks

Добавить плагин Babel

В корне добавьте файл .babelrc , который содержит следующее:

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

️ Не забывайте этот шаг. Это позволяет исключить код для устранения кода на стороне сервера в клиентском коде.

Добавить поставщика в _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 ;

Пользователь TypeScript?

Примечание. Для пользователей TypeScript, если вы планируете использовать только использование Data Hook в контексте getServerSideProps , вы можете импортировать предоставленную гвардию типа, 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 .

next-data-hooks делают то же самое под плагином Babel, который префиксирует ваше определение крючка данных с помощью typeof window !== 'undefined' ? <stub> : <real data hook> .

Это работает, потому что Next.js предварительно оценивает typeof window выражения к 'object' в браузерах. Это сделает вышеупомянутый тройной всегда оценивать <stub> в браузере. Затем Terser выталкивает выражение <real data hook> исключая его из пакета браузера.

Если вы видели ошибку Create data hook was run in the browser. Тогда что -то, возможно, пошло не так с устранением кода. Пожалуйста, откройте проблему.