react-helmet-async Helmet context is always empty when head is rendered

Helmet context is always empty when head is rendered

Open reduxdj opened this issue 5 years ago • 4 comments

Following the example, awaiting my dataFromTree, the helmet is always empty. Every time, no matter how trivial the data, the helmet components.toString are always undefined. The following is based on Koa 2.0

export function createReactHandler(css = [], scripts = [], chunkManifest = {}) {
  return async function reactHandler(ctx) {
    const sheet = new ServerStyleSheet()
    try {
      const routeContext = {}
      const components = (
        <StyleSheetManager sheet={sheet.instance}>
          <ApolloProvider store={ctx.store} client={ctx.apollo.client}>
            <HelmetProvider context={helmetContext}>
              <StaticRouter location={ctx.request.url} context={routeContext}>
                <App />
              </StaticRouter>
            </HelmetProvider>
          </ApolloProvider>
        </StyleSheetManager>
      )
      const state = ctx.store.getState()
      const frontend = sheet.collectStyles(components)
      await getDataFromTree(components)

      if ([301, 302].includes(routeContext.status)) {
        ctx.status = routeContext.status
        ctx.redirect(routeContext.url)
        return
      }
      if (routeContext.status === 404) {
        if (config.handler404) {
          config.handler404(ctx)
          return
        }
        ctx.status = routeContext.status
      }
      const combinedStream = CombinedStream.create()
      const {helmet} = helmetContext
      combinedStream.append(stringToStream(`<!DOCTYPE html>${getHeader({css,
        state,
        scripts,
        chunkManifest,
        window: {webpackManifest: chunkManifest},
        metaTags:
          helmet.title.toString() +
          helmet.meta.toString() +
          helmet.link.toString()})}`))
      const stream = sheet.interleaveWithNodeStream(renderToNodeStream(frontend))
      combinedStream.append(stream)
      combinedStream.append(stringToStream(getFooter({scripts, state})))
      ctx.type = 'text/html'
      ctx.body = combinedStream
    } finally {
      Object.seal(sheet) // https://github.com/styled-components/styled-components/issues/1624 mem leak on 404
    }
  }
}