How do I use my axios call for getStaticPaths and getStaticProps

[antonioOrtiz]

I have a component which renders the response (Successfully verified, Has been verified already, and this token has expired) from making a call to my server from clicking a link in a Account Verification email I sent after registering.

At very rare instances the UI would render, but the content for it wouldn't, so I was reading the Next docs regarding getStaticProps and getStaticPaths and figured pre-rendering is what i need \o/

Right now I am using the useEffect hook in the component:

function isConfirmationForm() {
  useEffect(() => {
    axios
      .get(`/users/confirmation/${match.params.token}`)
      .then(response => {
        if (response.status === 200) {
          setError(false);
          setResponseMessage(response.data.msg);
        }
      })
      .catch(function(error) {
        if (error.response.status === 404) {
          resetUserAcoountVerified();
          setResponseMessage(error.response.data.msg);
          setError(true);
        }
        if (error.response.status === 400) {
          userHasBeenVerified();
          setResponseMessage(error.response.data.msg);
          setError(true);
        }
      });
  }, []);

  const isNull = value => typeof value === 'object' && !value;
  return (
    <div className="login-form">
      {error === false ? (
        <Transition unmountOnHide={true} animation="scale" duration={duration}>
          <Message success header={responseMessage[0]} />
        </Transition>
      ) : (
        ''
      )}

      {accountNotVerified === false && error === true ? (
        <Transition unmountOnHide={true} animation="scale" duration={duration}>
          <Message error header={responseMessage[0]} />
        </Transition>
      ) : (
        ''
      )}
      {isNull(accountNotVerified) && error === true ? (
        <Transition unmountOnHide={true} animation="scale" duration={duration}>
          <Message error header={responseMessage[0]} />
        </Transition>
      ) : (
        ''
      )}
    </div>
  );
}

But what I want to do now is fill this bad-boy with pre-rendered data,

import ConfirmationPage from '../components/FormComponent/FormComponent.jsx';
import { withRouter } from 'react-router-dom';

const Confirmation = props => (
  <>
    <ConfirmationPage formType="Confirmation" {...props} />
  </>
);

export async function getStaticPaths() {
  return {
    paths: [
      { params: { token: match.params.token } } 
    ],
    fallback: false 
  };
}

export async function getStaticProps({ params }) {

  return { props: {.... } };
}

export default Confirmation;

I'm stuck at how to approach it because on the component level as you can see I've created some hooks which are reacting (ha!) to the axios call. I am not sure how to wire the getStaticProps Reading the docs it feels like you need to use getStaticPaths with it....

Any help would be appreciated!

[abhinandshetty]

You will have to move the API call in the getStaticProps and use isomorphic-unfetech instead of axios to fetch the data