Refresh control approach

[VladyslavMartynov10]

@BenQoder Thanks for the perfect pagination example!

Do you have any ideas how we can make forceRefresh using Refresh Control?

[vivekDIgiMantra]

i'm also facing the same issue data get's duplicate

[VladyslavMartynov10]

i'm also facing the same issue data get's duplicate

If you want to fully refresh your data you need to use: dispatch(api.endpoint.initiate())

[vivekDIgiMantra]

i'm also facing the same issue data get's duplicate

If you want to fully refresh your data you need to use: dispatch(api.endpoint.initiate())

Yes, I understand that part, but when I navigate back and forth between different screens, it reverts to its local state, displaying page 1 again and binding the data from the previous session.

my code flow below :

const [currentPageNo, setCurrentPageNo] = useState(1);

const {ordersData, currentPage, totalPageNo, isFetching} = useGetOrdersQuery(
  {
    pageNo: currentPageNo,
  },
  {
    selectFromResult: ({data, ...otherParam}) => ({
      ordersData: data?.ordersData,
      currentPage: data?.currentPage,
      totalPageNo: data?.totalPageNo,
      ...otherParam,
    }),
  },
);

create API:

transformResponse: (response: any) => {
     if (!response?.data) {
       throw new Error('Invalid response format');
     }
     return {
       ordersData: response?.data?.orders,
       currentPage: response?.data?.currentPage,
       totalPageNo: response?.data?.totalPages,
     };
   },
   forceRefetch: ({currentArg, previousArg}) => {
     return currentArg?.pageNo !== previousArg?.pageNo;
   },
   serializeQueryArgs: ({endpointName}) => {
     return endpointName;
   },
   merge: (currentCache, newItems) => {
     // Ensure to return the merged cache
     return {
       ...currentCache,
       currentPage: newItems?.currentPage,
       ordersData: [...currentCache.ordersData, ...newItems.ordersData],
     };
   },

[vivekDIgiMantra]

as i have to do but I don't think so this is right way

const {
   ordersData: cacheOrderData,
   // currentPage,
   totalPageNo,
   isFetching,
 } = useGetOrdersQuery(
   {
     pageNo: currentPageNo,
   },
   {
     selectFromResult: ({data, ...otherParam}) => ({
       ordersData: data?.ordersData,
       currentPage: data?.currentPage,
       totalPageNo: data?.totalPageNo,
       ...otherParam,
     }),
   },
 );

const ordersData = cacheOrderData?.filter(
   (item: any, index: any, self: any) =>
     index === self.findIndex((order: any) => order._id === item._id),
 );

[vivekDIgiMantra]

@BenQoder

[VladyslavMartynov10]

@vivekDIgiMantra You can try to play with merge function in rtk API. You can make a clean-up in case you request is on the first page

[vivekDIgiMantra]

@vivekDIgiMantra You can try to play with merge function in rtk API. You can make a clean-up in case you request is on the first page

what i did

merge: (currentCache, newItems) => {
        const mergedOrdersData = [...currentCache?.ordersData];
        const uniqueIds = new Set(
          currentCache?.ordersData?.map((item: any) => item._id),
        );

        // Add new items to mergedOrdersData if they have unique IDs
        newItems?.ordersData.forEach((item: any) => {
          if (!uniqueIds.has(item._id)) {
            mergedOrdersData.push(item);
            uniqueIds.add(item._id);
          }
        });

        return {
          ...currentCache,
          currentPage: newItems?.currentPage,
          ordersData: mergedOrdersData,
        };
      },
      

 ###  how would you suggested better way to do it ??

[VladyslavMartynov10]

In fact there is no optimal way to handle it without extra boilerplate as this functionailty is not a primary goal for rtk query.

[BenQoder]

I was able to do a refresh with refresh control.

I would require that I make a video but I don't have the time right now but maybe over the weekend I will.

[vivekDIgiMantra]

In fact there is no optimal way to handle it without extra boilerplate as this functionailty is not a primary goal for rtk query.

so what i did by making the data unique before adding to cache is good way ?