NextJS Amplify: Data returns null on first page refresh, data shows up after fast refresh

Viewed 149

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>
    </>
  );
};
0 Answers
Related