Meteor/SSR/Apollo 客户端 - 尝试使用 Apollo 设置 SSR 并且无法全局找到获取

Question

我正在尝试使用我的使用 Apollo 的流星应用程序设置服务器端渲染。 我收到了以下我无法解决的错误（即使遵循各种在线帖子 -github 和 SO - 并尝试使用不同的包：unfetch、node-fetch ...）

运行模板时出错：Invariant Violation: fetch is not found global and no fetcher passed, to fix pass a fetch for your environment like https://www.npmjs.com/package/node-fetch 。

例如： import fetch from 'node-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，但它也没有用。 如果有人可以帮助解决这个问题，将不胜感激。

Answer 1

在重新安装和删除三次 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} />));

});

不得不承认 SO 上的缩进没有很好地显示出这更难解决我的问题，但在我的项目中很好。 我尝试了很多不同的东西，以至于在创建 Apollo Client 时忘记从头开始。