اگر با React Query (یا همان TanStack Query) کار کردهاید، احتمالاً با این مشکلات برخورد داشتهاید:
- Keyهای تکراری در بخشهای مختلف پروژه
- دردسر invalidate کردن دادهها
- رشتههای هاردکد شده در همه جا
- نبود Type Safety در پروژههای TypeScript
وقتی پروژه بزرگتر میشود، این دردسرها خودشان را نشان میدهند.
راهحل: Centralized Query Keys Pattern
بهجای تعریف keyها بهصورت پراکنده، همه را در یک منبع واحد و ساختارمند نگهدارید:
ts
حالا در کل پروژه از آن اینطور استفاده کنید:
ts
مزایای این روش
Single Source of Truth
همه keyها فقط در یک فایل تعریف میشوند. Refactor آسانتر، خطا کمتر، ذهن راحتتر.
Type Safety کامل
TypeScript بهصورت خودکار نوع دقیق key را تشخیص میدهد:
ts
Invalidation سلسلهمراتبی
میتوانید یک query خاص یا کل دسته را invalidate کنید:
ts
IntelliSense قوی در IDE
همه چیز پیشنهاد داده میشود و autocomplete به درستی کار میکند.
نمونه واقعی در پروژههای بزرگ
ts
نکات کلیدی
- همیشه از
as constاستفاده کنید تا typeها readonly باشند. - پارامترها را در تابع قرار دهید تا type inference درست عمل کند.
- ساختار سلسلهمراتبی طراحی کنید تا invalidate کردن گروهی سادهتر بشود.
جمعبندی
با الگوی Centralized Query Keys Pattern:
- تا ۹۰٪ باگهای Cache حذف میشوند
- TypeScript تجربه توسعه را لذتبخشتر میکند
- نگهداری پروژه خیلی تمیزتر و سادهتر میشود
اگر با React Query کار میکنید، این روش از آن چیزهایی است که یکبار یاد میگیرید و همیشه از خودتان تشکر میکنید.
اشتراکگذاری این مقاله
Darvix Team
توسعهدهنده و نویسنده مقالات فنی