Lazy-loading tree data rows is resetting expanded state from other rows when using with Apollo

[lucapasquale]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/datagridpro-v6-lazy-load-example-7d4gns?file=/src/App.tsx

Steps:

1. Click to expand any row
2. Click to expand a different row

Current behavior 😯

Any row previously expanded is collapsed when a lazy-loaded row is expanded. So in the steps above, the row on 1. is collapsed after we expand 2.. After the request for the children has been made, expanding/collapsing works normally

Screen.Recording.2023-05-15.at.18.22.05.mov

Expected behavior 🤔

Clicking to expand a row shouldn't affect other rows state

Context 🔦

This issue seems to only happen when using useQuery and useLazyQuery from @apollo/client. I tried replacing with mock API calls like the examples provided in your docs, and the issue doesn't seem to happen. Even if I query for a row's data, but don't use it on apiRef.current.updateRows, the same behavior occurs.

I can't share my real API since it's internal, but I was able to replicate it with that public API for star wars movies. It's not the best example since it has a max depth of 2, but its able to show the issue happening.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.3.1
  Binaries:
    Node: 18.13.0 - ~/.asdf/installs/nodejs/18.13.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.4 - ~/code/sinai/sinai-phoenix-platform/node_modules/.bin/npm
  Browsers:
    Chrome: 113.0.5672.92 (used)
    Edge: Not Found
    Firefox: 113.0.1
    Safari: 16.4
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-alpha.126
    @mui/core-downloads-tracker:  5.12.1
    @mui/lab:  5.0.0-alpha.127
    @mui/material:  5.12.1
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/styled-engine-sc:  5.12.0
    @mui/styles:  5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils:  5.12.3
    @mui/x-data-grid:  6.4.0
    @mui/x-data-grid-pro:  6.4.0
    @mui/x-date-pickers:  6.4.0
    @mui/x-date-pickers-pro:  6.4.0
    @mui/x-license-pro:  6.0.4
    @types/react:  17.0.39
    react:  17.0.2
    react-dom:  17.0.2
    styled-components:  5.3.9
    typescript: ^4.9.4 => 4.9.4

Order ID or Support key 💳 (optional)

65461

[yaredtsy]

hey @lucapasquale

The Apollo provider is causing the grid to re-render, and I don't think the datagrid is caching the expansion state, so it's being reset every time you fetch new data. One possible solution is to memoize the datagrid separately so that it's not re-rendered unnecessarily. This can help improve performance and prevent the expansion state from being reset every time you fetch data.

Demo : https://codesandbox.io/s/datagridpro-v6-lazy-load-example-forked-j8niyt?file=/src/App.tsx

[MBilalShafi]

Since it's due to an external library which is causing the whole grid to re-render, there's not much we can do here.
@lucapasquale Did you manage to resolve the issue somehow?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[lucapasquale]

Since it's due to an external library which is causing the whole grid to re-render, there's not much we can do here. @lucapasquale Did you manage to resolve the issue somehow?

I was able to make it work by using React.memo on the DataGridPro, and checking if the rows are the same as the previous props

export const ExpandableDataGridPro = React.memo(
  DataGridPro,
  (prevProps, nextProps) => {
    return prevProps.rows === nextProps.rows;
  }
);

Not the greatest solution, but it worked for us so far

[MBilalShafi]

Thanks for posting the solution, since you have a workaround, I'll close the issue. Feel free to open again if you feel there's an opportunity on the Grid's side.