Rows.add() not working with lazy loading of data using react query

Rows.add() not working with lazy loading of data using react query

KEshav09KEshav09 Posts: 18Questions: 9Answers: 0
edited April 2023 in Free community support

So i am trying to lazy load 1000 records after intializing the datable and adding the data after fetching each 50 records per api call , i am using useInfiniteQuery and axios to fetch data , the problem is every time i fetch data and call table.rows.add(data).draw() the data is not getting updated , but when i use a axios promise call directly with javascirpt promise it works perfectly fine

 const { data, isSuccess, hasNextPage, fetchNextPage, isFetchingNextPage } =
    useInfiniteQuery(
      "fetchAccounts",
      ({ pageParam = 50 }) => fetchRepositories({ pageParam }),
      {
        getNextPageParam: (_lastPage, allPages) => {
          if (allPages.length < pageLoadingLimit) {
            return allPages.length + 1;
          }
          {
            return undefined;
          }
        },
        onSuccess: (data) => {
            new Promise(function (resolve, reject) {
              if (data) {
                resolve(data);
              }
            }).then((data) => {
              data?.pages.map((group, i) => {
                // for every page from the api call there will 50 records 
                // the group?.data will have those records in [{}] format
                $(tran_table).DataTable().rows.add(group?.data).draw();
              });
          });
        
        },
      }
    );

the above doesnt work
but when i do

axios.post(url,payload,headers).then((res)=>{
data?.pages.map((group, i) => {
  // for every page from the api call there will 50 records 
 // the group?.data will have those records in [{}] format
 $(tran_table).DataTable().rows.add(group?.data).draw();
}).catch(()=>{
console.log('error')
}) // But this peice of code works

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Answer ✓

    Does group.data have an array of data in it?

    I'd really need a test case to be able to help with this one.

    Allan

  • KEshav09KEshav09 Posts: 18Questions: 9Answers: 0

    Yes Grop.data has an array in it [ {} ]

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Super - thanks for the confirmation. That confirms that I'd need a link to a page showing the issue to be able to offer any help in that case, as I don't currently have enough information to run and debug this.

    Please see this tech note on how to provide a test case if you can't link to your own page.

    Allan

Sign In or Register to comment.