نحوه کاهش تماس های HTTP از 15 خط به 2 خط با استفاده از React SWR – DEV Community

برای خواندن مقالات بیشتر از این قبیل به وبلاگ من مراجعه کنید

اگر یک توسعه دهنده React هستید، حتما آرزوی داشتن کتابخانه ای برای مدیریت تمام تماس های API را داشته اید.

من در مورد آن صحبت نمی کنم fetch یا Axios. به جای یک کتابخانه برای مدیریت تمام وضعیت بارگذاری، واکشی اولیه، ذخیره سازی، صفحه بندی، اعتبارسنجی و غیره.

خوب من یک خبر خوب برای شما دارم. امروز بسته ای به نام SWR را بررسی می کنیم. که خود را به عنوان React Hooks for Data Fetching .

بیایید ببینیم این کتابخانه چگونه می تواند برای ما انجام دهد و چه زمانی می توانیم از آن استفاده کنیم.

مرحله 1: Dependency را نصب کنید

فقط با تایپ کردن می توانید آن را نصب کنید

yarn add swr

مرحله 2: یک تابع Fetcher ایجاد کنید

شما می توانید از انواع توابع واکشی چه REST و چه GraphQL استفاده کنید.

یک تابع fetcher فقط می تواند یک پوشش در اطراف تابع واکشی بومی باشد. در صورت تمایل می توانید از axios استفاده کنید

غیر معمول fetcher تابع واکشی API برای نقاط پایانی REST می تواند باشد

const fetcher = (...args) => fetch(...args).then(res => res.json())

اگر شما می خواهید Axios سپس می تواند باشد

const fetcher = url => axios.get(url).then(res => res.data)

مرحله 3: زمان استفاده از SWR

بیایید از جادو استفاده کنیم useSWR قلاب داخل جزء ما

import useSWR from 'swr'

function ProductDetails () {
  const { data } = useSWR('/api/product/123', fetcher)

  return <div>hello {data.name}!</div>
}

این useSWR هوک 2 آرگومان می گیرد. یکی کلید است (در مورد ما این است /api/product/123 ) و دومی الف است fetcher تابع.

کاری که این قلاب انجام می دهد این است که جزئیات محصول را در داخل داده ها برمی گرداند. اما حالا شما تعجب می کنید که چقدر مفید است زیرا ما می توانیم همین کار را فقط با تماس انجام دهیم axios یا fetch مستقیماً در داخل قطعه

خوب، اجازه دهید آن را به شما نشان دهم.

مرحله 4: چگونه می تواند کد را کاهش دهد؟

در یک برنامه معمولی، ما معمولاً تماس های API خود را مانند زیر انجام می دهیم. جایی که ما به طور کلی به 3 چیز اهمیت می دهیم. واقعی data، loading ایالت، و error اگر وجود دارد.

قبل از

const URL = '----'

function ProuctDetails () {

  const [loading , setLoading] = useState(false)
  const [data , setData] = useState(null)
  const [error , setError] = useState(null)

  useEffect(() => {
    try{
      setLoading(true);  // setting the loading true
      const response = fetch(URL)
      .then(response => response.json())
      .then(data => {
        setData(data)     // setting the data
        setLoading(false) // data fetching is complete
      });
    }catch(e){
      setError(e)         // setting the error
    }
  },[])

  return <div>{`the details is ${data.toString()}`}</div>
}

اما با کمک useSWR قلاب چیزی که ما فقط می توانیم انجام دهیم این است

بعد از

function ProductDetails () {
  const { data , error } = useSWR('/api/product/123', fetcher)
  const loading = !error && !data

  return <div> {`product details is ${data.toString}`}!</div>
}

بنابراین ما توانستیم کد را تا حد زیادی کاهش دهیم! که عالی است!

مرحله 5: مدیریت خطای جهانی

اگر باهوش نباشید، رسیدگی به خطاهای API در هر برنامه ای می تواند کار دردناکی باشد. SWR دارای یک ویژگی بسیار خوب است که شما را تحت پوشش قرار می دهد و دردسرهای بیشتری را کاهش می دهد!

یک زمینه به نام صادر می کند SWRConfig که می تواند برخی از کنترل های جهانی را بر روی همه قلاب ها فراهم کند. در مثال زیر یک تابع واکشی مشترک برای همه هوک ها تعریف کرده ایم و همچنین کنترل کننده خطای جهانی را اضافه کرده ایم.

import useSWR, { SWRConfig } from 'swr'

function ProductsComponent () {
  const { data: products } = useSWR('/api/products') // we don't need to pass fetcher here

  //...
}

function App () {
  return (
    <SWRConfig 
      value={{
        onError: (error, key) => {
          if (error.status !== 403 && error.status !== 404) {
            // we can show a notification here or log the error
          }
        }
        fetcher: (resource, init) => fetch(resource, init).then(res => res.json()) // common fetcher function
      }}
    >
      <ProductsComponent />
    </SWRConfig>
  )
}

بنابراین اکنون دیگر لازم نیست در هر جایی که از آن استفاده می کنید، خطاها را مدیریت کنید useSWR . زمانی که شروع به استفاده از آن می کنید بسیار قدرتمند و مفید است.

مرحله 6: داده ها را از قبل پر کنید

اگر می خواهید صفحه را فوراً با ارائه داده های پیش فرض تعاملی کنید SWR نیز این گزینه را دارد.

هنگامی که قلاب useSWR داده‌ها را در پس‌زمینه واکشی می‌کند و پس از اتمام بارگیری داده‌ها، داده‌های به‌روز شده را نمایش می‌دهد، می‌توانید برخی از داده‌های از قبل موجود (از حافظه پنهان یا جای دیگر) ارائه دهید.

useSWR('/api/data', fetcher, { fallbackData: prefetchedData })

در اینجا ما را تعریف می کنیم fallbackdata دارایی به عنوان داده های از پیش پر شده این تکنیک به ویژه در هنگام استفاده مفید است NextJS و تولید برخی داده ها در داخل getStaticProps. همه چیز در این روش فوق العاده سریع می شود.

مرحله 7: جهش

یکی از محدودیت های SWR این است که جهش را مستقیماً پشتیبانی نمی کند. با این حال، ما می توانیم با استفاده از یک تابع مفید به نام به چیزی مشابه دست پیدا کنیم mutate .

کاری که جهش انجام می دهد این است که توانایی فراخوانی دستی API را می دهد. به عنوان مثال وقتی می خواهید فرم یا چیزی را ارسال کنید.

import useSWR, { useSWRConfig } from 'swr'

function CreateBlogComponent () {
  const { mutate } = useSWRConfig()

  const createNewBlog = () => {
     mutate('/api/blog')
  }

  return (
    <div>
      <button onClick={createNewBlog}>
        Create Blog
      </button>
    </div>
  )
}

این باعث می شود هر تماس API بسیار متمرکز باشد که به تمیز نگه داشتن برنامه کمک می کند.

چه زمانی باید از آن استفاده کرد؟

من اصول اولیه این کتابخانه قدرتمند را نشان داده ام. شما می توانید با آن راه طولانی را طی کنید. ویژگی های بیشتری مانند حافظه پنهان، جهش و غیره وجود دارد. و می تواند 95 درصد موارد استفاده شما را به خوبی پوشش دهد.

با این حال، جایگزین اصلی برای SWR واکنش واکنشی است که ویژگی های بیشتری نسبت به SWR ارائه می دهد.

من توصیه می کنم با react-query بروید زیرا همه سناریوهای ممکن را پوشش می دهد. اما یک نقطه ضعف دارد. اندازه باندل react-query در مقایسه با SWR تقریباً 3 برابر است. که بسیار قابل توجه است

بنابراین اگر در حال ساخت یک برنامه کوچک هستید و به ویژگی های پیچیده زیادی نیاز ندارید، باید از SWR استفاده کنید. برای هر سناریوی دیگری، من توصیه می کنم با react-query بروید.

برای امروز همین است. روز خوبی داشته باشی!

از طریق لینکدین یا وب سایت شخصی با من در تماس باشید