Fatal编程技术网
  • reactjs/
  • Reactjs 反应Apollo SSR getDataFromTree未等待查询

Reactjs 反应Apollo SSR getDataFromTree未等待查询

reactjs graphql

Reactjs 反应Apollo SSR getDataFromTree未等待查询,reactjs,graphql,react-apollo,apollo-client,server-side-rendering,Reactjs,Graphql,React Apollo,Apollo Client,Server Side Rendering,我正在尝试为我的React应用程序设置SSR，它使用Apollo客户端对API进行graphql请求。我已经正确设置了webpack配置和Express应用程序，我可以看到组件正在加载。这里的问题是getDataFromTree根本没有等待我的查询。它只返回带有加载：true的组件，然后不返回任何内容。我还设置了ssrForceFetchDelay，以使客户端重新提取查询，但什么也不做 我一直在得到窗口。uuuu阿波罗uuu状态{}。这些组件非常基本，可以进行简单的查询并显示结果 这是我的exp

我正在尝试为我的React应用程序设置SSR，它使用Apollo客户端对API进行graphql请求。我已经正确设置了webpack配置和Express应用程序，我可以看到组件正在加载。这里的问题是
getDataFromTree
根本没有等待我的查询。它只返回带有
加载：true
的组件，然后不返回任何内容。我还设置了
ssrForceFetchDelay
，以使客户端重新提取查询，但什么也不做

我一直在得到
窗口。uuuu阿波罗uuu状态{}
。这些组件非常基本，可以进行简单的查询并显示结果

这是我的express应用程序：

    app.use((req, res) => {
     const client = new ApolloClient({
     ssrMode: true,
     link: new HttpLink({
      uri: 'http://localhost:8000/graphql',
      fetch: fetch
     }),
     cache: new InMemoryCache(),
    });
    const app = (
     <ApolloProvider client={client}>
      <Router location={req.url} context={{}}>
        <App client={client}/>
      </Router>
     </ApolloProvider>
    );
   const jsx = extractor.collectChunks(app); // Using loadable

   renderToStringWithData(jsx).then((dataResp) => {   
    const content = dataResp;   
    const state = client.extract(); // Always {}
    const helmet = Helmet.renderStatic();
    const html = ReactDOMServer.renderToStaticMarkup(
      <Html content={content} helmet={helmet} assets={assets} state={state} />,
    );
    res.status(200); res.send(`<!doctype html>${html}`);
    res.end();
    }).catch(err => {
     console.log(`Error thrown`);
    }); 
   });

   app.listen(port, () => {
    console.log(`Server listening on ${port} port`);
   });
我的应用程序：

const Wrapped = () => {
    console.log(`Inside Wrapped`);
    return (
    <ApolloProvider client={apolloClient}> //The client one
        <Router>
            <App />  /*Only returns 2 basic components */
        </Router>
      </ApolloProvider>
    );
  };

  hydrate(<Wrapped />, document.getElementById('root'));
编辑：添加了我的HTML组件代码

链接到具有正常工作的基本代码的回购。我打算将Loadable添加到这个列表中，看看这是否是导致问题的原因

您正在使用的
Html
组件的代码是什么？@DanielRearden也为Html组件添加了代码。您仍然面临这个问题吗？我找不到在服务器上加载查询的方法。。。我在官方回购协议中发现有同样问题的人，但到目前为止没有任何效果。我升级到了阿波罗客户端：2.6.8和反应阿波罗：3.1.3，现在我使用的是
getDataFromTree
来自
“@apollo/react-ssr”
，工作正常。apollo提供者来自
@apollo/react common
。我还切换到在客户端和服务器上共享相同的Apollo客户端配置。我还必须确保所有这些包都是单例的，所以如果您使用的是组件库或其他东西，请确保所有东西都只使用这些包的一个版本。希望这里有帮助！ 
const Wrapped = () => {
    console.log(`Inside Wrapped`);
    return (
    <ApolloProvider client={apolloClient}> //The client one
        <Router>
            <App />  /*Only returns 2 basic components */
        </Router>
      </ApolloProvider>
    );
  };

  hydrate(<Wrapped />, document.getElementById('root'));

import React from 'react';

const Html = ({ content, helmet, assets, state }) => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <link rel="manifest" href="/manifest.json" />
        <link rel="shortcut icon" href="/favicon.ico" />
        {helmet.meta.toComponent()}
        {helmet.title.toComponent()}
        {assets.css &&
          assets.css.map((c, idx) => (
            <link key={idx} href={c} rel="stylesheet" />
          ))}
      </head>

      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root" dangerouslySetInnerHTML={{ __html: content }} />
        <script
          dangerouslySetInnerHTML={{
            __html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(
              /</g,
              '\\u003c',
            )};`,
          }}
        />
        {assets.js &&
          assets.js.map((j, idx) => (
            <script key={idx} src={j} />
          ))}
      </body>
    </html>
  );
};

export default Html;