GraphQL / Aphrodite / Razzle - SSR

Я реализовал приложение реакции Graphql Server Side Rendered (razzle). Мы получаем неустойчивую ошибку, не можем автоматически буферизоваться без документа при загрузке приложения. Кажется, это проблема, когда apollow получает данные из дерева и пытается скомпилировать стили в этой точке.

Предложенный метод должен был вызвать следующее:

StyleSheetTestUtils.suppressStyleInjection();
await getDataFromTree(WrappedApp);
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();

Но выполнение этого дает временную ошибку. Перепробовал другую технику, но не хватило вариантов. Запрос на получение сервера показан ниже.

server.get("/*", async (req, res, next) => {
  try {
    const client = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: process.env.RAZZLE_GQL_HOST,
        fetch: fetch
      }),
      cache: new InMemoryCache()
    });

    const context = {};
    const WrappedApp = (
      <ApolloProvider client={client}>
          <StaticRouter location={req.url} context={context}>
            <App />
          </StaticRouter>
      </ApolloProvider>
    );

    await getDataFromTree(WrappedApp);

    let metaHeader = Helmet.renderStatic();

    const { html, css } = StyleSheetServer.renderStatic(() =>
      renderToStaticMarkup(WrappedApp)
    );

    if (context.url) {
      return res.redirect(context.url);
    } else {
      return res.status(200).send(
        `<!doctype html>
            <html ${metaHeader.htmlAttributes.toString()}>
              <head>
                  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <style data-aphrodite>${css.content}</style>
                  ${
                    assets.client.css
                      ? `<link rel="stylesheet" href="${assets.client.css}">`
                      : ""
                  }

                  ${
                    process.env.NODE_ENV === "production"
                      ? `<script src="${assets.client.js}" defer></script>`
                      : `<script src="${
                          assets.client.js
                        }" defer crossorigin></script>`
                  }

                  ${metaHeader.title.toString()}
              </head>
              <body>
                  <div id="root">${html}</div>
              </body>
              <script>
                window.__APHRODITE_STATE__=${JSON.stringify(
                  css.renderedClassNames
                )}
                window.__APOLLO_STATE__=${JSON.stringify(
                  client.cache.extract()
                )};
              </script>
          </html>`
      );
    }
  } catch (err) {
    return next(err);
  }
});
Источник

0 ответов

Другие вопросы по тегам