Question

NextJS中的getInitialProps方法有问题。它从未被调用。这是一个项目，其中某些页面有Apollo GraphQL个客户端，另一些页面有getInitialProps个客户端。我不确定如何正确配置它们才能正常工作。

Apollo正常工作，并且可以按需获取数据。问题是没有调用getInitialProps。

这是我的自定义_app.js文件

const App = ({ Component, pageProps, apollo }) => {
  return (
    <ApolloProvider client={apollo}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

const API_URL =
  process.env.NODE_ENV === "development"
    ? "http://localhost/wordpress/index.php?graphql"
    : "https://page/index.php?graphql"

export default withApollo(({ initialState }) => {
  return new ApolloClient({
    link: new createHttpLink({
      uri: API_URL,
      fetch: fetch
    }),
    cache: new InMemoryCache()
  })
})(App, { getDataFromTree })

这就是我在页面上如何呼叫getInitialProps

Coupons.getInitialProps = async function() {
  const res = await fetch('http://localhost:8000/data/');
  const data = await res.json();

  console.log(`Data fetched. Count: ${data.length}`);

  return {
    shows: data.map(entry => entry.show)
  };
};

也。我拥有Apollo的数据获取页面不需要称为REST API。 Apollo页和REST页完全不同

Answer 1

以下https://github.com/zeit/next.js/tree/canary/examples/with-apollo上的文档已解决此问题

问题是我将整个_app包装在Apollo提供程序中，正确的方法是只包装需要Apollo的页面。

需要getInitialProps的其他对象应保持原样，并在其中调用REST API。

在NextJS中从未调用过getInitialProps

1 个答案: