[question] Use unstable_dataSource with an async backend

[sterlingdcs-damian]

The problem in depth

I'm trying to use this the unstable_dataSource prop with my grid to lazyily load data.
My back end is untypical in that it doesnt jsut return the response (it comes via signalr and populates an items variable

So i'm trying to pass newRowsToAdd?.[0]?.id as a dependency however it seems to only show new grid items on the grid

  const [newRowsToAdd, setNewRows] = useState<DirectoryContentViewModel[]>([])

  useEffect(() => {
    //detect when signalR receives new items
    if (items.length && apiRef.current) {
      const currentRowIds = apiRef.current.getAllRowIds()
      const newRows = items
        .filter(({ id }) => !currentRowIds.includes(id))
        .map((item) => ({
          ...item,
          path: getIdPath(item.id),
        }))

      if (newRows.length) {
        setNewRows(newRows)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items.length])


  const dataSource: GridDataSource = useMemo(
    () => ({
      getRows: async (params: GridGetRowsParams) => {
        if (params?.groupKeys?.length === 0 && hasRun.current) {
          dispatch(
            fetchDirectoryContents({
              integrationId,
              path: params?.groupKeys?.length ? getIdPath(params.groupKeys[0]) : [],
              documentId,
              projectId,
            })
          )
        }
        return {
          rows: newRowsToAdd,
          rowCount: newRowsToAdd.length,
        }
      },
      getGroupKey: (row) => row.id,
      // TODO: Raise a Github issue, this prop should be mandatory
      getChildrenCount: (r) => (r.isDirectory ? 1 : 0),
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [documentId, integrationId, newRowsToAdd?.[0]?.id, projectId] // newRowsToAdd?.[0]?.id,
  )

is it possible to do this?

Your environment

`System: OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat) Binaries: Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm pnpm: 9.1.3 - ~/.local/share/pnpm/pnpm Browsers: Chrome: 128.0.6613.119 npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.15 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: 5.14.9 => 5.14.9 @mui/lab: 5.0.0-alpha.144 => 5.0.0-alpha.144 @mui/material: 5.15.15 => 5.15.15 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/styles: 5.14.10 => 5.14.10 @mui/system: 5.15.14 => 5.15.14 @mui/types: 7.2.17 @mui/utils: 5.16.6 @mui/x-charts: ^7.11.0 => 7.17.0 @mui/x-charts-vendor: 7.16.0 @mui/x-data-grid: 7.18.0 @mui/x-data-grid-premium: 7.18.0 => 7.18.0 @mui/x-data-grid-pro: 7.18.0 @mui/x-date-pickers: ^7.0.0 => 7.17.0 @mui/x-internals: 7.18.0 @mui/x-license: ^7.0.0 => 7.17.0 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.2 => 17.0.2 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 5.4.5 => 5.4.5

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: unstable_dataSource async
Order ID: 73340

[MBilalShafi]

Hey @sterlingdcs-damian,

You shouldn't ideally be storing the rows outside the Data Grid component since they are fetched on demand via the data source interface.

Could you provide a live minimal reproduction of the problem to better access the scenario? It's not very clear from the code snippet. If it's difficult to provide the actual backend, you could provide a dummy backend that behaves in a similar way.

Here's a guide on how to prepare a live reproduction, just in case you need it: https://mui.com/x/introduction/support/#bug-reproductions

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.