How to make pagination work? Async await function in vue.js 3 setup

Question

I was trying to make an app which lists a user's repositories from github using github API, however I'm having a big problem with fetching data from all pages (so far I can only get repos from one page). I tried to fix it by using an async/await function (instead of Promise), but it's also my first time using vue3 and I have no idea how to have a function inside of the setup() method.
The current code is here: https://github.com/agzpie/user_repos
My try at using async/await, which didn't work:

import ListElement from "./components/ListElement";
import { ref, reactive, toRefs, watchEffect, computed } from "vue";
export default {
  name: "App",

  components: {
    ListElement,
  },

  setup() {
    const name = ref(null);
    const userName = ref(null);
    const state = reactive({ data: [] });
    let success = ref(null);
    const userNameValidator = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i;
    const split1 = reactive({ spl1: [] });
    const split2 = reactive({ spl2: [] });
    async function myFetch() {};

    /*
     * Check for input in the form and then fetch data
     */
    watchEffect(() => {
      if (!userName.value) return;

      if (!userNameValidator.test(userName.value)) {
        console.log("Username has invalid characters");
        return;
      }

      let hasNext = false;
      state.data = [];
      do {
        async function myFetch() {
          let url = `https://api.github.com/users/${userName.value}/repos?per_page=5`;
          let response = await fetch(url);
          if (!response.ok) {
            success.value = false;
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          success.value = true;
          // check response.headers for Link to get next page url
          split1.spl1 = response.headers.get("Link").split(",");
          let j = 0;
          while (j < split1.spl1.length) {
            split2.spl2[j] = split1.spl1[j].split(";");
            console.log(split2.spl2[j][0]);
            console.log(split2.spl2[j][1]);
            if (split2.spl2[j][1].includes("next")) {
              let urlNext = split2.spl2[j][0].replace(/[<>(\s)*]/g, "");
              console.log(urlNext);
              url = urlNext;
              hasNext = true;
              break;
            } else {
              hasNext = false;
            }
            j++;
          }

          // second .then
          let myData = await response.json();
          state.data.push(...myData);
          console.log("data", myData);
          name.value = "";
        }

        myFetch().catch((err) => {
          if (err.status == 404) {
            console.log("User not found");
          } else {
            console.log(err.message);
            console.log("oh no (internet probably)!");
          }
        });
      } while (hasNext);
    });

    // Sort list by star count
    const orderedList = computed(() => {
      if (state.data == 0) {
        return [];
      }
      return [...state.data].sort((a, b) => {
        return a.stargazers_count < b.stargazers_count ? 1 : -1;
      });
    });

    return {
      myFetch,
      success,
      isActive: true,
      name,
      userName,
      ListElement,
      ...toRefs(state),
      orderedList,
    };
  },
};

Any help would be highly appreciated

Answer 1

The call to myFetch() near the end is a call to an async function without an await, so it is effectively going to loop (if hasNext was initialized to true, but it isn't) without waiting for it to complete.

You should probably change that line to await myFetch() and wrap it all with a try/catch block.

I also don't really care for the way you're directly updating state inside the async myFetch call (it could also be doing several of those if it looped) and perhaps it should be returning the data from myFetch instead, and then you can use let result = await myFetch() and then make use of that when it returns.

Also, instead of awaiting myFetch() result, you could not await it but push it onto a requests array and then use await Promise.all(requests) outside the loop and it is one operation to await, all requests running in parallel. In fact, it should probably be await Promise.allSettled(requests) in case one of them fails. See allSettled for more.

But also I wonder why you're reading it paged if the goal is to fetch them all anyway? To reduce load on the server? If that is true, issuing them paged but in parallel would probably increase the load since it will still read and return all the data but require multiple calls.