When I refresh the page, I return an error that the data is null, but if I make a change in my app and save, the page does a fast refresh build and then data comes out. Why is this happening? Is it because my data is not coming through getStaticProps or something?
const Activations = () => {
const [activations, setActivations] = useState([]);
const [studentId, setStudentId] = useState(null);
useEffect(() => {
getStudentId();
fetchActivations();
}, []);
async function getStudentId() {
try {
const user = await Auth.currentAuthenticatedUser();
setStudentId(user.attributes.sub);
} catch (err) {
console.log("error: getting user ", err);
}
}
async function fetchActivations() {
try {
const activationData = await API.graphql({
query: activationsByStudentId,
variables: {
studentId: studentId,
},
});
setActivations(activationData.data.activationsByStudentId.items);
} catch (err) {
console.log("error getting ativations", err);
}
}
return (
<>
<h1 className="mb-5">Activations</h1>
<div className="divide-y divide-gray-200">
<Link href="/activations/create">
<a>New Activation</a>
</Link>
{activations.map((activation, index) => (
<Link key={index} href={`/activations/${activation.id}`}>
<a className="flex py-2 ">{activation.title}</a>
</Link>
))}
</div>
</>
);
};