Virtual Hosting on Next.js app with Apollo GraphQL

Question

I have a webapp made with Next.js and Apollo as show in example with-apollo. I want to serve multiple domains with my webapp (name-based virtual hosting). Unfortunately HttpLink of ApolloClient requires absolute server URL with domain but this makes backend app unable to recognize domain which user really visited. Is there a way to configure HttpLink with a dynamic URL based on real request or use relative URL or anything else?

Answer 1

Either use an Apollo Link to intercept the query and set uri property on the context

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

Or intercept the request with Angular's HttpClient interceptor and change the endpoint.

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

Source: Updating uri of apollo client instance

Answer 2

The NextPageContext object passed to getInitialProps includes the req object when called on the server-side. So you can do something like:

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

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

  ...
}

You can then pass this base url down to createApolloClient along with the initial state and prepend your HttpLink's url with it. On the client side, this will prepend an empty string (you only need the full URL on the server).