nginx - 使用 apollo 客户端从 nextjs 中的 getInitialProps 方法执行 graphQL 查询时出现 ECONNREFUSED

Question

在 with-apollo-auth 之后例子执行客户端 ApolloConsumer 查询时的成功行为。我通过客户端并查询工作。

当我尝试通过 getInitialProps 进行服务器端查询时出现不成功行为。我通过调用相同查询的处理程序传递客户端，我收到 ECONN 拒绝错误，如下所示。

重现该行为的步骤:

我在 init-apollo 文件中设置我的 ApolloClient 如下:

  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: {} }
    })
  }

我在 pages 目录中的 index.js 文件中设置了我的 getInitialProps 函数:

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

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

预期行为我希望看到返回的用户日志，但是我收到如上所示的 ECONNREFUSED 错误。

系统信息操作系统:macOS Mojave浏览器(如果适用)ChromeNext.js 版本:7.0.2ApolloClient 版本:2.4.12l附加上下文使用 Absinthe (Elixir+Phoenix) GraphQL API，指定 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;
  }
}

Answer 1

虽然回答晚了，但您应该提供有关后端 API 框架的更多信息，即您正在运行哪个框架？我相信前端是 nextjs。尽管如此，我认为您的问题出在 nginx 配置上。请通过端口号而不是 \location proxy_pass 您的 url，因为它们是两种不同的网络服务。试试这个配置，注意标题。同时将您的操作系统配置为监听端口 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;  }}