Meteor/SSR/Apollo 客户端 - 尝试使用 Apollo 设置 SSR,但找不到全局获取
Meteor/SSR/Apollo client - Trying to set up SSR with Apollo and getting fetch is not found gloablly
我正在尝试通过使用 Apollo 的 meteor 应用设置服务器端渲染。我收到以下我无法解决的错误(即使在网上跟踪各种 post -github 和 SO - 并尝试使用不同的包:unfetch,node-fetch ...)
Error running template: Invariant Violation: fetch is not found
globally and no fetcher passed, to fix pass a fetch for your
environment like https://www.npmjs.com/package/node-fetch.
For example: import fetch from 'node-fetch'; import { createHttpLink }
from 'apollo-link-http';
服务器端代码如下:
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,但它也没有用。如果有人能帮助解决这个问题,我们将不胜感激。
在重新安装并删除了三次 unfetch 和 node-fetch 并将它们导入到任何地方后,我发现在我的测试过程中,我曾经也将 "fetch: fetch" 移到了 createHttpLink 之外,但仍在新的 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 客户端时从头开始。
我正在尝试通过使用 Apollo 的 meteor 应用设置服务器端渲染。我收到以下我无法解决的错误(即使在网上跟踪各种 post -github 和 SO - 并尝试使用不同的包:unfetch,node-fetch ...)
Error running template: Invariant Violation: fetch is not found globally and no fetcher passed, to fix pass a fetch for your environment like https://www.npmjs.com/package/node-fetch.
For example: import fetch from 'node-fetch'; import { createHttpLink } from 'apollo-link-http';
服务器端代码如下:
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,但它也没有用。如果有人能帮助解决这个问题,我们将不胜感激。
在重新安装并删除了三次 unfetch 和 node-fetch 并将它们导入到任何地方后,我发现在我的测试过程中,我曾经也将 "fetch: fetch" 移到了 createHttpLink 之外,但仍在新的 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 客户端时从头开始。