Meteor/s-s-r/Apollo 客户端 - 尝试使用 Apollo 设置 s-s-r 并没有找到 fetch

Posted 2023-03-10

【中文标题】Meteor/s-s-r/Apollo 客户端 - 尝试使用 Apollo 设置 s-s-r 并没有找到 fetch

【英文标题】：Meteor/s-s-r/Apollo client - Trying to set up s-s-r with Apollo and getting fetch is not found gloablly

【发布时间】：2019-09-11 16:11:26

【问题描述】：

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

错误运行模板：不变违规：未找到提取 全局且没有 fetcher 传递，修复传递 fetch 为您的 像https://www.npmjs.com/package/node-fetch这样的环境。

例如：import fetch from 'node-fetch';导入 创建HttpLink 来自'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(
        s-s-rMode: 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，但它也不起作用。如果有人可以帮助解决这个问题，将不胜感激。

【参考方案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';

以及在服务器端为 s-s-r 创建以下 Apollo 客户端：

onPageLoad((sink) => 
    let App = props => (
        <StaticRouter location=props.location>
            routes
        </StaticRouter>
    )

    const client = new ApolloClient(
       s-s-rMode: 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 客户端的开始。