next data hooks

Hooks-Data-Hooks ·

استخدم getStaticProps و getServerSideProps كخطافات رد فعل

next-data-hooks عبارة عن lib صغير وبسيط يتيح لك كتابة خطافات رد فعل لاستعلامات البيانات في Next.js عن طريق رفع الدعائم الثابتة في سياق رد الفعل.

 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 ; 

لماذا؟

1. إن كتابة استعلام كبير لكل صفحة لا ينظم بشكل جيد. تتيح لك أطراف البيانات غير المتزامنة مثل Apollo و Relay و React-Query بالفعل كتابة الاستعلامات أقرب إلى المكون. لماذا لا يمكن كتابة استعلامات البيانات الثابتة أقرب إلى المكون أيضًا؟
2. يعمل بشكل أفضل مع TypeScript - عند استيراد خطاف البيانات ، تقوم أيضًا باستيراد نوع الإرجاع الخاص به. عندما تتصل بالخطاف داخل المكون الخاص بك ، فإن الأنواع موجودة بالفعل.

ولم لا؟

الشيء الأساسي الذي تقدمه هذه المكتبة هو تنظيم نمط getStaticProps / getServerSideProps .

️ ملاحظة: لا يوفر أي قدرات أخرى من الفانيليا التالي.

انظر هذا السؤال: لماذا لا يتم تحديد خطاف البيانات؟

مثال

انظر المثال في هذا الريبو للحصول على بعض الأفكار حول كيفية تنظيم مكالمات البيانات الثابتة الخاصة بك باستخدام هذا الخطاف.

تثبيت

1. ثَبَّتَ

 npm i next-data-hooks

أو

 yarn add next-data-hooks

2. أضف البرنامج المساعد بابل

في الجذر ، أضف ملف .babelrc يحتوي على ما يلي:

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

️ لا تنس هذه الخطوة. يمكّن هذا التخلص من التعليمات البرمجية لإزالة رمز جانب الخادم في رمز العميل.

3. أضف الموفر إلى _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 >
  ) ;
} 

الاستخدام

1. إنشاء خطاف البيانات. يمكن أن يكون هذا في نفس الملف مثل المكون الذي تستخدمه فيه أو في أي مكان آخر.

 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؟

ملاحظة: بالنسبة لمستخدمي TpectScript ، إذا كنت تخطط فقط لاستخدام ربط البيانات في سياق 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 ;

2. استخدم خطاف البيانات في مكون. أضفه إلى دعامة ثابتة في صفيف مع خطاف بيانات أخرى لتكوينها لأسفل.

 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. تمرير خطافات البيانات لأسفل في 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 على نفس الشيء بواسطة مكون إضافي بابل يربح تعريف ربط البيانات الخاص بك مع 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. ثم قد يكون خطأ ما خطأ في القضاء على الكود. الرجاء فتح مشكلة.

ملحوظة . قد تكون هناك اختلافات في القضاء على الكود الافتراضي لـ NEXT.JS والقضاء على رمز next-data-hooks . تحقق مزدوج حزمة الخاص بك.