Chain fetch Requests in Nuxt

Question

I have a site that fetches Reddit content and displays it to the user. My main problem is my LCP time with Google is taking a hit due to the API returning such a large data set and causing a delay.

I'm wondering if I can fetch the first 10x Posts, then chain another fetch call to append the rest of the data?

Current Call:

  async fetch() {
        // Fetch this pages URL from the API. Use the options if there are any to use.
        await this.$axios.get(this.baseUrl + this.builtUrl + '/' + this.sortOption + '.json?raw_json=1&limit=100')
        .then((response) => {
            // Build Reddit Array
            this.posts = response.data.data.children
            // Add the next page Variable.
            this.nextPage = response.data.data.after
            // Set the Page Variable.
            this.page = response.data.data.after
        })
  },

As you can see, it's getting 100x Posts. Is it possible to change this to 10 then append the other 90 in a chained fetch call? Tried a few methods, but they seem overly complex?

Chain fetch Requests in Nuxt

0 Answers