Redwood: Router renders existing page without params before rendering new one

[cannikin]

Seeing a GraphQL error when leaving a page that contains a GraphQL query. It appears that the Router is re-rendering the current page but without any URL params.

@mojombo says that now that the router is class-based we can skip that render of the current page.

[gfpacheco]

I found the same issue and another one even worse, I think it's related to it:

After generating the scaffold for the Users model I can reproduce this issue by navigating from the users list to the user details page and back to the users list. The router renders the detail page without the id argument before rendering the list page.

Even worse, if I'm looking at the detail page and refresh the browser (to remove any cached chunk of code) and navigate to the users list the app crashes.

[thedavidprice]

Thanks for reporting this @gfpacheco Any chance you could help us by providing code for reproduction on our end?

[gfpacheco]

Sure, here you go: https://github.com/gfpacheco/redwood-bug-repro

How to make your own:

• yarn create redwood-app repro

• cd repro

• In schema.prisma: change datasource's url to be "sqlite:./dev.db" and client's binaryTarget to be "native" (env vars just didn't work at all)

• In schema.prisma: rename UserExample to User

• yarn rw db save

• yarn rw db up

• yarn rw g scaffold user

• yarn rw dev

• Open http://localhost:8910/users

• Create one user

• Go to the user's detail page clicking the SHOW button

• Go back to the user list page clicking the top left Users link

• BOOM: first error occur, the previous page is rendered without the id argument

• Go back to the user's detail page

• Refresh the browser (so you don't have the JS chunk for the list page yet)

• Go back to the user list page clicking the top left Users link

• BOOOOOOOM: app crashes with a lot of errors (alongside with the previous error again)

[thedavidprice]

@gfpacheco Thank you for this. I followed these steps locally and the app does not crash on Chrome or Safari. However, it does crash on Firefox. Console errors below.

@mojombo @peterp I suggest we prioritize this issue.

The above error occurred in the <Query> component:
    in Query
    in Unknown (created by UserPage)
    in main (created by UsersLayout)
    in div (created by UsersLayout)
    in div (created by UsersLayout)
    in UsersLayout (created by UserPage)
    in UserPage (created by PageLoader)
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider

[gfpacheco]

For me it crashes on Chrome and Safari as well, with the following logged into the console:

[Log] [HMR] Waiting for update signal from WDS... (app.chunk.js, line 66229)
[Info] [WDS] Hot Module Replacement enabled. (app.chunk.js, line 65318)
[Info] [WDS] Live Reloading enabled. (app.chunk.js, line 65322)
[Error] Failed to load resource: the server responded with a status of 400 (Bad Request) (graphql, line 0)
[Warning] [GraphQL error]: Message: Variable "$id" of required type "Int!" was not provided., Location: [object Object], Path: undefined
[Warning] [Network error]: ServerError: Response not successful: Received status code 400 (app.chunk.js, line 4759)
[Error] Error: Network error: Response not successful: Received status code 400
    (anonymous function) (app.chunk.js:3904)
    renderWithHooks (app.chunk.js:41636)
    updateFunctionComponent (app.chunk.js:43867)
    beginWork$1 (app.chunk.js:50012)
    performUnitOfWork (app.chunk.js:48990)
    workLoopSync (app.chunk.js:48963)
    performSyncWorkOnRoot (app.chunk.js:48589)
    performSyncWorkOnRoot
    (anonymous function) (app.chunk.js:37922)
    unstable_runWithPriority (app.chunk.js:57605)
    flushSyncCallbackQueueImpl (app.chunk.js:37917)
    flushSyncCallbackQueue (app.chunk.js:37905)
    scheduleUpdateOnFiber (app.chunk.js:48032)
    dispatchAction (app.chunk.js:42493)
    dispatchAction
    error (app.chunk.js:502)
    notifySubscription (app.chunk.js:66451)
    onNotify (app.chunk.js:66490)
    error (app.chunk.js:66551)
    forEach
    iterateObserversSafely (app.chunk.js:6485)
    onError (app.chunk.js:6436)
    invoke (app.chunk.js:7257)
    (anonymous function) (app.chunk.js:7607)
    forEach
    (anonymous function) (app.chunk.js:7605)
    forEach
    (anonymous function) (app.chunk.js:7603)
    (anonymous function) (app.chunk.js:7209)
    promiseReactionJob
[Error] Error: Network error: Response not successful: Received status code 400
    (anonymous function) (app.chunk.js:3904)
    renderWithHooks (app.chunk.js:41636)
    updateFunctionComponent (app.chunk.js:43867)
    callCallback (app.chunk.js:27021)
    dispatchEvent
    invokeGuardedCallbackDev (app.chunk.js:27070)
    invokeGuardedCallback (app.chunk.js:27125)
    beginWork$1 (app.chunk.js:50036)
    performUnitOfWork (app.chunk.js:48990)
    workLoopSync (app.chunk.js:48963)
    performSyncWorkOnRoot (app.chunk.js:48589)
    performSyncWorkOnRoot
    (anonymous function) (app.chunk.js:37922)
    unstable_runWithPriority (app.chunk.js:57605)
    flushSyncCallbackQueueImpl (app.chunk.js:37917)
    flushSyncCallbackQueue (app.chunk.js:37905)
    scheduleUpdateOnFiber (app.chunk.js:48032)
    dispatchAction (app.chunk.js:42493)
    dispatchAction
    error (app.chunk.js:502)
    notifySubscription (app.chunk.js:66451)
    onNotify (app.chunk.js:66490)
    error (app.chunk.js:66551)
    forEach
    iterateObserversSafely (app.chunk.js:6485)
    onError (app.chunk.js:6436)
    invoke (app.chunk.js:7257)
    (anonymous function) (app.chunk.js:7607)
    forEach
    (anonymous function) (app.chunk.js:7605)
    forEach
    (anonymous function) (app.chunk.js:7603)
    (anonymous function) (app.chunk.js:7209)
    promiseReactionJob
[Error] Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    reconcileChildFibers (app.chunk.js:41181:220)
    reconcileChildren (app.chunk.js:43602)
    updateFunctionComponent (app.chunk.js:43886)
    callCallback (app.chunk.js:27021)
    dispatchEvent
    invokeGuardedCallbackDev (app.chunk.js:27070)
    invokeGuardedCallback (app.chunk.js:27125)
    beginWork$1 (app.chunk.js:50036)
    performUnitOfWork (app.chunk.js:48990)
    workLoopSync (app.chunk.js:48963)
    performSyncWorkOnRoot (app.chunk.js:48589)
    performSyncWorkOnRoot
    (anonymous function) (app.chunk.js:37922)
    unstable_runWithPriority (app.chunk.js:57605)
    flushSyncCallbackQueueImpl (app.chunk.js:37917)
    flushSyncCallbackQueue (app.chunk.js:37905)
    scheduleUpdateOnFiber (app.chunk.js:48032)
    dispatchAction (app.chunk.js:42493)
    dispatchAction
    error (app.chunk.js:502)
    notifySubscription (app.chunk.js:66451)
    onNotify (app.chunk.js:66490)
    error (app.chunk.js:66551)
    forEach
    iterateObserversSafely (app.chunk.js:6485)
    onError (app.chunk.js:6436)
    invoke (app.chunk.js:7257)
    (anonymous function) (app.chunk.js:7607)
    forEach
    (anonymous function) (app.chunk.js:7605)
    forEach
    (anonymous function) (app.chunk.js:7603)
    (anonymous function) (app.chunk.js:7209)
    promiseReactionJob
[Error] The above error occurred in the <Query> component:
    in Query
    in Unknown (created by UserPage)
    in main (created by UsersLayout)
    in div (created by UsersLayout)
    in div (created by UsersLayout)
    in UsersLayout (created by UserPage)
    in UserPage (created by PageLoader)
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary.
    logCapturedError (app.chunk.js:46360)
    logError (app.chunk.js:46397)
    (anonymous function) (app.chunk.js:47556)
    getStateFromUpdate (app.chunk.js:39126)
    processUpdateQueue (app.chunk.js:39257)
    updateClassInstance (app.chunk.js:40018)
    updateClassComponent (app.chunk.js:43940)
    beginWork$1 (app.chunk.js:50012)
    performUnitOfWork (app.chunk.js:48990)
    workLoopSync (app.chunk.js:48963)
    performSyncWorkOnRoot (app.chunk.js:48589)
    performSyncWorkOnRoot
    (anonymous function) (app.chunk.js:37922)
    unstable_runWithPriority (app.chunk.js:57605)
    flushSyncCallbackQueueImpl (app.chunk.js:37917)
    flushSyncCallbackQueue (app.chunk.js:37905)
    scheduleUpdateOnFiber (app.chunk.js:48032)
    dispatchAction (app.chunk.js:42493)
    dispatchAction
    error (app.chunk.js:502)
    notifySubscription (app.chunk.js:66451)
    onNotify (app.chunk.js:66490)
    error (app.chunk.js:66551)
    forEach
    iterateObserversSafely (app.chunk.js:6485)
    onError (app.chunk.js:6436)
    invoke (app.chunk.js:7257)
    (anonymous function) (app.chunk.js:7607)
    forEach
    (anonymous function) (app.chunk.js:7605)
    forEach
    (anonymous function) (app.chunk.js:7603)
    (anonymous function) (app.chunk.js:7209)
    promiseReactionJob
[Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    printWarning (app.chunk.js:26921)
    error (app.chunk.js:26893)
    warnAboutUpdateOnUnmountedFiberInDEV (app.chunk.js:49994)
    scheduleUpdateOnFiber (app.chunk.js:48002)
    enqueueSetState (app.chunk.js:39472)
    (anonymous function) (app.chunk.js:54381)
    _callee$ (app.chunk.js:2670)
    tryCatch (app.chunk.js:55895)
    invoke (app.chunk.js:56124)
    asyncGeneratorStep (app.chunk.js:1370)
    _next (app.chunk.js:1392)
    promiseReactionJob