向服务器端呈现的应用程序提供端点 URI

Question

此代码初始化 Apollo 客户端以与 GraphQL 后端交互：

function create(initialState?: any) {
    const isBrowser = typeof window !== "undefined"
    return new ApolloClient({
        connectToDevTools: isBrowser,
        ssrMode: !isBrowser,
        link: new HttpLink({
            uri: "https://APPNAME.herokuapp.com/v1/graphql",
            credentials: "same-origin",
            fetch: !isBrowser && fetch
        }),
        cache: new InMemoryCache().restore(initialState || {})
    })
}

其中 APPNAME 替换为托管所述后端的 Heroku 应用程序的名称。但是，当作为简单字符串编写的 URI 被诸如 process.env.GRAPHQL_ENDPOINT 之类的环境变量替换时，请求不再发送到正确的 URI，而是发送到本地服务器上的 /graphql 端点。这肯定是由于该应用程序是服务器端呈现的 Next.js 应用程序造成的，因为请求有可能由客户端而不是服务器发送，并且 process 在客户端不存在-side.

因此问题是：应用程序从环境变量或服务器端托管的文件等获取端点 URI 的简单方法是什么？

我做了一些研究，一个解决方案可以在本地托管一个微服务，以便托管一个包含 URI 的 JSON 文件，如 here 所推荐的那样。是否有不需要这种矫枉过正的解决方案？

Answer 1

通过在 <head> 中添加一个隐藏的 HTML 标签使其工作，如下所示：

<p style={hidden} id="graphql_endpoint">
    {process.env.GRAPHQL_ENDPOINT}
</p>

将 hidden 定义为 { display: "none" }，然后在创建 Apollo 客户端时检索它，如下所示：

uri: isBrowser
    ? document.getElementById("graphql_endpoint").innerHTML
    : process.env.GRAPHQL_ENDPOINT,

向服务器端呈现的应用程序提供端点 URI

Providing endpoint URI to server-side rendered app

server-side-rendering