nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.13k stars 628 forks source link

Content disappears when I refresh the page ? #2385

Closed arkhaiel closed 1 year ago

arkhaiel commented 1 year ago

Environment

built with npm run generate and ssr: false / content.experimental.clientDB: true


Reproduction

https://github.com/mathieunicolas/alloe It's deployed here : https://alloe.fr

When I go to news > click on a news : it's displayed. Everything works well, BUT when I refresh the page, or if I go to the page directly : https://alloe.fr/news/alloe-48h, the result of this query seems to be null, so it's not displayed anymore.

const { data } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).findOne()
})

Here is the whole code of the component in the /pages/news/[...slug].vue page :

<template>
    <article class="m-auto p-4 sm:p-0 lg:max-w-5xl prose dark:prose-invert">
        <ContentRenderer :value="data">
        <h1 class="mb-0">{{ data.title }}</h1>
        {{ useDateFormat(data.date, 'DD-MM-YYYY').value }}
        <ContentRendererMarkdown :value="data" />
        </ContentRenderer>
    </article>
</template>

<script setup>
const { path } = useRoute();

const { data } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).findOne()
})

</script>

Describe the bug

So I'm using nuxt + nuxt UI for a supabase-related website, hosted on netlify. Everything works well.

I'm trying to setup a "news" section with nuxt Content, because why not ?

Additional context

I also use this module to dynamically tell what to prerender, based on the content of the /content folder : https://github.com/mathieunicolas/alloe/blob/main/modules/test.ts

Logs

No response

arkhaiel commented 1 year ago

After hours of many tries, I just thought about the auto-injected Vue page, and adapted the code to make mine :

<template>
  <article class="m-auto p-4 sm:p-0 lg:max-w-5xl prose dark:prose-invert">
      <ContentRenderer :key="page._id" :value="page">
      <h1 class="mb-0">{{ page.title }}</h1>
      {{ useDateFormat(page.date, 'DD-MM-YYYY').value }}
      <ContentRendererMarkdown :value="page" />
      </ContentRenderer>
  </article>
</template>

<script setup>
import { useRuntimeConfig } from '#app'
import { useContent, useContentHead, useRequestEvent } from '#imports'

const { contentHead } = useRuntimeConfig().public.content
const { page, layout } = useContent()

if (!(page).value && process.server) {
const event = useRequestEvent()
event.res.statusCode = 404
}

if (contentHead) {
useContentHead(page)
}
</script>

Now it works, so I'm happy, but I still don't know why... Closing sinced it's solved.