TANStack Query: چگونه روش جستجوی API های شما را تغییر می دهد

در دنیای امروزی توسعه وب، پرس و جو از APIها به یک وظیفه رایج برای توسعه دهندگان تبدیل شده است. با این حال، فرآیند ایجاد درخواست‌های HTTP، رسیدگی به پاسخ‌ها و برخورد با قالب‌بندی داده‌ها می‌تواند دشوار و مستعد خطا باشد. اینجاست که TANStack Query وارد عمل می شود.

TANStack Query یک کتابخانه جاوا اسکریپت سبک است که یک API ساده و شهودی را برای جستجو در APIها در اختیار توسعه دهندگان قرار می دهد. این برنامه مبتنی بر Fetch API است و به توسعه‌دهندگان اجازه می‌دهد تا کد مختصر و مشخصی برای درخواست‌های HTTP و رسیدگی به پاسخ‌ها بنویسند. در این مقاله نحوه عملکرد TANStack Query، نحوه تغییر فرآیند جستجوی API و مزایایی که ارائه می دهد، بحث خواهد شد.

پرس و جو TANStack چگونه کار می کند:

TANStack Query ابتدا با بررسی کش کوئری کار می کند [2] برای تعیین اینکه آیا داده ها قبلاً واکشی شده اند یا خیر. اگر داده‌ها در حافظه پنهان نیستند، یا اگر داده‌های ذخیره‌شده در حافظه پنهان قدیمی هستند، TANStack Query یک درخواست HTTP را به نقطه پایانی API ارسال می‌کند. [3] برای بازیابی داده ها، که سپس در حافظه پنهان ذخیره می شود [2]. در نهایت، TANStack Query داده ها را از حافظه پنهان به کاربر برمی گرداند [5].

در مقایسه با واکشی سنتی HTTP، TANStack Query چندین مزیت را ارائه می دهد. این نیاز به مدیریت حالت در سطح مؤلفه و تکرار کد را کاهش می دهد. TANStack Query با حذف پیچیدگی درخواست‌های HTTP و مدیریت پاسخ، فرآیند جستجوی APIها و مدیریت داده‌ها را در برنامه‌های React ساده می‌کند. علاوه بر این، با کش کردن نتایج پرس و جو، TANStack Query ترافیک شبکه را کاهش می دهد و عملکرد برنامه را بهبود می بخشد.

برای شروع استفاده از TANStack Query در پروژه خود، باید آن را مقداردهی اولیه کنید. این شامل تنظیم پرس و جو در شما است app.jsx فایل. در اینجا مراحلی وجود دارد که می توانید دنبال کنید:

• با استفاده از کد زیر اجزای لازم را از کتابخانه TANStack Query وارد کنید:

import {
    QueryClient,
    QueryClientProvider,
    useQuery,
  } from '@tanstack/react-query'

یک نمونه جدید از شی QueryClient ایجاد کنید که برای مدیریت کش کوئری استفاده می شود:

const queryClient = new QueryClient()

جزء برنامه خود را در یک جزء QueryClientProvider قرار دهید، که نمونه QueryClient را برای همه مؤلفه‌های فرزند فراهم می‌کند:

export default function App() {
    return (
      <QueryClientProvider client={queryClient}>
        <Example />
      </QueryClientProvider>
    )
  }

• اکنون می توانید از useQuery برای ایجاد درخواست های HTTP و رسیدگی به پاسخ ها قلاب کنید.

به عنوان مثال، فرض کنید می خواهیم لیستی از کاربران را از یک API دریافت کنیم. در اینجا نحوه استفاده از آن آمده است useQueryقلاب :

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export default function Users() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => await axios.get("https://dummyjson.com/users"),
  });

  console.log(data.data.users);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.data.users.map((user) => (
        <li key={user.id} style={{ color: "black" }}>
          {user.firstName}
        </li>
      ))}
    </ul>
  );
}

این کد یک درخواست برای واکشی داده از [https://dummyjson.com/users](https://dummyjson.com/users) نقطه پایانی کاربران این useQuery hook یک شی را با سه ویژگی برمی گرداند: data، error، و isLoading. این data ویژگی حاوی داده های پاسخ است، error شامل هر گونه خطایی است که در طول درخواست رخ داده است، و isLoading یک بولی است که نشان می دهد آیا درخواست هنوز در حال بارگیری است یا خیر.

واکشی داده های اعلامی

TANStack Query همچنین امکان واکشی داده‌های اعلامی را فراهم می‌کند که فرآیند مدیریت داده‌ها را در یک برنامه React ساده می‌کند. با TANStack Query، داده ها را می توان در یک مکان متمرکز واکشی و کش کرد و نیاز به مدیریت حالت در سطح مؤلفه و تکرار کد را کاهش داد.

این useQueryاز hook می توان برای تعریف یک پرس و جو و برگرداندن یک شی پرس و جو استفاده کرد که می تواند در چندین مؤلفه استفاده شود. این useQueryهوک یک کلید پرس و جو را می پذیرد queryKey ، که رشته ای است که به طور منحصر به فرد پرس و جو را شناسایی می کند. از کلید پرس و جو می توان برای بازیابی شی پرس و جو از حافظه پنهان استفاده کرد.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export default function Users() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => await axios.get("https://dummyjson.com/users"),
  });

  console.log(data.data.users);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.data.users.map((user) => (
        <li key={user.id} style={{ color: "black" }}>
          {user.firstName}
        </li>
      ))}
    </ul>
  );
}
}

function Posts() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn:()=> axios.get('https://dummyjson.com/posts')
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

TANStack Query فرآیند جستجوی APIها و مدیریت داده ها در برنامه های React را ساده می کند. TANStack Query با API اعلانی و سیستم مدیریت حالت متمرکز خود به توسعه دهندگان اجازه می دهد تا کد مختصر و شهودی برای مدیریت واکشی و ذخیره داده ها بنویسند. TANStack Query با حذف پیچیدگی درخواست‌های HTTP و رسیدگی به پاسخ‌ها، به توسعه‌دهندگان اجازه می‌دهد تا روی ایجاد تجربه‌های کاربری عالی تمرکز کنند.

React Query نیز نیاز به را برطرف می کند useStateو useEffectقلاب کنید و آنها را با چند خط منطق React Query جایگزین کنید.

اگر علاقه مند به کسب اطلاعات بیشتر هستید، فراموش نکنید که مستندات React Query را بررسی کنید