当我尝试在项目中添加srr时，我有一种无法理解的行为。似乎存在无限循环。这是无效的代码：
server.js
app.use((req, res) => {
const client = new ApolloClient({
ssrMode: true,
// Remember that this is the interface the SSR server will use to connect to the
// API server, so we need to ensure it isn't firewalled, etc
link: createHttpLink({
uri: 'http://localhost:4000/graphql',
credentials: 'same-origin',
headers: {
cookie: req.header('Cookie'),
},
}),
resolvers: {},
cache: new InMemoryCache(),
});
cacheManager.client = client
const context = {};
// The client-side App will instead use <BrowserRouter>
const App = (
<ApolloProvider client={client}>
<StaticRouter location={req.url} context={context}>
<ReactApp />
</StaticRouter>
</ApolloProvider>
);
// rendering code
getDataFromTree(App).then(() => {
// We are ready to render for real
const content = ReactDOM.renderToString(App);
const initialState = client.extract();
const html = <Html content={content} state={initialState} />;
res.status(200);
res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
res.end();
});
});
const port = process.env.PORT || 4000;
app.listen(port);
这是经过测试的代码，在我开始添加ssr特定代码之前，它们运行良好：
server.js
app.use('/graphql', auth, setFbToken,
function (err, req, res, next) {
if (err.code === 'invalid_token') return next();
return next(err);
},
graphqlHTTP((req, res, graphQLParams) => {
// console.log('trying if request is authorized (user:', req.user)
return {
schema: GraphQlSchema,
graphiql: true,
formatError,
context: {
user: req.user,
sessionID: req.sessionID
}
}
}
));
App.js
class App extends Component {
render() {
if (window != null) {
return (
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
{routes.map((route) => {
const { routeComp: RouteComp, path } = route
console.log("adding route : ", route.path)
return (
<RouteComp key={path} {...route} />
)
})}
</Switch>
</BrowserRouter>
</MuiThemeProvider>
);
} else {
console.log( "displaying app ", new Error() )
const history = createMemoryHistory();
return (
<MuiThemeProvider theme={theme}>
<Router history={history}>
<Switch>
{routes.map((route) => {
const { routeComp: RouteComp, path } = route
return (
<RouteComp key={path} {...route} />
)
})}
</Switch>
</Router>
</MuiThemeProvider>
)
}
}
}
在控制台中，我反复出现以下消息，但是在我的浏览器中，只有一个对服务器的请求：
displaying app Error:
at App.render (D:\work\weallyServer\server\src\client/App.js:52:36)
at processChild (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)
at resolve (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
at ReactDOMServerRenderer.render (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
at ReactDOMServerRenderer.read (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
at renderToStaticMarkup (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3661:27)
at process (D:\work\weallyServer\server\node_modules\react-apollo\react-apollo.cjs.js:1043:20)
displaying app Error:
at App.render (D:\work\weallyServer\server\src\client/App.js:52:36)
at processChild (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)
at resolve (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
at ReactDOMServerRenderer.render (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
at ReactDOMServerRenderer.read (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
at renderToStaticMarkup (D:\work\weallyServer\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3661:27)
at process (D:\work\weallyServer\server\node_modules\react-apollo\react-apollo.cjs.js:1043:20)
此外，在ApolloClient的配置中（请参见第一个代码部分），如果我没有向conf resolvers：{}，添加一个空的resolvers属性，则会出现以下错误，我不知道放置一个空的解析器是否正确或者是导致错误的原因
Found @client directives in query but no client resolvers were specified. You can now pass apollo-link-state resolvers to the ApolloClient constructor.
requested : /graphql
graphQl error : Cannot query field "name" on type "Query".
graphQl error stack: GraphQLError: Cannot query field "name" on type "Query".
at Object.Field (D:\work\weallyServer\server\node_modules\graphql\validation\rules\FieldsOnCorrectType.js:64:31)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Unknown directive "client".
graphQl error stack: GraphQLError: Unknown directive "client".
at Object.Directive (D:\work\weallyServer\server\node_modules\graphql\validation\rules\KnownDirectives.js:105:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Cannot query field "eid" on type "Query".
graphQl error stack: GraphQLError: Cannot query field "eid" on type "Query".
at Object.Field (D:\work\weallyServer\server\node_modules\graphql\validation\rules\FieldsOnCorrectType.js:64:31)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Unknown directive "client".
graphQl error stack: GraphQLError: Unknown directive "client".
at Object.Directive (D:\work\weallyServer\server\node_modules\graphql\validation\rules\KnownDirectives.js:105:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Cannot query field "previewId" on type "Query".
graphQl error stack: GraphQLError: Cannot query field "previewId" on type "Query".
at Object.Field (D:\work\weallyServer\server\node_modules\graphql\validation\rules\FieldsOnCorrectType.js:64:31)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Unknown directive "client".
graphQl error stack: GraphQLError: Unknown directive "client".
at Object.Directive (D:\work\weallyServer\server\node_modules\graphql\validation\rules\KnownDirectives.js:105:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Cannot query field "kind" on type "Query".
graphQl error stack: GraphQLError: Cannot query field "kind" on type "Query".
at Object.Field (D:\work\weallyServer\server\node_modules\graphql\validation\rules\FieldsOnCorrectType.js:64:31)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
graphQl error : Unknown directive "client".
graphQl error stack: GraphQLError: Unknown directive "client".
at Object.Directive (D:\work\weallyServer\server\node_modules\graphql\validation\rules\KnownDirectives.js:105:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:332:29)
at Object.enter (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:383:25)
at visit (D:\work\weallyServer\server\node_modules\graphql\language\visitor.js:250:26)
at validate (D:\work\weallyServer\server\node_modules\graphql\validation\validate.js:63:22)
at D:\work\weallyServer\server\node_modules\express-graphql\dist\index.js:139:52
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:8092) UnhandledPromiseRejectionWarning: Error: Network error: Response not successful: Received status code 400
at new ApolloError (D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:60:28)
at QueryManager.<anonymous> (D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1184:45)
at step (D:\work\weallyServer\server\node_modules\tslib\tslib.js:133:27)
at Object.next (D:\work\weallyServer\server\node_modules\tslib\tslib.js:114:57)
at D:\work\weallyServer\server\node_modules\tslib\tslib.js:107:75
at new Promise (<anonymous>)
at Object.__awaiter (D:\work\weallyServer\server\node_modules\tslib\tslib.js:103:16)
at __awaiter (D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1147:77)
at D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1627:17
at Array.forEach (<anonymous>)
at D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1626:18
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1621:22)
at D:\work\weallyServer\server\node_modules\apollo-client\bundle.esm.js:1127:47
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:8092) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:8092) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
如果我删除了ssr部分，那么从客户端来看一切正常，因此我的graphql查询没有错误。
还请注意，如果我用简单的
替换了const App = (
<ApolloProvider client={client}>
<div>Hi everybody</div>
</ApolloProvider>
);
没有循环，并且消息“大家好，我们已经返回到客户端”
您可以在以下网址进行测试：https://github.com/ziedHamdi/react-apollo-error-template
感谢您的帮助