使用Nextjs实现graphql查询和身份验证的正确方法

Question

我是Nextjs的新手。我正在用graphql查询测试身份验证。

下面的代码工作正常。我能够保护该页面，使其仅对经过身份验证的用户可用，并且还能够成功查询我的后端服务器以显示项目列表

但是，我做对了吗？由于使用SSR涉及服务器和客户端，因此我想了解一下我的以下实现方法是否正确。如果我的实现错误，请欣赏指针，以便我可以做正确的事

class Items extends React.Component {
  static async getInitialProps(context) {
    const { loggedInUser } = await checkLoggedIn(context.apolloClient);

    if (!loggedInUser.me) {
      // if not logged in, send to signin page
      redirect(context, "/signin");
    }

    return {
      user: loggedInUser.me
    };
  }

  render() {
    console.log(this.props);
    const {
      getItems: { getItemsByVendorId }
    } = this.props;
    return (
      <Layout>
        <div>Items</div>
        {getItemsByVendorId &&
          getItemsByVendorId.map(x => (
            <div key={x._id}>
              <p>{x.name}</p>
            </div>
          ))}
      </Layout>
    );
  }
}

export default graphql(GET_ITEMS_BY_VENDORID, {
  name: "getItems",
  options: ({ user }) => ({
    variables: {
      vendorId: user._id
    }
  })
})(Items);