Improve React Query Keys

[wailinkyaww]

ကျွန်တော်တို့ useQuery သုံးတဲ့ နေရာမှာ cache key ထည့်ပေးရပါတယ်။

default မှာ react query က​ ဒီ key ကို သုံးပြီး 5 minutes cache လုပ်ပါတယ်။

https://github.com/eimg/rsd25/blob/7daf4e3c3942807cdfbef5779f7018ae51a070ae/chapter-12/yaycha/src/pages/Comments.jsx#L18-L24

ဒီနေရာမှာ ကျွန်တော်တို့က comments ကို cache key အနေနဲ့ သုံးထားပါတယ်။

`{api}/content/posts/${id}`

ကျွန်တော်တို့ API ကနေ ပြန်ရတဲ့ data က id - postId ပေါ်မူတည်ပြီး ပြောင်းနေမှာပါ။

ဒီလိုမ အလားတူ API calls တွေမှာ cache key ကို comments လို မပြောင်းလဲတဲ့ string တစ်ခုတည်းကို သုံးမည့် အစား

ပိုကောင်းတဲ့ approach က ပြောင်းနေတဲ့ postId နဲ့ တွဲသုံးတာပါ။

ဘာဖြစ်လို့လဲဆိုရင် postId ပြောင်းသွားပေမဲ့ key က တူတူပဲ ဖြစ်နေသေးရင် API ကို ပြန်မခေါ်တော့ပဲနဲ့ cache ထဲက data ကိုပဲ ထုတ်ပေးပါတယ်။

useQuery သုံးရင် အဖြစ်များတဲ့ issues တွေထဲက တစ်ခုပါ။

Suggested Change:

 const { isLoading, isError, error, data } = useQuery( 
    ["comments", postId], 
    async () => { 
        const res = await fetch(`${api}/content/posts/${postId}`); 
        return res.json(); 
    } 
 ); 

[eimg]

Thank you very much for your input. As you continue reading, you will see that we use the query key more appropriately in later chapters. I am leaving this issue open so that it may be helpful to other readers. Thanks.