Provide AppTree to getInitialProps for getDataFromTree

packages/next-server/lib/router/router.ts

@@ -69,6 +69,7 @@ export default class Router implements BaseRouter {
   pageLoader: any
   _bps: BeforePopStateCallback | undefined
   events: MittEmitter
+  _wrapApp: (App: ComponentType) => any
 
   static events: MittEmitter = mitt()
 
@@ -80,6 +81,7 @@ export default class Router implements BaseRouter {
       initialProps,
       pageLoader,
       App,
+      wrapApp,
       Component,
       err,
       subscription,
@@ -89,6 +91,7 @@ export default class Router implements BaseRouter {
       pageLoader: any
       Component: ComponentType
       App: ComponentType
+      wrapApp: (App: ComponentType) => any
       err?: Error
     }
   ) {
@@ -117,6 +120,7 @@ export default class Router implements BaseRouter {
     this.asPath = as
     this.sub = subscription
     this.clc = null
+    this._wrapApp = wrapApp
 
     if (typeof window !== 'undefined') {
       // in order for `e.state` to work on the `onpopstate` event
@@ -581,6 +585,7 @@ export default class Router implements BaseRouter {
     const { Component: App } = this.components['/_app']
 
     const props = await loadGetInitialProps<AppContextType<Router>>(App, {
+      AppTree: this._wrapApp(App),
       Component,
       router: this,
       ctx,

packages/next-server/lib/utils.ts

@@ -99,8 +99,9 @@ export interface NextPageContext {
 
 export type AppContextType<R extends NextRouter = NextRouter> = {
   Component: NextComponentType<NextPageContext>
-  router: R
+  AppTree: NextComponentType
   ctx: NextPageContext
+  router: R
 }
 
 export type AppInitialProps = {

packages/next-server/server/render.tsx

@@ -20,7 +20,6 @@ import Head, { defaultHead } from '../lib/head'
 // @ts-ignore types will be added later as it's an internal module
 import Loadable from '../lib/loadable'
 import { DataManagerContext } from '../lib/data-manager-context'
-import { RequestContext } from '../lib/request-context'
 import { LoadableContext } from '../lib/loadable-context'
 import { RouterContext } from '../lib/router-context'
 import { DataManager } from '../lib/data-manager'
@@ -325,23 +324,33 @@ export async function renderToHTML(
   const reactLoadableModules: string[] = []
 
   const AppContainer = ({ children }: any) => (
-    <RequestContext.Provider value={req}>
-      <RouterContext.Provider value={router}>
-        <DataManagerContext.Provider value={dataManager}>
-          <AmpStateContext.Provider value={ampState}>
-            <LoadableContext.Provider
-              value={moduleName => reactLoadableModules.push(moduleName)}
-            >
-              {children}
-            </LoadableContext.Provider>
-          </AmpStateContext.Provider>
-        </DataManagerContext.Provider>
-      </RouterContext.Provider>
-    </RequestContext.Provider>
+    <RouterContext.Provider value={router}>
+      <DataManagerContext.Provider value={dataManager}>
+        <AmpStateContext.Provider value={ampState}>
+          <LoadableContext.Provider
+            value={moduleName => reactLoadableModules.push(moduleName)}
+          >
+            {children}
+          </LoadableContext.Provider>
+        </AmpStateContext.Provider>
+      </DataManagerContext.Provider>
+    </RouterContext.Provider>
   )
 
   try {
-    props = await loadGetInitialProps(App, { Component, router, ctx })
+    props = await loadGetInitialProps(App, {
+      Component,
+      AppTree: (props: any) => {
+        const appProps = { ...props, Component, router }
+        return (
+          <AppContainer>
+            <App {...appProps} />
+          </AppContainer>
+        )
+      },
+      router,
+      ctx,
+    })
   } catch (err) {
     if (!dev || !err) throw err
     ctx.err = err

packages/next/client/index.js

@@ -167,6 +167,7 @@ export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
     pageLoader,
     App,
     Component,
+    wrapApp,
     err: initialErr,
     subscription: ({ Component, props, err }, App) => {
       render({ App, Component, props, err, emitter })
@@ -211,13 +212,16 @@ export async function renderError (props) {
   // In production we do a normal render with the `ErrorComponent` as component.
   // If we've gotten here upon initial render, we can use the props from the server.
   // Otherwise, we need to call `getInitialProps` on `App` before mounting.
+  const appCtx = {
+    AppTree: wrapApp(App),
+    Component: ErrorComponent,
+    router,
+    ctx: { err, pathname: page, query, asPath }
+  }
+
   const initProps = props.props
     ? props.props
-    : await loadGetInitialProps(App, {
-      Component: ErrorComponent,
-      router,
-      ctx: { err, pathname: page, query, asPath }
-    })
+    : await loadGetInitialProps(App, appCtx)
 
   await doRender({ ...props, err, Component: ErrorComponent, props: initProps })
 }
@@ -256,6 +260,15 @@ function AppContainer ({ children }) {
   )
 }
 
+const wrapApp = App => props => {
+  const appProps = { ...props, Component, err, router }
+  return (
+    <AppContainer>
+      <App {...appProps} />
+    </AppContainer>
+  )
+}
+
 async function doRender ({ App, Component, props, err }) {
   // Usual getInitialProps fetching is handled in next/router
   // this is for when ErrorComponent gets replaced by Component by HMR
@@ -266,17 +279,19 @@ async function doRender ({ App, Component, props, err }) {
     lastAppProps.Component === ErrorComponent
   ) {
     const { pathname, query, asPath } = router
-    props = await loadGetInitialProps(App, {
-      Component,
+    const appCtx = {
       router,
+      AppTree: wrapApp(App),
+      Component: ErrorComponent,
       ctx: { err, pathname, query, asPath }
-    })
+    }
+    props = await loadGetInitialProps(App, appCtx)
   }
 
   Component = Component || lastAppProps.Component
   props = props || lastAppProps.props
 
-  const appProps = { Component, err, router, ...props }
+  const appProps = { ...props, Component, err, router }
   // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
   lastAppProps = appProps
 

packages/next/client/router.ts

@@ -2,7 +2,6 @@
 import React from 'react'
 import Router, { NextRouter } from 'next-server/dist/lib/router/router'
 import { RouterContext } from 'next-server/dist/lib/router-context'
-import { RequestContext } from 'next-server/dist/lib/request-context'
 
 type ClassArguments<T> = T extends new (...args: infer U) => any ? U : any
 
@@ -118,10 +117,6 @@ export function useRouter() {
   return React.useContext(RouterContext)
 }
 
-export function useRequest() {
-  return React.useContext(RequestContext)
-}
-
 // INTERNAL APIS
 // -------------
 // (do not use following exports inside the app)