-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disallow useLoaderData in errorElement #9735
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
e0948d2
Router updates to better handle data at boundaries
brophdawg11 03f346e
Prevent useLoaderData in errorElement
brophdawg11 a58f45c
add changesets
brophdawg11 b1e6853
bundle bump
brophdawg11 5f2337c
Merge branch 'dev' into brophdawg11/loader-data-error-boundary
brophdawg11 feb7346
Clean up actionData logic
brophdawg11 cf23c80
bundle bump
brophdawg11 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@remix-run/router": patch | ||
--- | ||
|
||
Fix a few bugs where loader/action data wasn't properly cleared on errors |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
"react-router": patch | ||
"@remix-run/router": patch | ||
--- | ||
|
||
Prevent `useLoaderData` usage in `errorElement` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -482,6 +482,7 @@ type RenderErrorBoundaryProps = React.PropsWithChildren<{ | |
location: Location; | ||
error: any; | ||
component: React.ReactNode; | ||
routeContext: RouteContextObject; | ||
}>; | ||
|
||
type RenderErrorBoundaryState = { | ||
|
@@ -544,10 +545,12 @@ export class RenderErrorBoundary extends React.Component< | |
|
||
render() { | ||
return this.state.error ? ( | ||
<RouteErrorContext.Provider | ||
value={this.state.error} | ||
children={this.props.component} | ||
/> | ||
<RouteContext.Provider value={this.props.routeContext}> | ||
<RouteErrorContext.Provider | ||
value={this.state.error} | ||
children={this.props.component} | ||
/> | ||
</RouteContext.Provider> | ||
) : ( | ||
this.props.children | ||
); | ||
|
@@ -615,14 +618,9 @@ export function _renderMatches( | |
let errorElement = dataRouterState | ||
? match.route.errorElement || <DefaultErrorElement /> | ||
: null; | ||
let matches = parentMatches.concat(renderedMatches.slice(0, index + 1)); | ||
let getChildren = () => ( | ||
<RenderedRoute | ||
match={match} | ||
routeContext={{ | ||
outlet, | ||
matches: parentMatches.concat(renderedMatches.slice(0, index + 1)), | ||
}} | ||
> | ||
<RenderedRoute match={match} routeContext={{ outlet, matches }}> | ||
{error | ||
? errorElement | ||
: match.route.element !== undefined | ||
|
@@ -639,6 +637,7 @@ export function _renderMatches( | |
component={errorElement} | ||
error={error} | ||
children={getChildren()} | ||
routeContext={{ outlet: null, matches }} | ||
/> | ||
) : ( | ||
getChildren() | ||
|
@@ -678,6 +677,22 @@ function useDataRouterState(hookName: DataRouterStateHook) { | |
return state; | ||
} | ||
|
||
function useRouteContext(hookName: DataRouterStateHook) { | ||
let route = React.useContext(RouteContext); | ||
invariant(route, getDataRouterConsoleError(hookName)); | ||
return route; | ||
} | ||
|
||
function useCurrentRouteId(hookName: DataRouterStateHook) { | ||
let route = useRouteContext(hookName); | ||
let thisRoute = route.matches[route.matches.length - 1]; | ||
invariant( | ||
thisRoute.route.id, | ||
`${hookName} can only be used on routes that contain a unique "id"` | ||
); | ||
return thisRoute.route.id; | ||
} | ||
|
||
Comment on lines
+680
to
+695
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Private utility hooks |
||
/** | ||
* Returns the current navigation, defaulting to an "idle" navigation when | ||
* no navigation is in progress | ||
|
@@ -732,17 +747,15 @@ export function useMatches() { | |
*/ | ||
export function useLoaderData(): unknown { | ||
let state = useDataRouterState(DataRouterStateHook.UseLoaderData); | ||
let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData); | ||
|
||
let route = React.useContext(RouteContext); | ||
invariant(route, `useLoaderData must be used inside a RouteContext`); | ||
|
||
let thisRoute = route.matches[route.matches.length - 1]; | ||
invariant( | ||
thisRoute.route.id, | ||
`useLoaderData can only be used on routes that contain a unique "id"` | ||
); | ||
|
||
return state.loaderData[thisRoute.route.id]; | ||
if (state.errors && state.errors[routeId] != null) { | ||
console.error( | ||
`You cannot \`useLoaderData\` in an errorElement (routeId: ${routeId})` | ||
); | ||
return undefined; | ||
} | ||
return state.loaderData[routeId]; | ||
Comment on lines
+752
to
+758
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Brought over from Remix - if we're calling this from the currently rendered error boundary match, return undefined |
||
} | ||
|
||
/** | ||
|
@@ -773,23 +786,16 @@ export function useActionData(): unknown { | |
export function useRouteError(): unknown { | ||
let error = React.useContext(RouteErrorContext); | ||
let state = useDataRouterState(DataRouterStateHook.UseRouteError); | ||
let route = React.useContext(RouteContext); | ||
let thisRoute = route.matches[route.matches.length - 1]; | ||
let routeId = useCurrentRouteId(DataRouterStateHook.UseRouteError); | ||
|
||
// If this was a render error, we put it in a RouteError context inside | ||
// of RenderErrorBoundary | ||
if (error) { | ||
return error; | ||
} | ||
|
||
invariant(route, `useRouteError must be used inside a RouteContext`); | ||
invariant( | ||
thisRoute.route.id, | ||
`useRouteError can only be used on routes that contain a unique "id"` | ||
); | ||
|
||
// Otherwise look for errors from our data router state | ||
return state.errors?.[thisRoute.route.id]; | ||
return state.errors?.[routeId]; | ||
} | ||
|
||
/** | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to put the error boundary inside the
RouteContext
so it reflects the right matches, otherwise it thinks it' at the parent layer in the nested hierarchy 😬