使用 Apollo GraphQL 在 Next.js 应用程序上进行虚拟托管答案

【问题标题】：Virtual Hosting on Next.js app with Apollo GraphQL使用 Apollo GraphQL 在 Next.js 应用程序上进行虚拟托管
【发布时间】：2020-03-23 10:59:27
【问题描述】：

我有一个使用 Next.js 和 Apollo 制作的 webapp，如示例 with-apollo 所示。我想用我的 webapp（基于名称的虚拟主机）为多个域提供服务。不幸的是，ApolloClient 的 HttpLink 需要带有域的 absolute server URL，但这使得后端应用程序无法识别用户真正访问过的域。有没有办法根据实际请求使用动态 URL 配置 HttpLink 或使用相对 URL 或其他任何东西？

【问题讨论】：

我不明白为什么“带有域的绝对服务器 URL 但这使得后端应用程序无法识别用户真正访问过的域”
绝对 url 并不表示 url 必须是不可变字符串
表示 url 应包含协议、域和路径
你用的是什么后端？

标签： apollo next.js apollo-client

【解决方案1】：

当在服务器端调用时，传递给getInitialProps 的NextPageContext 对象包括req 对象。所以你可以这样做：

WithApollo.getInitialProps = async ctx => {
  const { AppTree, req } = ctx

  const linkBaseUrl = req ? req.protocol + '://' + req.get('host') : ''

  ...
}

然后，您可以将此基本 url 连同初始状态一起传递给 createApolloClient，并在您的 HttpLink 的 url 前面加上它。在客户端，这将在前面添加一个空字符串（您只需要服务器上的完整 URL）。

【讨论】：

【解决方案2】：

使用 Apollo Link 拦截查询并在上下文中设置 uri 属性

const authMiddleware = setContext((operation, { uri }) => {
  return refreshToken().then(res => ({
    uri: this.getURI()
  })
}))

或者使用 Angular 的 HttpClient 拦截器拦截请求并更改端点。

https://github.com/apollographql/apollo-angular/tree/master/packages/apollo-angular-link-http#options

来源：Updating uri of apollo client instance

【讨论】：