Как передать сборщик ApolloClient ()?

Как я могу передать экземпляр node-fetch в ApolloClient(), импортированный из apollo-boost?

Задний план: У меня есть приложение React, которое отлично работает локально на сервере разработки. Однако, когда я развертываю Heroku, приложение вылетает и регистрирует следующее:

fetch is not found globally and no fetcher passed, to fix pass a fetch for
2018-07-10T07:36:43.494156+00:00 app[web.1]: Error:
2018-07-10T07:36:43.494158+00:00 app[web.1]: your environment like https://www.npmjs.com/package/node-fetch.
2018-07-10T07:36:43.494159+00:00 app[web.1]: 
2018-07-10T07:36:43.494160+00:00 app[web.1]: For example:
2018-07-10T07:36:43.494162+00:00 app[web.1]: import fetch from 'node-fetch';
2018-07-10T07:36:43.494163+00:00 app[web.1]: import { createHttpLink } from 'apollo-link-http';
2018-07-10T07:36:43.494164+00:00 app[web.1]: 
2018-07-10T07:36:43.494165+00:00 app[web.1]: const link = createHttpLink({ uri: '/graphql', fetch: fetch });
2018-07-10T07:36:43.494167+00:00 app[web.1]: at Object.checkFetcher (/app/node_modules/apollo-link-http-common/src/index.ts:175:11)
2018-07-10T07:36:43.494168+00:00 app[web.1]: at createHttpLink (/app/node_modules/apollo-link-http/src/httpLink.ts:44:3)
2018-07-10T07:36:43.494169+00:00 app[web.1]: at new HttpLink (/app/node_modules/apollo-link-http/src/httpLink.ts:238:11)
2018-07-10T07:36:43.494171+00:00 app[web.1]: at new DefaultClient (/app/node_modules/apollo-boost/src/index.ts:105:22)
2018-07-10T07:36:43.494172+00:00 app[web.1]: at Object.<anonymous> (/app/src/app/app.js:22:22)
2018-07-10T07:36:43.494173+00:00 app[web.1]: at Module._compile (module.js:652:30)
2018-07-10T07:36:43.494174+00:00 app[web.1]: at loader (/app/node_modules/babel-register/lib/node.js:144:5)
2018-07-10T07:36:43.494176+00:00 app[web.1]: at Object.require.extensions.(anonymous function) [as .js] (/app/node_modules/babel-register/lib/node.js:154:7)
2018-07-10T07:36:43.494177+00:00 app[web.1]: at Module.load (module.js:565:32)
2018-07-10T07:36:43.494178+00:00 app[web.1]: at tryModuleLoad (module.js:505:12)

Я почти уверен, что понимаю, что здесь происходит. Однако я не могу понять, как и где я должен передать fetch в моем текущем коде, поскольку я использую ApolloClient() и, таким образом, нигде не касаюсь createHttpLink(). Я пробовал передать его вместе с uri, но ничего не изменилось:

import React, { Component } from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import fetch from 'node-fetch';
/* Some trivial imports & code omitted */


const apolloClient = new ApolloClient({
  uri: process.env.NODE_ENV === 'production'
    ? 'http://recoverwww-dev.herokuapp.com/graphql' : 'http://localhost:1337/graphql',
  fetch,
});

class App extends Component {

  render() {
    return (
      <ApolloProvider client = {apolloClient}>
        <div id = "app">
          <Menu />
          <Header />
          <div id = "content">
            <Router />
          </div>
          <Footer />
        </div>
      </ApolloProvider>
    );
  }
}

Возможно ли это вообще сделать с помощью ApolloClient() или мне следует полностью изменить мою реализацию? Спасибо!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
1 425
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

встроенная загрузка браузера, но не сервер. попробуй это:

import { createHttpLink } from 'apollo-link-http';
import fetch from 'node-fetch';

const link = createHttpLink({
      fetch,
      uri: 'uri',
    });

или это:

import { HttpLink } from 'apollo-boost'
import fetch from 'isomorphic-fetch'

const link = new HttpLink({
  fetch
})

Это то, что говорится в сообщении об ошибке и в документации Apollo. Однако я не могу понять, где передать fetch, поскольку я нигде не использую createHttpLink(). Итак, вопрос в том, могу ли я каким-то образом передать сборщик на ApolloClient() или <ApolloProvider> или мне нужно изменить свой подход? Я отредактирую исходный пост для ясности позже. Спасибо!

basse 10.07.2018 12:04
Ответ принят как подходящий

Компонент ApolloClient из apollo-boost нельзя использовать, если необходимо использовать пользовательский сборщик. Затем необходимо создать компонент с помощью пакета apollo-client. Приведенный ниже код вставлен из документации Apollo с добавленным node-fetch.

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';
import fetch from 'node-fetch';


const uri = 'address';


export default new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
          console.info(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.info(`[Network error]: ${networkError}`);
    }),
    new HttpLink({
      uri,
      credentials: 'same-origin',
      fetch,
    })
  ]),
  cache: new InMemoryCache()
});

Другие вопросы по теме