Question

我对同构js应用程序有一些问题，也许您可以帮助我。我遵循了本教程：关于https://www.apollographql.com/docs/react/features/server-side-rendering.html的SSR，它基本上可以正常工作。初始请求正确呈现，因此很好。正是缓存使我头疼……每当我调用client.extract()时，它只会返回一个空对象，因此，由于缓存为空，因此一旦客户端代码启动，我完美呈现的页面就会重新呈现。在这一点上，我完全不知道为什么它不起作用。我什至看了一个Githunt示例，但是除了程序包版本的差异之外，我所用的代码基本上与我的应用程序相同。

我使用的堆栈：

使用mongodb，graphql-server和同构应用程序的Docker组成
Razzle作为同构应用程序的框架
样式化的组件

软件包版本：

"dependencies": {
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link-http": "^1.5.4",
    "compression": "^1.7.2",
    "connect-mongo": "^2.0.1",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "isomorphic-fetch": "^2.2.1",
    "morgan": "^1.9.0",
    "razzle": "^2.2.0",
    "react": "^16.4.1",
    "react-apollo": "^2.1.8",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1",
    "styled-components": "^3.3.3"
  }

我试图解决的问题：

删除样式化的组件
使用getDataFromTree代替renderToStringWithData
删除docker组合并在本地运行（Mac OS）
将软件包版本更改为Githunt示例中的版本

服务器上的客户端初始化：

const client = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: 'http://server:5000/graphql',
        fetch: fetch,
        credentials: 'include',
        headers: {
          cookie: req.header('Cookie'),
          origin: 'frontend:5000'
        },
      }),
      cache: new InMemoryCache()
    });

在客户端，缓存工作正常。

Answer 1

好的，我发现了问题。错误是我在App组件内部而不是客户端入口点（在Razzle中为{client.js）上初始化了客户端Apollo客户端。所以我基本上是这样的：

<ApolloProvider client={client}>
  <StaticRouter context={context} location={req.url}>
    // <App>
    <ApolloProvider client={client}>
      ...
    </ApolloProvider>
    // </App>
  </StaticRouter>
</ApolloProvider>

内部提供者（客户端）拦截了该查询，因此服务器端提供者没有触发（当然）导致服务器端缓存为空。

我不知道我是否是唯一一个偶然发现该问题的人，但如果不是，希望对您有所帮助：）

Answer 2

我遇到了同样的问题。也许您正在使用apollo-client v3并使用import { getDataFromTree, renderToStringWithData} from '@apollo/react-ssr'; 尝试import {getDataFromTree, renderToStringWithData} from '@apollo/client/react/ssr'; 它帮助了我。更多信息，请点击https://github.com/apollographql/react-apollo

服务器端使用Apollo GraphQL和React在同构应用中呈现请求后，清空缓存

2 个答案: