next data hooks

Próxtos gancos de dados ·

Use getStaticProps e getServerSideProps como ganchos React

next-data-hooks é um LIB pequeno e simples que permite escrever ganchos de reação para consultas de dados no próximo.js, levantando adereços estáticos no contexto do 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 ; 

Por que?

1. Escrever uma consulta grande por página não se organiza bem. Estruturas de dados de dados assíncronos como Apollo, Relay e React-Query já permitem que você escreva as consultas mais próximas do componente. Por que as consultas de dados estáticas também não podem ser escritas mais próximas do componente?
2. Funciona melhor com o TypeScript - quando você importa um gancho de dados, também está importando seu tipo de retorno. Quando você chama o gancho dentro do seu componente, os tipos já estão lá.

Por que não?

A principal coisa que essa biblioteca oferece é um padrão que organiza getStaticProps / getServerSideProps .

️ Nota: Ele não oferece mais recursos do que a baunilha a seguir.js.

Veja esta pergunta: por que os ganchos de dados não são parametrizados?

Exemplo

Veja o exemplo neste repositório para obter algumas idéias sobre como organizar suas chamadas de dados estáticos usando esse gancho.

Instalação

1. Instalar

 npm i next-data-hooks

ou

 yarn add next-data-hooks

2. Adicione o plugin babel

Na raiz, adicione um arquivo .babelrc que contém o seguinte:

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

️ Não se esqueça desta etapa. Isso permite a eliminação do código para eliminar o código do lado do servidor no código do cliente.

3. Adicione o provedor a _app.tsx ou _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 >
  ) ;
} 

Uso

1. Crie um gancho de dados. Isso pode estar no mesmo arquivo que o componente que você está usando ou em qualquer outro lugar.

 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 ;

Usuário da TypeScript?

NOTA: Para usuários do TypeScript, se você planeja usar apenas o gancho de dados no contexto do getServerSideProps , pode importar o tipo de guarda fornecido, isServerSidePropsContext , para restringir o tipo de contexto de entrada.

 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 ;

2. Use o gancho de dados em um componente. Adicione -o a um suporte estático em uma matriz com outros ganchos de dados para compõem -os para baixo.

 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 ;

3. Passe os dados de dados no getStaticProps ou 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 ; 

Padrões úteis

Um diretório routes separado

Next.js possui um mecanismo de roteamento baseado em arquivos muito opinativo que não permite que você coloque um arquivo na pasta /pages sem que ele seja considerado uma página.

Simplificando, isso não permite muita organização.

Com next-data-hooks , você pode tratar a pasta /pages como uma pasta de pontos de entrada e organizar arquivos em outros lugares.

 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 ;

NOTA: O exposto acima é apenas um exemplo de como você pode usar next-data-hooks para organizar seu projeto. O principal argumento é que você pode reexportar os componentes da página para alterar a estrutura e next-data-hooks funcionam bem com esse padrão.

Compondo ganchos de dados

Cada gancho de dados expõe um método getData , que é simplesmente a função que você passa para createDataHook .

Isso pode ser usado em outros ganchos de dados para extrair os mesmos dados:

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

NOTA: Esteja ciente de que esse método reencontra a função.

Eliminação de código

Para pacotes menores, o Next.js elimina o código que se destina apenas a ser executado dentro getStaticProps .

next-data-hooks são o mesmo por um plug-in Babel que prefixa sua definição de gancho de dados com typeof window !== 'undefined' ? <stub> : <real data hook> .

Isso funciona porque o próximo.js pré-avalia o typeof window de 'object' nos navegadores. Isso fará com que o ternário acima sempre se avalie com o <stub> no navegador. TERSER então sacode a expressão <real data hook> eliminando -a do pacote do navegador.

Se você viu o erro Create data hook was run in the browser. Então algo pode ter dado errado com a eliminação do código. Por favor, abra um problema.

Observação . Pode haver diferenças na eliminação de código padrão do Next.JS e eliminação de código next-data-hooks . Verifique duas vezes seu pacote.