ابـراهــیم
ابـراهــیم
خواندن ۱ دقیقه·۲ سال پیش

هوک ()useSWR در Nextjs

هوک ()useSWR در Nextjs
هوک ()useSWR در Nextjs


سلام

تابع ()useSWR توسط تیم توسعه دهنده Nextjs برای مدیریت بهتر حالت های مختلف واکشی داده ایجاد شده و به شدت توصیه می کنن (روی این قسمتش خیلی تاکید دارن) که برای واکشی داده ازش استفاده کنید.


این تابع به صورت پیش فرض درون پکیج Nextjs وجود نداره و برای استفاده ازش، باید پکیج مورد نظرش رو نصب کنیم:

npm

npm i swr

yarn

yarn add swr


این تابع دو پارامتر دریافت می کنه:

  • پارامتر key: آدرس مسیر دیتای مورد نظر
  • پارامترfetcher: تابعی که قراره باهاش داده ها رو واکشی کنیم. (حواستون باشه وقتی تابع رو به عنوان آرگومان قرار میدید، فراخونی اش نکنید)


این تابع یک آبجکت رو به عنوان خروجی بر می گردونه که درونش دو خصوصیت کاربردی زیر وجود داره:

  • خصوصیت data: مقدار برگشتی درون این خصوصیت ذخیره میشه
  • خصوصیت error: اگر درخواست با مشکل مواجه بشه، این خصوصیت مقدار دهی میشه


نحوه استفاده

در این مثال از پکیج های axios و json-server استفاده شده
در این مثال از پکیج های axios و json-server استفاده شده


در این جا تابع ()useSWR رو فراخوانی کردیم و خصوصیت های data و error رو با استفاده از object destructuring از این تابع بیرون کشیدیم.


اگر با خطا مواجه بشیم، خصوصیت error مقداردهی و درون صفحه نمایش داده میشه:


تا زمانی که اطلاعات دریافت نشده، متن Loading به نمایش درمیاد. زمانی هم که اطلاعات دریافت بشه، خصوصیت data مقدار دهی میشه و اطلاعات درون صفحه به نمایش در میاد:


اینم تصویر دیتای مورد نظرمون:


از اونجایی که این تابع دارای قابلیت های زیاد دیگه ای مثل caching، اعتبار سنجی و... هم هست، براش پکیج و داکیومنت جداگانه در نظر گرفتن.


منبع

request time

nextjsuseswrhook
ساده بگیر ولی دستِ کم نگیر
شاید از این پست‌ها خوشتان بیاید