Replies: 11 comments 19 replies
-
@wisaac407 I approached this problem the same as you... Nothing better came to my mind yet :( Did you find something else through this time? |
Beta Was this translation helpful? Give feedback.
-
Have you found any solution or is there any complete example for react-query? |
Beta Was this translation helpful? Give feedback.
-
I've ended up with a different solution, but just as (if not more) clunky - duplicating the data state rather than the table state: const [data, setData] = React.useState([]);
const table = useTable(
{ columns, data, ... },
usePagination
);
const result = useQuery(
["items", {count: table.state.pageSize, page: table.state.pageIndex}],
fetchItems
);
React.useEffect(() => {
setData(result.data || []);
}, [result.data, setData]); |
Beta Was this translation helpful? Give feedback.
-
Anyone have a good workflow for this yet? |
Beta Was this translation helpful? Give feedback.
-
it's September and no official way to go about with this. |
Beta Was this translation helpful? Give feedback.
-
I think this would all be solved if react-query offered a way to handle the fetching manually with This is possible when using the I have been looking at it for 1 day and decided to move away from react-query, I don't think this 2 are compatible for this case. |
Beta Was this translation helpful? Give feedback.
-
Hi all, First, I'm not a react-table nor react-query maintainer and I think it's indeed a pity we don't have good examples/docs on how to integrate both solutions. So I went to the same path as you, met same difficulties, and I was not happy with the Then I thought about another solution which consist of maintaining the The problem is when the table instance from So here we go: // This is my queryState, it could also contains some other filters properties
const [queryPageIndex, setQueryPageIndex] = useState(0);
const [queryPageSize, setQueryPageSize] = useState(10);
const { data } = useQuery(['items', {pageSize: queryPageSize, 'index': queryPageIndex}], listItems)
const useControlledState = (state) => {
return useMemo(() => (
{
...state,
pageIndex: queryPageIndex,
pageSize: queryPageSize
}
),
[state, queryPageIndex, queryPageSize])
}
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
// As I control the state, I should not use those
// gotoPage,
// nextPage,
// previousPage,
// setPageSize,
state: { pageIndex, pageSize },
// And I can also get back my additional props (see below)
setQueryPageIndex,
setQueryPageSize
} = useTable(
{
columns,
data: data.items,
// initialState: { pageIndex: 0 }, I don't need that anymore
useControlledState, <-- that is the hook
manualPagination: true,
pageCount: data && data.pageCount,
// I can also pass other props
setQueryPageIndex,
setQueryPageSize
},
usePagination
) I think it's better as we use a hook to control the |
Beta Was this translation helpful? Give feedback.
-
The controlled state story is already much better in v8 (most of the examples show how to control the state). With this better approach to controlled state, you don't have to go to weird lengths to achieve a better result with React Query. You can control the state in your own state variable, pass that state/handler pair to react-table and then base your data query variables off of that controlled state. We're working on a new example that will show how to do that with React Query. Stay tuned! |
Beta Was this translation helpful? Give feedback.
-
For those that stumble across this thread looking how to accomplish pagination in combination with react query, they have added an example with v8 here! React Table Pagination Controlled Example | TanStack Table Docs |
Beta Was this translation helpful? Give feedback.
-
Hi. What about filtering? |
Beta Was this translation helpful? Give feedback.
-
The controlled pagination example doesn't have an example if we are using an opaque cursor string instead of page indexes. I use a pagination string when it's possible that data gets inserted somewhere in the list of already seen pages. Is there a good example using a cursor string? Or how can I map the cursor string to a page index? |
Beta Was this translation helpful? Give feedback.
-
I'm trying to use react-table with react-query and I'm having trouble figuring out the best way to handle pagination.
This is the best I've come up with, but it seems a bit clunky:
Is there a way to pass
pageIndex
andpageSize
to useTable to avoid having to duplicate the state?Beta Was this translation helpful? Give feedback.
All reactions