使用 apollo 客户端从 nextjs 中的 getInitialProps 方法执行 graphQL 查询时 ECONNREFUSED答案

【问题标题】：ECONNREFUSED when using apollo client to do graphQL query from getInitialProps method in nextjs使用 apollo 客户端从 nextjs 中的 getInitialProps 方法执行 graphQL 查询时 ECONNREFUSED
【发布时间】：2019-06-21 23:45:37
【问题描述】：

遵循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 浏览器（如果适用） Chrome Next.js 版本：7.0.2 ApolloClient 版本：2.4.12l 附加上下文使用 Absinthe (Elixir+Phoenix) GraphQL API，指定网址：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;
  }
}

【问题讨论】：

标签： nginx graphql apollo-client next.js

【解决方案1】：

虽然回答晚了，但您应该提供有关后端 API 框架的更多信息，即您正在运行哪个框架？我相信前端是 nextjs。同样，我认为您的问题出在 nginx 配置上。请通过端口号而不是\location proxy_pass 您的网址，因为它们是两种不同的 Web 服务。试试这个配置，注意标题。还将您的操作系统配置为侦听端口 8030。

服务器 { 听 80；地点 / { proxy_pass http://client; proxy_pass_request_headers 开启； proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header 主机 $http_host; proxy_set_header X-Forwarded-Proto $scheme; 代理重定向关闭； } } 服务器 { 听8030；地点 / { proxy_pass http://api; proxy_pass_request_headers 开启； proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header 主机 $http_host; proxy_set_header X-Forwarded-Proto $scheme; 代理重定向关闭； } }

【讨论】：