next.js - Next.js Amplify Serverless AppSync graphql（放大错误）

Question

我正在尝试创建一个将 Amplify 和 AppSync 与 Next.js 一起使用的应用程序。

我能够成功部署应用程序，但是当我尝试访问应用程序时（尝试从 AppSync 获取数据）它失败了。

我有点失去了需要查看的内容，该应用程序似乎在本地运行良好，但是当我在 AWS 上发布它时它失败了。

我收到错误：TypeError: Cannot read property 'getName' of undefined //quotes.js

import { Connect } from 'aws-amplify-react';
........
<Connect
query={graphqlOperation(queries.getName)}
subscription={graphqlOperation(subscriptions.onCreateName)}
onSubscriptionMsg={(prev, { onCreateName }) => ({
...prev,
getName: {
...prev.getName,
items: [
...prev.getName.items,
onCreateName,
],
},
})}

>

有没有人遇到过这样的问题或任何想法来解决这个问题？提前致谢。

Answer 1

在执行 SSR 时运行订阅不需要/有用，并且需要服务器中的 WebSocket 客户端，您可以尝试不使用 SSR 的动态导入以使订阅仅发生在客户端上。（使用{ ssr: false }）

import dynamic from 'next/dynamic';

const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), { ssr: false });

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  );
}

export default Home;