https://virgool.io/feed/@mehdisaamaani658 fa 2026-07-06 18:25:17 https://files.virgool.io/upload/users/274916/avatar/avatar.png?height=120&width=120 https://virgool.io/@mehdisaamaani658 https://virgool.io/@mehdisaamaani658/react-query-next-js-rkzpwhupctgv سلام خدمت همه دوستان اول اینکه همینجا اعلام کنم این پست یک پست کامل آموزشی نیست صرفا یک سولوشن هست برای استفاده از 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 اسفتاده کنید تا روش کار با این ابزار رو هم یاد بگیرید خیلی بدرد میخوره قطعا بی ایراد نیست نوشته ها من از مثال های آماده استفاده کردم که در وقت صرفه جویی بشه اگر انتقاد داشتید در خدمتم mehdi saamaani mehdi saamaani Tue, 23 Jan 2024 13:09:23 +0330 https://virgool.io/@mehdisaamaani658/ref-oh6prwxr0vlt اصلا مورد استفاده های ref چی هست؟؟ ما برای دسترسی به المنت های HTML از روش های مختلفی استفاده میکنیم مثلا میخوایم به value یک اینپوت دسترسی پیدا کنیمنوشتن دستورات HTML در REACT این مدل کد نوشتن مانند تصویر بالا کار درستی نیست و سرعت React رو پایین میاره پس چاره چیه وقتی میخوایم به المنت ها دسترسی مستقیم داشته باشیم؟ در کل ()Ref یک راه برای دسترسی به المنت ها بصورت مستقیم هست جایی که بدون استفاده از props میخوایی به مقدار المنت فرزند دسترسی داشته باشیساده ترین مثالش اینه وقتی وارد صفحه میشیم روی اینپوت فوکوس بشه یا مثلا وقتی وارد فلان روت شدیم یک باتن اجرا بشه استفاده بیش از حد Ref ممنوع نباید برای هرچیزی از Ref استفاده کنی در نظر بگیر برای بازو بسته شدن یک مودال باید برای اون یک isOpen یا isClose ایجاد کنی نه از Ref استفاده کنیمرحله اول تعریف Ref البته این توی کلاس کامپوننت هست توی Functional هم از هوک ()useRef میتونی استفاده کنیمرحله دوم استفاده ای هست که از المنت میخوایی داشته باشی اینجا گفته فوکوس انجام بشه خووووب دقت کن در مرحله سوم 2 تا کار انجام میدی طبق این مثال اول اینکه باید مقدار {something}=ref رو بنویسی که react بفهمه دقیقا توی کدوم المنت قراره به references اون دسترسی پیدا کنی و دوم اینکه مقدار رو تعریف کنی که بدونه بعد از کلیک references کدوم المنت قراره تغیر کنهبرای خسته کننده نشدن این مقاله قسمت بعد رو اختصاص میدیم به forwardRef mehdi saamaani mehdi saamaani Tue, 06 Sep 2022 15:38:34 +0430