[data grid] TanStack Query integration demos

[oliviertassinari]

Summary

I'm creating this issue to get a sense of the developer traction for having TanStack Query demos for data fetching with the grid. Seeing this tweet https://x.com/ericclemmons/status/1823108565285941266 and this chart https://npm-stat.com/charts.html?package=react-dom,@tanstack/react-query could suggest that there is an audience.

Examples

• https://www.material-react-table.com/docs/examples/infinite-scrolling#infinite-scrolling-example

[MBilalShafi]

We do have one in the tree-data custom caching section but one with lazy-loading/infinite loading should be interesting. 👍

CC @arminmeh

[oliviertassinari]

Interesting, I was thinking of having a dedicated TanStack Query set of examples, kind of an Integration doc, and having the rest of the demos more barebone, showing the raw concepts.

Maybe the ideal would be to support in docs-infra different variants of the demos. Like people could select between "Raw" and "TanStack Query" for all of those demos.

[arminmeh]

I looked briefly into it and I it seems that is better to have a separate integration page, since there is a lot of overlap between
TanStack Query and our own data source (especially after lazy loading is merged).

For both you provide a way to fetch the data and your UI is updated automatically. The additional thing that out data source has is the knowledge how to track the changes of the filter/sort/pagination models and adjust request params accordingly.

My point is, by using TanStack Query there is not much data source adds to it, so it does not feel that this is a data source specific example