ECONNREFUSED при использовании клиента apollo для выполнения запроса graphQL из метода getInitialProps в nextjs - PullRequest
Новая
       34

ECONNREFUSED при использовании клиента apollo для выполнения запроса graphQL из метода getInitialProps в nextjs

0 голосов
/ 29 января 2019

Следование примеру with-apollo-auth Успешное поведение при выполнении запроса ApolloConsumer на стороне клиента.Я передаю клиенту и запрос работает.

Неудачное поведение, когда я пытаюсь выполнить запрос на стороне сервера через getInitialProps.Я передаю клиент через обработчик, который вызывает тот же запрос, и я получаю сообщение об ошибке ECONN, как показано ниже.

enter image description here

Шаги для воспроизведенияповедение:

Я настроил свой ApolloClient в файле init-apollo следующим образом: 

  const httpLink = createHttpLink({
    uri: 'http://localhost:8080/api/graphql',
    credentials: 'same-origin'
  })

  const authLink = setContext((_, { headers }) => {
    const token = getToken()
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : ''
      }
    }
  })

  return new ApolloClient({
    connectToDevTools: process.browser,
    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
    link: ApolloLink.from([ authLink, httpLink ]),
    cache: new InMemoryCache().restore(initialState || {})
  })

Я настроил свой запрос следующим образом: 

import gql from 'graphql-tag'

export default apolloClient => {
  apolloClient
    .query({
      query: gql`
        {
          getUser {
            id
          }
        }
      `
    })
    .then(({data}) => {
      console.log(data);
      return { userDetails: data.getUser }
    })
    .catch((err) => {
      // Fail gracefully
      console.log(err);
      return { userDetails: {} }
    })
  }

Я настроил свою функцию getInitialProps в файле index.js в каталоге страниц: 

  import getUser from '../shared/services/get-user';

  static async getInitialProps (context) {
    const results = await getUser(context.apolloClient)
    console.log(results);
    return {}
  }

Ожидаемое поведение Я ожидаю увидеть возвращенный журнал пользователя, однако получаюошибка ECONNREFUSED, как показано выше.

Информация о системе ОС: MacOS Mojave Browser (если применимо) Chrome Версия Next.js: 7.0.2 Версия ApolloClient: 2.4.12l Дополнительный контекст Использование Absinthe (Elixir + Phoenix)API GraphQL, указанный URL: http://localhost:8080/api/graphq Использование docker-compose для раскрутки нескольких контейнеров.API и клиент NextJS находятся в отдельных контейнерах, расположенных за сервером nginx.Сервер Nginx направляет к соответствующему контейнеру в зависимости от указанной конечной точки URL. ЭТО МОЖЕТ ОЧЕНЬ ХОРОШО БЫТЬ ПРОБЛЕМОЙ, НО Я НЕ МОГУ ВИДЕТЬ, ЧТОБЫ НАЙТИ РЕШЕНИЕ ДЛЯ ЭТОГО. Если url содержит api, клиент будет перенаправлен в мой контейнер API.

Вот настройкидля моей конфигурации nginx: 

upstream client {
  server client:3000;
}

upstream api {
  server api:4000;
}

server {
  listen 80;

  location / {
    proxy_pass http://client;
  }

  location /sockjs-node {
    proxy_pass http://client;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
  }

  location /api {
    rewrite /api/(.*) /$1 break;
    proxy_pass http://api;
  }
}

1 Ответ

0 голосов
/ 25 июля 2019

Несмотря на то, что вы ответили поздно, вам следовало бы дать больше информации о вашей структуре backend-api, то есть какую платформу вы используете?Я верю, что интерфейс - это следующая.Тем не менее, ваша проблема в конфигурации nginx.Пожалуйста, proxy_pass ваш URL через номер порта, а не \location, потому что это две разные веб-службы.Попробуйте эту конфигурацию, обратите внимание на заголовки.Также настройте свою ОС на прослушивание порта 8030. 


server {
  listen 80;

  location / {
    proxy_pass http://client;
    proxy_pass_request_headers on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
  }
}

server {
  listen 8030;

  location / {
    proxy_pass http://api;
    proxy_pass_request_headers on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
  }
}
...