RTK optimistic and pessimistic catch update methods

আমাদের অনেক কাজেই সার্ভারের সাথে যোগাযোগ তৈরি করতে হয় । ডাটা ফেস করতে ইত্যাদি ইত্যাদি । আমরা যখন RTK ব্যাবহার করব তখন তো এঁই কাজটা আরও সহজ হয়ে যায় । আজকে আমরা এই সহজ কাজের আরও কিছু আডভান্স কাজ দেখব । প্রথমে আমরা একটু জেনে নেই catch জিনিসটা কি ? catch হচ্ছে in-memory database যেখানে আমাদের যেকোনো ডাটা ষ্টোর করা যায় ।

আমরা catch নিয়ে কাজ না করে চাইলেই RTK এঁর ইন বিল্ড কিছু মেথড ব্যাবহার করে ওয়েবসাইটের ডাটা আপডেট রাখতে পারি । যেমনঃ

1. TagTypes["tagName"]

2. providesTags["tagName"]

3. invalidatesTags["tagName"]

এতে করে আমাদের কিছু সমস্যার মধ্যে দিয়ে যেতে হতে পারে। যেমন অনেক অনেক ডাটা সার্ভার থেকে আনতে হলে বার বার রেকুএস্ট করে আনা অনেক সময় সাপেক্ষ ব্যাপার । কিন্তু আমাদের এমন যদি কোণ রাস্তা থাকত যেখানে আমাদের আপডেটেড ডাটা ইন্সারট করে দিলেই আমাদের ওয়েবসাইট আপডেটড ডাটা প্রদর্শন করত । সেই সমাধানটাই আমাদের দিবে RTK optimistically and pessimistically catch update methods .

কিভাবে আমরা optimistically and pessimistically catch আপডেট করতে পারি ?

1. optimistically catch update

 addVideo: builder.mutation({
  👆 // addVideo এটা endpoient এ নাম 
   query: (data) => ({
    url: `/videos`,
    method: "POST",
    body: data,
   }),
// catch update pessimistically
async onQueryStarted(_arg, { queryFulfilled, dispatch }) {
  try {
   const addedVideo = await queryFulfilled;
   if (addedVideo?.data?.id) {
   dispatch(
    apiSlice.util.updateQueryData("getVideos", undefined, (draft) => {
        draft.push(addedVideo.data);
       })
      );
     }
    } catch {}
   },
  }),

আরও কিছু উদাহরণ optimistic catch updating এঁর

deleteVideo: builder.mutation({
  👆 // deleteVideo এটা endpoient এ নাম 
   query: (id) => ({
    url: `/videos/${id}`,
    method: "DELETE",
   }),
 // catch update optimistically
  async onQueryStarted(id, { queryFulfilled, dispatch }) {
   let patchResult1 = dispatch(
    apiSlice.util.updateQueryData("getVideos", undefined, (draft) => {
      let deletedItemIndex = draft?.findIndex((c) => c.id == id);
      draft.splice(deletedItemIndex, 1);
     })
    );
    try {
     await queryFulfilled;
    } catch {
     patchResult1.undo();
    }
   },
  }),

1. Pessimistically catch update

editVideo: builder.mutation({
  👆 // editVideo এটা endpoient এ নাম 
   query: ({ id, data }) => ({
    url: `/videos/${id}`,
    body: data,
    method: "PATCH",
   }),
// pessimistically catch update  
async onQueryStarted(arg, { queryFulfilled, dispatch }) {
  try {
   const video = await queryFulfilled;
   if (video.data.id) {
    dispatch(
     apiSlice.util.updateQueryData("getVideos", undefined, (draft) =>{
        const findVideo = draft.find((v) => v.id == arg.id);
        findVideo.title = video.data.title;
        findVideo.description = video.data.description;
       })
      );
     }
    } catch {}
   },
  }),

optimistic and pessimistic catch আপডেটের মধ্যে পার্থক্য