کشف قدرت SWR: ساده‌سازی واکشی داده‌ها در React

هنگامی که من برای اولین بار کار بر روی برنامه های React مبتنی بر داده را شروع کردم، یکی از دغدغه های اصلی من مدیریت کارآمد واکشی داده ها بود. اطمینان از به روز بودن داده ها در حالی که به حداقل رساندن درخواست های شبکه کاری دلهره آور به نظر می رسید. SWR را وارد کنید، یک کتابخانه انقلابی واکشی داده برای React که نحوه مدیریت داده‌ها را در پروژه‌هایم تغییر داده است. بیایید بدانیم SWR چیست، چگونه کار می کند و چگونه می تواند نیازهای واکشی داده شما را ساده کند.

کتابخانه SWR چیست؟

SWR، مخفف Stale-While-Revalidate، یک کتابخانه واکشی داده برای React است که از استراتژی ابطال کش HTTP برای تازه نگه داشتن داده های شما استفاده می کند. استراتژی SWR به شرح زیر عمل می کند:

1. کهنه: داده ها را از حافظه پنهان برگردانید.
2. اعتبار مجدد: یک درخواست واکشی برای دریافت داده های به روز ارسال کنید.
3. به روز رسانی: آخرین داده ها را پس از واکشی برگردانید.

این رویکرد تضمین می کند که داده های نمایش داده شده به کاربران همیشه به روز هستند و در عین حال درخواست های اضافی شبکه را به حداقل می رساند.

مفاهیم کلیدی SWR

ذخیره سازی

SWR به طور خودکار داده‌های واکشی شده را در حافظه پنهان ذخیره می‌کند و به برنامه شما اجازه می‌دهد تا داده‌ها را به سرعت بدون درخواست شبکه اضافی ارائه کند. مدت زمان کش می تواند مبتنی بر زمان یا رویداد باشد (به عنوان مثال، اتصال مجدد به اینترنت)، که عملکرد مطلوب و اطلاعات به روز را تضمین می کند.

اعتبار سنجی مجدد

زمانی که داده‌های حافظه پنهان قدیمی می‌شوند، SWR آن‌ها را با واکشی مجدد از سرور تأیید می‌کند. اعتبار سنجی مجدد به طور خودکار فعال می شود:

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

نحوه استفاده از useSWR قلاب

را useSWR هوک قلاب اصلی است که توسط SWR برای واکشی داده ها ارائه شده است. در اینجا نحوه استفاده از آن آمده است:

مولفه های

• کلید: یک شناسه منحصر به فرد برای درخواست (به عنوان مثال، یک URL).
• واکشی: یک تابع غیر همگام که کلید را می پذیرد و داده ها را برمی گرداند. SWR هنگام بارگیری داده ها، کلید را به تابع fetcher می دهد.
• گزینه ها: یک شی از گزینه ها برای سفارشی کردن رفتار قلاب (به عنوان مثال، زمان کش).

شیء برگردانده شده

• داده ها: داده های بازگشتی از تابع fetcher (در ابتدا تعریف نشده است).
• خطا: خطای پرتاب شده توسط تابع fetcher (در ابتدا تعریف نشده است).
• در حال بارگذاری است: یک بولی که وضعیت بارگیری اولین درخواست را نشان می دهد.
• اعتبار سنجی است: یک بولی که وضعیت اعتبار سنجی هر درخواست را نشان می دهد.
• جهش پیدا کند: تابعی برای راه‌اندازی دستی اعتبار مجدد.

مثال استفاده

در اینجا یک مثال ساده از نحوه استفاده از آن آورده شده است useSWR قلاب در یک جزء React:

import useSWR from 'swr';

const fetcher = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function App() {
  const { data, error, isLoading, isValidating, mutate } = useSWR('/api/data', fetcher);

  if (isLoading) return div>Loading.../div>;
  if (error) return div>Error: {error.message}/div>;

  return (
    div>
      h1>Data/h1>
      pre>{JSON.stringify(data, null, 2)}/pre>
      button onClick={() => mutate()}>Refresh/button>
    /div>
  );
}

export default App;

چگونه از SWR در پروژه خود استفاده کردم

برای پروژه صدور گواهینامه Front End Libraries در freeCodeCamp، من SWR را برای مدیریت واکشی یکپارچه داده ها یکپارچه کردم. اگرچه پروژه با تایپ اسکریپت نوشته شده بود، برای سادگی، نمونه هایی را در جاوا اسکریپت ارائه می کنم.

نمونه پروژه

در اینجا یک مثال اساسی از استفاده از SWR با نقطه پایانی API آورده شده است:

import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function MyComponent() {
  const { data, error, isLoading } = useSWR('/api/my-data', fetcher);

  if (isLoading) return div>Loading.../div>;
  if (error) return div>Failed to load/div>;

  return (
    div>
      h1>My Data/h1>
      pre>{JSON.stringify(data, null, 2)}/pre>
    /div>
  );
}

export default MyComponent;

استفاده كردن SWRConfig برای پیکربندی جهانی

را SWRConfig کامپوننت در SWR یک ارائه‌دهنده زمینه است که به شما امکان می‌دهد پیکربندی‌های سراسری را برای همه قلاب‌های SWR در برنامه خود تنظیم کنید. با استفاده از SWRConfig، می‌توانید رفتارها و گزینه‌های پیش‌فرض را برای واکشی داده‌ها، ذخیره‌سازی حافظه پنهان و اعتبارسنجی مجدد تعریف کنید، که برای همه موارد اعمال می‌شود. useSWR مگر اینکه در سطح قلاب فردی نادیده گرفته شود.

نحوه استفاده SWRConfig

مرحله 1: واردات SWRConfig

ابتدا وارد کنید SWRConfig جزء از swr کتابخانه

import { SWRConfig } from 'swr';

مرحله 2: برنامه خود را با SWRConfig

برنامه خود (یا بخشی از آن) را با آن بپیچید SWRConfig ارائه دهنده. می توانید آن را در ریشه برنامه خود قرار دهید تا تنظیمات را به صورت جهانی اعمال کنید.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { SWRConfig } from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

ReactDOM.render(
  SWRConfig
    value={{
      fetcher,
      dedupingInterval: 2000,
      shouldRetryOnError: false,
      revalidateOnFocus: true,
      revalidateOnReconnect: true,
    }}
  >
    App />
  /SWRConfig>,
  document.getElementById('root')
);

مرحله 3: به تنظیمات جهانی دسترسی پیدا کنید useSWR قلاب

حالا همه useSWR قلاب در داخل SWRConfig متن از تنظیمات جهانی ارائه شده استفاده خواهد کرد.

import useSWR from 'swr';

function MyComponent() {
  const { data, error, isLoading } = useSWR('/api/my-data');

  if (isLoading) return div>Loading.../div>;
  if (error) return div>Failed to load/div>;

  return (
    div>
      h1>My Data/h1>
      pre>{JSON.stringify(data, null, 2)}/pre>
    /div>
  );
}

export default MyComponent;

گزینه های پیکربندی مثال

در اینجا برخی از گزینه های پیکربندی رایج وجود دارد که می توانید به آنها منتقل کنید SWRConfig:

• واکشی: عملکرد پیش‌فرض واکشی برای همه useSWR قلاب ها
• dedupingInterval: فاصله زمانی بر حسب میلی ثانیه برای کپی کردن درخواست ها. پیش فرض 2000 میلی ثانیه است.
• shouldRetryOnError: آیا به طور خودکار خطاها را دوباره امتحان کنید. پیش فرض است true.
• revalidateOnFocus: وقتی پنجره فوکوس می‌کند، دوباره اعتبارسنجی شود یا نه. پیش فرض است true.
• revalidateOnReconnect: زمانی که مرورگر دوباره اتصال شبکه را به دست آورد، دوباره اعتبارسنجی شود. پیش فرض است true.
• refreshInterval: فاصله بر حسب میلی ثانیه برای داده های نظرسنجی. پیش فرض است 0 (بدون نظرسنجی).

کاربرد پیشرفته: تودرتو SWRConfig

می توانید لانه کنید SWRConfig ارائه دهندگان برای اعمال تنظیمات مختلف در بخش های مختلف برنامه شما. مثلا:

import { SWRConfig } from 'swr';
import MyComponent from './MyComponent';
import AnotherComponent from './AnotherComponent';

const App = () => (
  SWRConfig value={{ fetcher: (url) => fetch(url).then((res) => res.json()) }}>
    MyComponent />
    SWRConfig value={{ fetcher: (url) => axios.get(url).then((res) => res.data) }}>
      AnotherComponent />
    /SWRConfig>
  /SWRConfig>
);

export default App;

در این مثال، MyComponent در حالی که از واکشی پیش فرض استفاده خواهد کرد AnotherComponent از یک استفاده خواهد کرد axiosواکشی مبتنی بر.

نتیجه

SWR واکشی داده در React را با ارائه کش خودکار، اعتبار سنجی مجدد و یک API ساده ساده می کند. این کمک می کند تا اطمینان حاصل شود که برنامه شما همیشه داده های به روز را نمایش می دهد در حالی که پیچیدگی مدیریت واکشی دستی داده ها را کاهش می دهد.

استفاده كردن SWRConfig به شما کمک می کند تا پیکربندی ها را برای تمام عملیات واکشی داده ها در برنامه React خود متمرکز و مدیریت کنید. این امر حفظ رفتارهای ثابت را آسان‌تر می‌کند و افزونگی را کاهش می‌دهد، به‌ویژه زمانی که با چندین مؤلفه واکشی داده سروکار داریم.

استفاده از SWR در پروژه‌هایم به طور قابل توجهی گردش کار من را بهبود بخشیده است و به من این امکان را می‌دهد که به جای مدیریت پیچیدگی‌های واکشی داده‌ها، روی ویژگی‌های ساختمان تمرکز کنم. چه بر روی یک پروژه کوچک یا یک برنامه کاربردی در مقیاس بزرگ کار می کنید، SWR می تواند به ساده سازی واکشی داده های شما کمک کند و برنامه شما را پاسخگو و به روز نگه دارد.