Apollo GraphQl renderToStringWithData 在服务器运行后总是相同的数据

Posted 2023-03-08

【中文标题】Apollo GraphQl renderToStringWithData 在服务器运行后总是相同的数据

【英文标题】：Apollo GraphQl renderToStringWithData always same data after server run

【发布时间】：2018-06-02 10:07:34

【问题描述】：

我刚刚使用 apollo Graphql 为 s-s-r 创建了一个 expressJs 服务器。 我有这个问题：页面启动后，页面的来源是预期的，但在服务器运行之前，Graphql 获取的数据永远不会改变。

这是我在页面源代码中的内容：

我目前正在使用http://fake.graphql.guru/graphql 获取一些模拟数据，并且数据会随机更改为每个请求。

按照expressjs的代码和apolloClient的配置

// express js
app.get('*', (req, res, next) => 
  renderToStringWithData(<StaticRouter location=req.url context=><App /></StaticRouter>).then((content) => 
  const initialState = client.extract();
  res.status(200);
  res.setHeader('Cache-Control', 'no-cache');
  res.send(Template(
    content,
    state: initialState,
  ));
  next();
  );
);

// apollo client
const client = new ApolloClient(
  s-s-rMode: true,
  link: new HttpLink(
    fetch,
    uri: 'http://fake.graphql.guru/graphql',
  ),
  cache: new InMemoryCache().restore(process.env.NODE_ENV !== 'PROD' ? 
    window.__APOLLO_STATE__ : null),
  defaultFetchPolicy: 'network-only',
  s-s-rForceFetchDelay: 100,
);

所以我对每个请求的期望是服务器返回一个带有新数据的新 html 页面。怎么了？

【问题讨论】：

这里是github代码如果有人想看看github.com/kenta88/graphqlMockApp/tree/server_side_rendering

【参考方案1】：

我找到了解决方案： 为了为每个请求重置客户端的缓存，只需调用 client.resetStore()

app.get('*', (req, res, next) => 
// reset the client cache
client.resetStore();
renderToStringWithData(<StaticRouter location=req.url context=>
<ReactApp /></StaticRouter>).then((content) =>  // eslint-disable-line
  const initialState = client.extract();
  res.status(200);
  res.setHeader('Cache-Control', 'no-cache');
  res.send(Template(
    content,
    state: initialState,
  ));
  next();
  );
);