Клиент Meteor / SSR / Apollo - Попытка настроить SSR с Apollo и получение выборки не найдены глобально - PullRequest
1 голос
/ 22 апреля 2019

Я пытаюсь настроить рендеринг на стороне сервера с моим метеорным приложением, использующим Apollo.Я получаю следующую ошибку, которую мне не удается устранить (даже после различных публикаций в сети - github и SO - и пытаюсь использовать разные пакеты: unfetch, node-fetch ...)

Ошибка запускаtemplate: Invariant Violation: выборка не найдена глобально, и выборщик не передан, чтобы исправить передачу выборки для вашей среды, например https://www.npmjs.com/package/node-fetch.

Например: импортировать выборку из 'node-fetch';import {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-Client из apollo-boostи это тоже не сработало.Буду очень признателен, если кто-то может помочь с этой проблемой.

1 Ответ

1 голос
/ 23 апреля 2019

После переустановки и удаления еще трех раз извлечения и извлечения узлов и импорта их повсюду, я обнаружил, что во время теста я однажды также перемещал «fetch: fetch» ​​за пределы createHttpLink, но все еще внутри нового Apollo-Client на клиентеside.

Наконец, он работает со следующим импортом:

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';

и следующим созданием клиента Apollo на стороне сервера для SSR:

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.

...