Component does not receive props from getStaticProps when wrapped with HOC

Viewed 250

Can anyone help me with a thecnical question about next SSR and private routes? I have a page that use getStaticProps to be mounted by SSR and want to guarantee that only authorized users access then.

I tried getServerSideProps, but I can't use getServerSideProps with getStaticProps.

I also tried some HOCs implementations, but my page does not execute getStaticProps when it's wrapped by auth HOC component.

EDIT: Page called getStaticProps but don't receive updated data by getStaticProps. Only undefined on props.

My getStaticProps

export const getStaticProps: GetStaticProps = async context => {
  const { slug } = context.params;

  const response = await api.get<ICourse>(`course/${slug}`);
  const course = response.data;
  return {
    props: {
      course,
    },
    revalidate: 600,
  };
};

export default privateRoute(Course);

My HOC

function redirectToHome() {
  router.replace('/');
}
function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    state: { isLoading: boolean };

    constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
      };
    }
    async componentDidMount(): Promise<void> {
      if (!cookies.get(AUTH_TOKEN_COOKIE)) {
        redirectToHome();
      }
      try {
        const user = await AuthService.getUser();
        if (user?._id) {
          const permit = await permissionService.get(user._id);
          if (!permit) {
            redirectToHome();
          }
        }
      } catch (e) {
        console.log(e);
        redirectToHome();
      }
    }

    render() {
      const { isLoading } = this.state;
      return (
        <div>{isLoading ? <>Check permission</> : <WrappedComponent />}</div>
      );
    }
  };
}
export default privateRoute;
1 Answers

You need to pass the props from your HOC down to the <WrappedComponent />.

render() {
    const { isLoading } = this.state;
    return (
        <div>
            {isLoading ? <>Check permission</> : <WrappedComponent {...this.props} />}
        </div>
    );
}
Related