Nuxt•2mo ago

Inconsistent queryCollection

Hello, we've coded up our first nuxt (v3.15.4) project. We've used nuxt for all sorts of SEO, gtag and more. Neat stuff!
We're having an issue with queryCollection. It's returning different array sizes across multiple calls for the same query:

const { data: posts } = await useAsyncData(() =>
  queryCollection("content").order("date", "DESC").all()
);
let allPosts = cloneDeep(posts.value);
console.log("After query:", allPosts);

const { data: posts } = await useAsyncData(() =>
  queryCollection("content").order("date", "DESC").all()
);
let allPosts = cloneDeep(posts.value);
console.log("After query:", allPosts);

Sometimes it returns an array of 1 element, sometimes 18. (18 is all.) feel like I'm missing something. Here's our content config.

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
      schema: z.object({
        title: z.string(),
        date: z.date(),
        tagline: z.string(),
        remoteURL: z.string(),
      }),
    }),
  },
});

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
      schema: z.object({
        title: z.string(),
        date: z.date(),
        tagline: z.string(),
        remoteURL: z.string(),
      }),
    }),
  },
});

Any ideas?

3 Replies

kapa.ai•2mo ago

Hi @san. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing inconsistent results with queryCollection in your Nuxt Content project. This is definitely unusual behavior, as the same query should return consistent results. Based on the knowledge sources, there are a few potential issues that could be causing this inconsistency: 1. Asynchronous Content Loading Nuxt Content loads files asynchronously, and there might be a race condition where your query executes before all content is fully loaded. This is especially common during development with hot module reloading. 2. Cache Key for useAsyncData You're not providing a unique key to useAsyncData(), which could lead to caching issues. Try adding a specific key:

const { data: posts } = await useAsyncData('all-posts', () =>
  queryCollection("content").order("date", "DESC").all()
);

const { data: posts } = await useAsyncData('all-posts', () =>
  queryCollection("content").order("date", "DESC").all()
);

3. Collection Definition Your collection definition looks correct, but make sure your content files all have the required fields defined in your schema. Missing required fields might cause some files to be excluded from query results. 4. File Structure Check if all your Markdown files are properly structured and located in the expected directories. The source: "**/*.md" pattern will include all Markdown files in your content directory and subdirectories. 5. Development vs Production This behavior might differ between development and production environments. Try building and running your application in production mode to see if the issue persists. Suggested Solution Try modifying your code to include a unique cache key and potentially add error handling:

const { data: posts } = await useAsyncData('all-posts', () =>
  queryCollection("content").order("date", "DESC").all()
);
let allPosts = posts.value ? cloneDeep(posts.value) : [];
console.log("After query:", allPosts, "Length:", allPosts.length);

const { data: posts } = await useAsyncData('all-posts', () =>
  queryCollection("content").order("date", "DESC").all()
);
let allPosts = posts.value ? cloneDeep(posts.value) : [];
console.log("After query:", allPosts, "Length:", allPosts.length);

If the issue persists, you might want to check if there are any errors in your console or try using the count() method to verify the total number of documents in your collection:

const { data: postCount } = await useAsyncData('post-count', () =>
  queryCollection("content").count()
);
console.log("Total posts:", postCount.value);

const { data: postCount } = await useAsyncData('post-count', () =>
  queryCollection("content").count()
);
console.log("Total posts:", postCount.value);

For more information on querying collections, you can refer to the queryCollection documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@780222387400474626> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sanOP•2mo ago

What we're finding is it works in dev, but not in production when served with npx serve .output/public (And to be honest, I'm a bit confused by the difference. And how static SEO is still executing JS. And if that's the problem somehow.)

Gaming

Programming

Inconsistent queryCollection

Did you find this page helpful?