Unable to set totalRows

[stychu]

The onRowsRequest is kinda inconvenient and not elastic enough to use when using React Query for data fetching.

I would like to be able to set totalRows in sync mode but instead totalRows are only able to be set when in async mode which need the use of onRowsRequest but I don't need to use onRowsRequest with ReactQuery.

react-grid-table/src/hooks/useRows.jsx

Line 34 in c71ff5b

mode === "sync" ? rowsApi.rows?.length : props.totalRows ?? totalRows;

Whenever I provide the property to the table it should take it no matter if its async or sync mode.

ReactQuery handles all internal data fetching logic and returns the results -> { isLoading, isError, data, refetch }
so I want just to supply the returned data to the react-grid-table via the rows and totalRows but I can't control totalRows in this case which prohibits me of using this like that.

[NadavShaar]

Are you sure that you can't integrate react-query with onRowsRequest?

[stychu]

So I was able to integrate reactQuery using fetchQuery instead of useQuery hook. It works but I wish I was able to use useQuery because with fetchQuery I have to do all error handling manually by myself inside the onRowsRequest and extra flexing around with useRef coz useState behaves very weird and I could not get it working.

I wonder if I could get it working somehow with useQuery tho. Would you mind trying to do some PoC if it would work useQuery?? Maybe Im doing something wrong. With your internal knowledge about react-grid-table maybe you can pull it of?? I would appreciate greatly

[NadavShaar]

I'm not a react-query expert, but i think that you should be able to integrate useQuery with onRowsRequest.
if you can share a live example that uses react-query with a basic table implementation I'll try to help.

[stychu]

@NadavShaar Ah sorry for the delay I was really busy.

Here is some repro https://codesandbox.io/s/react-grid-table-async-forked-odt8ii
I can see that data is changing. Request is fired on pagination change but the data of the table itself is not updated.

[NadavShaar]

Fixed: https://codesandbox.io/s/react-grid-table-async-forked-1o3w4h?file=/src/App.js
You should have worked with the refetch function in order to fetch on demand, and disable the auto fetch (unless you need the data for another component).

[stychu]

Oh god... I knew I was missing something! This will simplify a ton of my component. Thanks a lot <3

[stychu]

I have one more problem. How Do i handle the external state with the table.
In order to trigger the useQuery with different values for page,pageSize,name and any other filter I need to have external state that when it changes it setups useQuery with new data. But when the external state change it resets the table and all its components lose the state itself.

I want to handle search and Headers with custom dropdown filters.

For search I managed to pull the search component out of the table components and its state is preserved but I need to manually handle all the details regarding resetting pagination etc. Which again Im doing it wrong and hacking around.

Secondly for my Test select component I can't manage to get the external state to drill down to it. It does update on top level but inside the Test component it doesn;t change why that could be ?
https://codesandbox.io/s/react-grid-table-async-forked-t5bhmh?file=/src/App.js

[stychu]

@NadavShaar
If I pass the external state to the additionalProps then I can access it in test component and update the select value accordingly but this feels wrong and hacky.
https://codesandbox.io/s/react-grid-table-async-forked-0wr7j1