4

I want to fetch the data from all the projects hosted by my GitLab instance. Now I know that GitLab displays 20 projects by default, so I need to set a bigger number of instances displayed per page:

https://gitlab-repo.com/api/v4/projects?per_page=100

It therefore leads to the corresponding axios code:

const url='https://gitlab-repo.com/api/v4/projects?per_page=100'
const vm = new Vue({
el: "#app",
data: {
    results: [],
    loading: true,
    errored: false
},
mounted() {
    axios
        .get(url)
        .then(response => (this.results = response.data))
        .catch(error => {
            console.log(error)
            this.errored = true
        })
        .finally(() => this.loading = false)
}
})

The thing is, the maximum number of projects that GitLab can display per page is 100, and I have more projects than that.

I thought about putting a condition on the number of instances (projects) in the params section of axios's get function but can't figure how to write that.

How can I indicate in my axios request that if the number of projects is bigger than 100, I want to load the data that's on the next page(s)?

avazula
  • 472
  • 1
  • 6
  • 23
  • Where did you get `per_page` I don't see it in the docs? https://docs.gitlab.com/ee/api/projects.html – Dominic Feb 11 '19 at 15:48
  • you have to use the pagination, get the count of total pages, and ask for page 2, page 3, page 4 etc... per_page is limited in gitlab in order to prevent server loading too much data and crashing. – Pierre Emmanuel Lallemant Feb 11 '19 at 15:48
  • @Dominic I actually found about it on SF when I couldn't find out why only 20 projects displayed: https://serverfault.com/questions/570126/using-gitlab-projects-are-missing-from-the-api-list – avazula Feb 11 '19 at 15:49

1 Answers1

3

You're first gonna want to write a function that requests a specific page, something like this:

function getPage(page) {
  let url = `https://gitlab-repo.com/api/v4/projects?per_page=100&page=${page}`;
  return axios
        .get(url)
        .then(response => (response.data))
}

If you have async/await in your environment, I would then do something like this, to keep requesting the next page until you get a result that's < 100 results

let resultCount = 100;
let results = [];
let page = 1;
while (resultCount === 100) {
  let newResults = await getPage(page);
  page++;
  resultCount = newResults.length;
  results = results.concat(newResults);
}
TKoL
  • 13,158
  • 3
  • 39
  • 73