[DataGrid] Fail with an explicit error when API context is missing

[m4theushw]

Closes #1401

[oliviertassinari]

What do you think about raising a warning instead of throwing and only in dev mode to not have any bundle size impact?
Is it important enough to throw?

[dtassone]

I think it is important to throw as users would have issues at a later stage.

We could also consider combining it with useGridApiRef so you have a single point to get or create the apiRef 🤔

[m4theushw]

What do you think about raising a warning instead of throwing and only in dev mode to not have any bundle size impact?

@oliviertassinari I tested with the docs and the warning wasn't sent to the console, but to the terminal that was running the dev server. A throw in this situation facilitates for the user to know where's the problem.

We could also consider combining it with useGridApiRef so you have a single point to get or create the apiRef 🤔

@dtassone Let's imagine that there's another grid inside the grid, like a child row. How will we know if a apiRef has to be created or the one in the context should used? Maybe we need to add an argument to force to create the apiRef even if there's a context in the tree.

[oliviertassinari]

but to the terminal that was running the dev server.

@m4theushw True, I was actually just talking about this problem in mui/material-ui#18119 (comment). It's a Next.js thing that they could solve by forwarding the console log to the client too (not only the error). But fair enough.

In the future, we could set up the error modification script that Sebastian built (to save a bit of bundle size)

How will we know if a apiRef has to be created or the one in the context should used?

💯. I would even push it one step further is unbundle useGridApiRef. I think that we need 3 hooks, for 3 different use cases, not 1.

• useGridApiContext to consume the API ref (React.useContext)
• const apiRef = React.useRef<GridApi>(createGridApi()); to create the apiRef and store it + React.useImperativeHandle
• useGridApiRefto read the API ref from the child data grid ONLY (React.useRef)

I did a first step in this direction with #990