我正在尝试使用我的使用Apollo的meteor应用程序设置服务器端渲染。我收到以下错误,我无法解决(甚至跟随各种帖子在线-github和SO - 并尝试使用不同的包:unfetch,node-fetch ...)
运行模板时出错:不变违规:全局未找到提取且未通过任何提取程序,以修复为https://www.npmjs.com/package/node-fetch等环境提取的提取。
例如:从'node-fetch'导入fetch;从'apollo-link-http'导入{createHttpLink};
这是服务器端的代码:
import fetch from 'node-fetch';
import { Accounts } from 'meteor/accounts-base';
import { Meteor } from 'meteor/meteor';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import React from 'react';
import { routes } from './../both/router';
import Menu from './../../ui/Menu';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http'
import './apollo'; // THIS IS THE APOLLO SERVER CODE
onPageLoad((sink) => {
let App = props => (
<StaticRouter location={props.location}>
{routes}
</StaticRouter>
)
const client = new ApolloClient({
ssrMode: true,
link: createHttpLink({
uri: '/graphql',
credentials: 'same-origin',
headers: {
cookie: sink.request.cookies,
},
}),
fetch: fetch,
cache: new InMemoryCache(),
});
let AppToRender = props => (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
)
sink.renderIntoElementById('app', renderToString(<AppToRender location={sink.request.url} />));
});
我也从apollo-boost尝试了Apollo-Client,它也没用。如果有人可以帮助解决这个问题,我将非常感激。
在重新安装并删除三次unetch和node-fetch并将它们导入到处后我发现在我的测试期间我曾经在createHttpLink之外移动了“fetch:fetch”但仍然在客户端的新Apollo-Client内。
最后它适用于以下导入:
import fetch from 'unfetch';
import React from 'react';
import { Accounts } from 'meteor/accounts-base';
import { Meteor } from 'meteor/meteor';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import { routes } from './../both/router';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Menu from './../../ui/Menu';
import './email-templates';
import './apollo';
import './users';
以及在服务器端为SSR创建以下Apollo客户端:
onPageLoad((sink) => {
let App = props => (
<StaticRouter location={props.location}>
{routes}
</StaticRouter>
)
const client = new ApolloClient({
ssrMode: true,
link: createHttpLink({
uri: '/graphql',
credentials: 'same-origin',
headers: {
cookie: sink.request.cookies,
},
fetch: fetch,
}),
cache: new InMemoryCache(),
});
let AppToRender = props => (
<ApolloProvider client={client}>
<Menu />
<App />
</ApolloProvider>
)
sink.renderIntoElementById('app', renderToString(<AppToRender location={sink.request.url} />));
});
不得不承认S.O.的缩进没有很好地解决我的问题,但在我的项目中它很好。我尝试了很多不同的东西,我忘了从创建Apollo客户端开始回过头来。