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在客户端不存在

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

我做了一些研究，一种解决方案可能是在本地托管微服务，以便托管一个包含URI的JSON文件，如建议here那样。是否会有不需要过度杀伤力的解决方案？

Answer 1

通过在#nav-bar:hover + #app-content { display: none; }内添加隐藏的HTML标记来使其正常工作，如下所示：

<head>

将<p style={hidden} id="graphql_endpoint"> {process.env.GRAPHQL_ENDPOINT} </p>定义为hidden，然后在创建Apollo客户端时检索它，如下所示：

{ display: "none" }

向服务器端渲染的应用程序提供端点URI

1 个答案: