流星/ SSR / Apollo客户端-尝试使用Apollo设置SSR并无法获取信息

时间:2019-04-22 13:03:56

标签: meteor apollo react-apollo apollo-client ssr

我正在尝试使用使用Apollo的流星应用程序设置服务器端渲染。我遇到了以下错误,但我无法解决(即使在网上发表各种帖子-github和SO-并尝试使用不同的包:unfetch,node-fetch ...)

  

运行模板时出错:始终违反:未找到访存   全局且未传递任何访存程序,以修复为您传递的访存   https://www.npmjs.com/package/node-fetch之类的环境。

     

例如:从“ node-fetch”导入获取;导入{createHttpLink}   来自“ 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,它也不起作用。如果有人可以帮助解决此问题,将非常感谢。

1 个答案:

答案 0 :(得分: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} />));

});

必须承认S.O.的缩进表现不佳,这很难解决我的问题,但是在我的项目中还可以。我尝试了许多不同的事情,以至于忘记了创建Apollo客户端时要从头开始。