NuxtJS+Strapi+GraphQL：查询结果仅在控制台显示不渲染到DOM

你遇到的问题是GraphQL查询返回的数据结构和模板引用不匹配，Strapi v4的GraphQL响应层级和旧版本不同，你已经修改了查询语句，但模板里没对应调整嵌套层级，导致数据无法渲染到DOM。

核心问题说明 #

你的allArticles查询返回的结构是嵌套层级：

{
  "articles": {
    "data": [
      {
        "id": "xxx",
        "attributes": {
          "title": "xxx",
          "date": "xxx",
          "slug": "xxx",
          "description": "xxx"
        }
      }
    ]
  }
}

但模板里直接遍历articles（这是一个包含data属性的对象，不是数组），且直接引用article.title这类字段（实际字段都在article.attributes下），所以DOM无法读取到有效数据。

修改后的index.vue代码 #

<template>
  <div class="home">
   <h1 class="headline center">Lyric Blog</h1>
   <div class="sections">
     <div class="group">
       <div
       v-for="article in articles.data"
       v-bind:key="article.id"
       class="section">
         <div class="entry">
           <NuxtLink :to="{ path: article.attributes.slug, query: {id: article.id} }">
             <h3>
               {{ article.attributes.title }}
               <span class="subtitle"> {{ article.attributes.date }} </span>
             </h3>
           </NuxtLink>

           <p> {{ article.attributes.description }} </p>
         </div>
       </div>

     </div>
   </div>

  </div>
  
 </template>

 <script>
 import { allArticles } from '~/graphql/queries'

 export default {
  name: 'IndexPage', 
  data() {
     return {
       articles: []
     }
   },
   apollo: {
     articles: {
       prefetch: true,
       query: allArticles
     }
   }
 }
 </script>

额外优化提示 #

你的singleArticle查询硬编码了id:1，正式使用时建议改成变量形式，适配动态传参需求：

export const singleArticle = gql`
query singleArticle($id: ID!) {
    article(id: $id) {
      data {
        id
        attributes {
          title
          slug
          description
          body
          date
        }
      }
    }
}
`

内容的提问来源于stack exchange，提问作者TheFox