سلام خدمت همه دوستان اول اینکه همینجا اعلام کنم این پست یک پست کامل آموزشی نیست صرفا یک سولوشن هست برای استفاده از react-query که اگر توی پروژه ازش استفاده میکنید به کارتون میاد.
اول از همه لازم هست که قدم قدم پیش بریم ما برای این که بخوایم از react-query استفاده کنیم لازم هست
توی app.js تغیراتی ایجاد کنیم که در ادامه توضیح میدم
اولیش QueryClient : از این متد برای تبادل با حافظه برنامه مون استفاده میکنیم
و از QueryClientProvider برای اتصال بین QueryClient و برنامه استفاده میشود
از این دو موردی که گفتم کافیه کد زیر رو ببینید و متوجه میشید این دومورد رو ما فقط ۱ بار درpages اصلی پروژه ایجاد میکنیم
میتونیم برای داشتن یک استرکچر جدید از Hook استفاده کنیم
نوشتن یک ساختار برای یک پروژه کاملا سلیقه ای هست ( البته بر اساس یک سری قواعد کلی ) ولی در این آموزش روش زیر پیشنهاد میشه میتونیم یک هوک برای پروژه داشته باشیم
example-hook.js file :
قبل از هرچیزی لازم هست که یک توضیح کوتاتهی در باره useMutation بدم بهطور کلی این تابع که توی React-query وجود داره یک تابع asynchronous هست و این ناهمزمانی اول اینکه از react 16 به بعد قابل استفاده هست دوم اینکه همونطوری که میبینید برای اضافه کردن / حذف کردن / آپدیت کردن کار برد داره و باید به این دقت کنید که استفاده از هر تابع باید سر جای خودش باشه توی نمونه بالا کاملا وظیفه useMutation مشخص هست. اگر یکم دقت کنید ما برای متد های get از useMutation استفاده نکردیم
example-service.js file:
منطقا باید از اول این مرحله اجرا بشه ولی همیشه برای یاد گیری روش خوبی هست که اول با مشکل بزرگ تر رو روبه رو بشید :) حالا گذشته از این حرف ها توی تصویر بالا میبینید که یک سری متد نوشته شده که کاملا مشخص هست بابت نوع متد ها که هر کدوم چه کاری داره انجام میده نکته مهم اینه که ببینید توی قسمت قبلی ( مرحله بالا تر ) میشه الان کامل فهمید که از این متد های service API ها چطوری استفاده شده
نکته : این موارد کدی که توی تصویر میبینید صرفا یک مثال هست برای درک بهتر جزئیات react-query. اول اینکه به این نکته دقت داشته باشید که از https://tanstack.com/ میتونید استفاده کنید و همینطور بابت مثال هایی که زده شد مثلا post-id لازم هست که دیتارو به صورت پویا وارد کنید البته قطعا خودتون میدونید این ها رو :)
استفاده از useAllPosts
از الان تا آخرین روزی که پروژه رو تحویل میدی میتونی با خیال راحت از API های کنترل شده استفاده کنی
فکر نمیکنم نیازی به توضیح باشه فقط قبل از هر کاری با console.log مراحل رو قدم به قدم برم جلو تا ببینی مقدار هوک useAllPost اصلا چی هست
این هم یک مثال دیگه هست برای استفاده از یکی دیگه از کد ها با postId
باز هم تاکید میکنم این چون بر اساس یکسری دیتا های فیک هست لازم هست که در پروژه واقعی دقت داشته باشید که مثلا در همین کد توی فایل های قبلی نیاز هست که id پاس داده بشه
یک مثال هم در باره post باهم میبینیم که روش کارش رو به صورت متفاوت ببینیم
شاید یکی از دلایلی که عکس گذاشتم این هست که به اجبار کد رو بنویسیم و دلیلش هم این هست که به ارور بخوریم و سعی کنیم ارور رو برطرف کنیم پیشنهاد دیگه این که لطفا از tanstack-query استفاده کنید و همین طور اول متن هم گفتم از react-devtools اسفتاده کنید تا روش کار با این ابزار رو هم یاد بگیرید خیلی بدرد میخوره
قطعا بی ایراد نیست نوشته ها من از مثال های آماده استفاده کردم که در وقت صرفه جویی بشه اگر انتقاد داشتید در خدمتم
