Question

我有一个带有React和Apollo Client的Next.JS应用，当部署到Heroku时，它表现得很奇怪。符合我所见的唯一解释是Heroku配置变量设置得还不够早，无法进行服务器端渲染。

我设置了一个名为API_URL（这是GraphQL API的地址）的配置变量，并在设置Apollo Client时使用它，例如：

import withApollo from "next-with-apollo";
import ApolloClient, { InMemoryCache } from "apollo-boost";

export default withApollo(({ ctx, headers, initialState }) => {

  // Logging to double check the API_URL
  console.log(`process.env.API_URL: ${process.env.API_URL}`);

  return new ApolloClient({
    uri: process.env.API_URL,
    cache: new InMemoryCache().restore(initialState || {})
  });
});

然后_app.tsx用withApollo组件包装，如下所示：

// ...imports

class MyApp extends App {
  render() {
    const { Component, pageProps, apollo } = this.props;
    return (
      <Container>
        <ApolloProvider client={apollo}>
          <ThemeProvider theme={theme}>
            <Component {...pageProps} />
          </ThemeProvider>
        </ApolloProvider>
      </Container>
    );
  }
}

export default withApollo(MyApp);

全部根据next-with-apollo上的示例设置。

这一切都可以在localhost上正常运行，但是在Heroku上运行时会遇到一堆501错误。设置了Heroku配置var API_URL （我对Heroku仪表板进行了三遍检查）。

在withApollo中添加的日志显示process.env.API_URL是localhost上的期望值，而undefined是在Heroku上运行时的期望值。

我还尝试使用Next.JS getInitialProps函数执行服务器端渲染并获得相同的结果，控制台记录Heroku config var显示控制台始终为undefined。

页面加载后发出的请求根本不显示此行为。

最后，当在各处使用默认值作为配置值时，例如uri = process.env.API_URL || "https://hardcoded.url/"一切都像魅力。

我不应该期望它起作用吗？在我看来，Heroku只是在设置服务器端渲染时没有及时设置配置变量来使用它们？

在使用Next.JS和Apollo Client进行服务器端渲染期间，heroku config var未定义

0 个答案: