[BUGS] [SERVER-SIDE] [COLUMNS] It's doing extra request for each column

[ArseniyX]

Describe the bug
The library doing request for each columns that actually unwanted because it increase traffic and make problems to debug

To Reproduce
Steps to reproduce the behavior:

1. Go to https://gridjs.io/docs/examples/server-side-sort
2. clear networks
3. add 3 columns to the example code or copy full code below
4. look networks
   expected: 1 request
   current: 5 requests

const grid = new Grid({
  sort: {
    multiColumn: false,
    server: {
      url: (prev, columns) => {
       if (!columns.length) return prev;
       
       const col = columns[0];
       const dir = col.direction === 1 ? 'asc' : 'desc';
       let colName = ['name', 'rarity', '1', '2', '3'][col.index];
       
       return `${prev}&order=${colName}&dir=${dir}`;
     }
    }
  },
  columns: [
   'Name',
   'Rarity',
   '1',
   '2',
   '3',
   {
     name: 'Image',
     width: '30%',
     sort: false,
     formatter: (img) => html(`<center><img src='${img}'/></center>`)
   }
  ],
  server: {
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    then: data => data.data.map(card => [card.name, card.rarity, card.image_uris.small]),
    total: data => data.total_cards
  } 
});

[rbdmorgan]

Just came across this as well. You can reproduce it with the example here:

https://gridjs.io/docs/examples/server-side-sort

[rbdmorgan]

It fires off the duplicate requests on load as well.

So if you have 3 columns it does 4 requests on load and then 3 requests on each sort (th click).

[rbdmorgan]

Unfortunately the server side sorting and pagination appears to be broken.

If you have both set up and click on a sort header, pagination.server() gets called 4 times and then sort.server() gets called 2 times.

The first 2 sort calls don't include the params and the pagination calls shouldn't happen at all. So depending on which call "wins" and refreshes the grid you usually end up with a grid that isn't in the correct state, plus you've hit the server 6 times rather than 1.

I guess it's a case of React duplicating/bubbling events, not as much of a problem if you're not hitting a server, so probably doesn't show up in the client side sorting and pagination.

[opheus2]

Any update on this... In my case, without the sorting, for every column in the array, a new request is made

[crpozo]

I have the same problem. It's a great idea and library but this is an important bug. I guess adding a loading screen or something similar but this will not solved it entirely.

[crpozo]

Quick solution: Downgrade to version 5. All features seems to work fine, at least the ones I'm using.

[ArseniyX]

Quick solution: Downgrade to version 5. All features seems to work fine, at least the ones I'm using.

Thanks, thats better than nothing anyway, I tried to find real solution without success

[garidium]

I just ran across this as well today. I found that if I turned off search and sort options, I get one call as expected. If both of those options are enabled, I see 15 server side requests (table has 14 columns). Enabling search, with sorting disabled. I get 2 server side requests. Then adding sorting back, and removing search, it triggers 14 requests.

So in summary:

Search is adding a duplicate request
Sorting is sending a request per column

[miklereverie]

Any news on this? Having this exact same behavior.
I know that downgrading to version 5 fixes it, but looking for a more permanent solution.

[Marin-Matosevic]

I had faced a similar issue while using the RowSelection plugin, when attempting to select a row immediately after the page load, the selection would disappear. It was frustrating and appeared to be buggy. To overcome this, I implemented a simple workaround by creating a custom function that retrieves data from my endpoint.

Below is the implementation of the custom function, which I assigned as the data parameter inside the new Grid({})
Since is used with WordPress endpoint, I have nonce parameter but you can remove it.

async function fetchData( endpoint, nonce ) {
    try {
        const response = await fetch( endpoint, {
            headers: {
                'X-WP-Nonce': nonce,
            },
        } );
        const data = await response.json();

        return data;
    } catch ( error ) {
        console.error( error );
    }
}

and inside new Grid({})

data: await fetchData( '/wp-json/cool-endpoint/v1/data', nonce )

[mrtorks]

I had faced a similar issue while using the RowSelection plugin, when attempting to select a row immediately after the page load, the selection would disappear. It was frustrating and appeared to be buggy. To overcome this, I implemented a simple workaround by creating a custom function that retrieves data from my endpoint.

Below is the implementation of the custom function, which I assigned as the data parameter inside the new Grid({}) Since is used with WordPress endpoint, I have nonce parameter but you can remove it.

async function fetchData( endpoint, nonce ) {
    try {
        const response = await fetch( endpoint, {
            headers: {
                'X-WP-Nonce': nonce,
            },
        } );
        const data = await response.json();

        return data;
    } catch ( error ) {
        console.error( error );
    }
}

and inside new Grid({})

data: await fetchData( '/wp-json/cool-endpoint/v1/data', nonce )

With this workaround, can you confirm it works with server side import, search, pagination as well as sort? If not could you provide a template for so. It would really be appreciated.

[Marin-Matosevic]

@mrtorks Yes, it works fine with pagination and sort. Not sure about search since I don't use it, but I don't see any reason why it wouldn't work.

[AleAmex]

Same problem for me
https://stackoverflow.com/questions/75899156/when-try-server-side-sorting-with-grid-js-it-does-multiple-calls-to-the-server-t/76521809

Hope it will be solved soon

[rendorHaevyn]

Quick solution: Downgrade to version 5. All features seems to work fine, at least the ones I'm using.

Confirmed - downgrading to 5.0.2 prevents the request overload.

<script src="https://unpkg.com/gridjs@5.0.2/dist/gridjs.umd.js"></script>

[sabatale]

@rendorHaevyn Have you tested on 5.1.0?

[omerserif]

I am using the latest version and the problem persists.

When will the solution be?

[middle21]

I stumbled upon the same problem. I don't have sorting yet, but it happens when I use forceRender.

[vkresch]

Same issue. When making this many requests I cannot set an initial page and it just resets to zero. Is server side sorting working in 5.1.0?

[afshinm]

Apologies for this issue. I have a fix for this that should address this issue and improve the overall rendering performance of the library: #1408

[afshinm]

A new version is now available. Please try v6.1.0 https://www.npmjs.com/package/gridjs

[charlesmudy]

@afshinm this is still happening with v6.2.0 as of today. Not sure why and the fix to this. We are using handle option with alert, now causing the application to alert multiple times.

[RegistrosTI]

I confirm that this issue still exists in version 6.2.0. When the sort server is configured, it makes a fetch for every column.