Loading more than a 100 entries

Developing with Prismic
10

Hey Kristian,

Thanks for your patience! My colleague took a look at your project, and identified a few ways to troubleshoot:

First of all, in ~/store/ui.js, you use a do/while loop to fetch your content. Do/while loops don’t run asynchronously, so that is likely causing some errors (more info here). You could replace it with a recursive function, like this:

const getPages = async (context) => {
  const data = []
  let pageNum = 1
  let lastResult = []
  const fetch = async () => {
    const resp = await context.$prismic.api.query(
      context.$prismic.predicates.at(‘document.type’, ‘artists’),
      {
        pageSize: 100,
        page: pageNum
      }
    )
    data.push(...resp.results)
    if (resp.next_page) {
      pageNum++
      await fetch()
    }
  }
  await fetch()
  return data
}

You’re querying your content in the store, which is not really what the store is designed for. Instead, I’d suggest that you refactor the queries out of the store and into your pages and components. You can use the asyncData() method on pages and async fetch() in components. That’s the recommended way of fetching data in Nuxt. That goes for content as well as all of the global settings that you query from Prismic — it’s more simple to query global settings on the page or component level. In general, I think using the store is likely overkill, and it seems like it could be causing some issues for you.

In particular, your nuxtServerInit() function gets called for every route that gets generated, which means that you’re generating your globals for every page, and so Nuxt makes the exact same call to the Prismic API 100+ times for your site settings. This could cause errors on your machine, which I think are causing the breaking issues that you’re asking about.

Finally, it looks like you’re using a slightly older version of Nuxt. The current version of Nuxt has great support for static site generation, and doesn’t require ~/modules/crawler/ or ~/modules/static/.

So, if you make the API calls on the page / component level, instead of in the store, I think you could simplify your app a lot. If you want to query more than 100 documents, I’d recommend a recursive function instead of a do/while loop. And it might also help to upgrade to the latest version of Nuxt.

Let me know if you have any questions about any of this, or if you need any resources to get it to work. Thanks again for posting your question and sharing your project!

Best,
Sam

1 Like