[DataGridPro] unstable_dataSource Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

[TradeeHubDev]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

Expected behavior

Showing the rows

Context

Here is my grid settings

    <DataGridPro
      unstable_dataSource={dataSource}
      columns={columns}
      apiRef={apiRef}
      loading={loading}
      checkboxSelection
      initialState={initialState}
      pageSizeOptions={[10, 20, 50, 100, 250, 500, 1000]} // Include the default page size in the options
      pagination
      paginationMode='server'
      onRowClick={(params) => {
        if (onRowClick) {
          onRowClick(params.row);
        }
      }}
      disableRowSelectionOnClick
      columnVisibilityModel={columnVisibilityModel}
      disableVirtualization={isMobile} // added this to disable white flickering on header on mobile mode when scroll fast on x axis
      onColumnVisibilityModelChange={(newModel) =>
        setColumnVisibilityModel(newModel)
      }
      onPaginationModelChange={handlePaginationModelChange}
      slotProps={{
        pagination: {
          slotProps: {
            actions: {
              nextButton: {
                disabled: loading || !focusedPage?.hasNextPage
              },
              previousButton: {
                disabled: loading || !focusedPage?.hasPreviousPage
              }
            }
          }
        }
      }}
      slots={{
        toolbar: slots?.toolbar || GridToolbar
      }}
      getRowClassName={(params) =>
        params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
      }
      sx={dataGridStyles}
      className={cn(
        'rounded-[--radius] border border-border shadow-sm',
        'dark:border-border dark:bg-card dark:text-primary-foreground'
      )}
    />`
    
    Here is my data source 
    
    `  const dataSource: GridDataSource = useMemo(() => {
    return {
      getRows: async (params) => {
        setLoading(true);

        if (isGridActionRef.current || searchParams.size === 0) {
          console.log('Data Source Manual Fetch');
          return await fetchData(
            params.paginationModel.page,
            params.paginationModel.pageSize
          );
        } else {
          console.log('Data Source Url Navigation Fetch');
          return await fetchDataUrlNavigation();
        }
      }
      //getGroupKey: (row) => row.group,
      //getChildrenCount: (row) => row.descendantCount
    };
  }, [triggerGridFetch]);

I am using graphql in my grid and I want to have url navigation between grid pages so I started adding it custom while using server side using unstable_dataSource the issue I am having is only happening when i navigate with the browser back and forward button not always happening, but sometimes not sure if it's an async issue since its still unstable I get the error uploaded in the above picture, doesn't seems to happen when I use regular grid navigation button back and forward button on grid but since I want to allow url navigation by pressing back and forward on the browser it trigger the triggerGridFetch state change which will fetch data the data is fetched correctly even when it fails since it present in the logs but not sure if MUi tried to render it before it was available trying to access id of a null which ID is a mandatory field my data has.

useGridFocus.js:338 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id') at Object.current (useGridFocus.js:338:29) at EventManager.enhancedHandler (useGridApiEventHandler.js:33:29) at EventManager.emit (EventManager.js:57:18) at Object.publishEvent (useGridApiInitialization.js:88:40) at run (useGridRows.js:91:22) at useGridRows.js:105:5 at Object.<anonymous> (useGridRows.js:121:5) at Object.fetchRows (useGridDataSource.js:73:22)

Your environment

npx @mui/envinfo

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

Search keywords: Cannot read properties of undefined (reading 'id')

[arminmeh]

@TradeeHubDev
From your stack trace I see that this is the issue that is already been fixed in #15153
Fix should be released today or tomorrow

[TradeeHubDev]

I thought I was going crazy and it was something I done wrong @arminmeh thanks for the update

[TradeeHubDev]

@arminmeh sorry quick question just saw the other ticket but it talking about deleting rows? I am not deleting I am loading them or similar concept?

[arminmeh]

Error is caused because of a piece of code that tries to focus previous row if the current row is missing. It breaks when there are no rows anymore. I guess it happens for you while previous/next page is about to get rendered
useGridFocus.js:338:29 this suggests to me that the error will be gone once the referenced PR is released

[TradeeHubDev]

I see makes sense thanks @arminmeh