TanStackIntermediate
Query Keys — Cache-র ঠিকানা
Hierarchical query keys, invalidation ও কীভাবে key-এ params রাখা হয় — বাংলায়।
9টি অংশবাংলা ভাষায়
TanStack Query প্রতিটি query-কে তার queryKey দিয়ে চেনে। একই key = একই cache entry। key-এ params (page, search, filter) রাখা হলে সেগুলো আলাদা আলাদা cache হয়ে থাকে।
Hierarchical keys কেন
src/lib/query-keys.tsts
ts
export const productKeys = {
all: ["products"] as const,
// list-এর সব variant
lists: () => [...productKeys.all, "list"] as const,
// নির্দিষ্ট list (params সহ)
list: (params: ProductQueryParams) =>
[...productKeys.lists(), params] as const,
// detail-এর সব
details: () => [...productKeys.all, "detail"] as const,
// নির্দিষ্ট detail
detail: (id: string) => [...productKeys.details(), id] as const,
};এভাবে প্যারেন্ট ইনভালিডেশন
এই hierarchy-র সুবিধা — উপরের key ইনভালিড করলে নিচের সব cache আবার চালু হয়:
Invalidation patternts
ts
// সব products query invalid
queryClient.invalidateQueries({ queryKey: productKeys.all });
// শুধু list queries
queryClient.invalidateQueries({ queryKey: productKeys.lists() });
// শুধু একটা detail
queryClient.invalidateQueries({ queryKey: productKeys.detail("p1") });key-এ object থাকলে
params object key-এ থাকলে deterministic হতে হবে — property order বদলালেও যেন same key হয়। সাধারণত object-টাই ঠিকঠাক work করে, কিন্তু ফাংশন-ধরনের ভ্যালু ever key-তে দেবেন না।
key ফাংশন নয়
Query keys সিরিয়ালাইজেবল হতে হবে — string, number, boolean, null, array, plain object। undefined বাদ দিন বা null দিন, কারণ key-এ undefined বাদ পড়ে যায়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।