Multiple use of queryContent returns null value.

[anuzpandey]

So I have a page called category with slug and I'm filtering blogs and snippets with that slug. When I query the category from content/categories.json, the value is returned properly but when I add additional query queryContent to fetch snippets and blogs, I get null value for same thing.

My current implementation:

const { data } = await useAsyncData(`content-categories-${slug}`, async () => {
  const queryCategories = await queryContent().where({ _path: '/categories' })
    .sort({ id: -1 }).find()

  let categoryBody = queryCategories[0].body

  let pageCategory = categoryBody.filter(category => {
    return category.title.toLowerCase() === slug[0]
  })[0]

  const blogQuery = await queryContent('blogs')
    .where({ tags: { $in: [pageCategory.title] } })
    .find()

  const snippetsQuery = await queryContent('snippets')
    .where({ category: pageCategory.title })
    .find()

  return {
    pageCategory,
    blogQuery,
    snippetsQuery
  }
})

console.log(data.value) // returns null

But when I remove the additional blog and snippets query, the value is available

const { data } = await useAsyncData(`content-categories-${slug}`, async () => {
  const queryCategories = await queryContent().where({ _path: '/categories' })
    .sort({ id: -1 }).find()

  let categoryBody = queryCategories[0].body

  let pageCategory = categoryBody.filter(category => {
    return category.title.toLowerCase() === slug[0]
  })[0]

  return {
    pageCategory,
  }
})

console.log(data.value) // this works

I even tried Promise.all() for this but no success.

const blogQuery = await queryContent('blogs')
    .where({ tags: { $in: [pageCategory.title] } })

  const snippetsQuery = await queryContent('snippets')
    .where({ category: pageCategory.title })
  
  const [blog, snippets] = await Promise.all([
    blogQuery.find(),
    snippetsQuery.find()
  ])

This too returns null.

Any help would be great. Thank you in advance.

[nobkd]

This #1368 (comment) states: If you want to use multiple fetch/find inside asyncData, you need to await for all of them at once.

And as far as I see, you first query for categories and then query for snippets and blog posts, in all examples.

(This might be outdated, as the issue is from a year ago.)

[anuzpandey]

Is there any idea to do so as I have to filter through the first query and its result is dependent for other two queries?

[nobkd]

Sorry, at the moment I can't think of a way how you'd do that...

[nobkd]

It seems, that it's also possible to write multiple useAsyncData requests in one setup function: #1368 (comment)
(untested)

[anuzpandey]

So a small workaround I did is, I queried the first statement, which was working as expected. And rather than filtering through javascript side. I did it on template side with <ContentList>

Implementation:

<ContentList
  :query="{
    where: {
      category: { $in: [data?.pageCategory.title] }
    },
    $sensitivity: 'base',
    sort: [{ id: -1 }]
  }"
  path="/snippets"
>
  <template #default="{ list }">
    <div
      v-for="(snippet, snippetIndex) in list"
      :key="snippetIndex"
    >
        <!-- Other Codes -->
    </div>
  </template>
  <template #not-found>
    <p>No snippets found.</p>
  </template>
</ContentList>