Vue3从Django GraphQL取数后组件不显示问题排查与解决

错误原因 #

• 同步try-catch无法捕获Apollo异步查询错误：useQuery是异步操作，setup中的try-catch只能捕获同步代码错误，无法捕获查询过程中的异步异常，即便查询出问题也看不到对应报错（你已拿到数据，这不是当前直接原因，但属于代码隐患）。
• 未利用Apollo官方状态判断加载状态：当前仅靠allPosts长度判断是否显示加载，而useQuery本身返回loading状态，若网络延迟或数据更新时机偏差，会导致状态判断不准确。
• PostList组件存在逻辑问题：控制台已拿到数据但页面不显示，大概率是子组件未正确处理posts props——比如未正确遍历数组、渲染时使用了不存在的字段，或是props定义错误。
• 模板判断冗余：Vue3中ref在模板会自动解包，allPosts && allPosts.length > 0里的allPosts &&属于冗余代码，虽不会直接导致渲染失败，但不符合规范。

解决方案 #

1. 修正useQuery状态处理，利用官方返回的loading/error状态 #

移除无效的try-catch，改用useQuery自带的状态和错误回调，让状态判断更准确：

<script setup>
import { gql } from 'graphql-tag';
import PostList from '@/components/PostList.vue';
import { useQuery } from '@vue/apollo-composable';

const allPostsQuery = gql`
  query {
    allPosts {
      title
      subtitle
      publishDate
      published
      metaDescription
      slug
      author {
        user {
          username
          firstName
          lastName
        }
      }
      tags {
        name
      }
    }
  }
`;

// 直接解构useQuery返回的核心状态
const { result, loading, error, onError } = useQuery(allPostsQuery);

// 捕获GraphQL查询错误
onError((err) => {
  console.error('查询出错:', err);
});
</script>

<template>
  <div>
    <h2>Recent posts</h2>
    <!-- 按优先级判断状态：先加载、再错误、再数据、最后空状态 -->
    <PostList v-if="!loading && result?.allPosts?.length > 0" :posts="result.allPosts" />
    <div v-else-if="loading">
      <p>Loading...</p>
    </div>
    <div v-else-if="error">
      <p>加载失败：{{ error.message }}</p>
    </div>
    <div v-else>
      <p>暂无文章</p>
    </div>
  </div>
</template>

2. 检查并修复PostList组件 #

确保子组件正确接收并渲染posts数据：

<!-- PostList.vue 示例代码 -->
<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.slug" class="post-item">
      <h3>{{ post.title }}</h3>
      <p>{{ post.subtitle }}</p>
      <p>作者：{{ post.author.user.firstName }} {{ post.author.user.lastName }}</p>
      <div class="tags">
        <span v-for="tag in post.tags" :key="tag.name" class="tag">{{ tag.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 严格定义props，确保传入数据符合要求
const props = defineProps({
  posts: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(post => post.slug && post.title && post.author?.user);
    }
  }
});
</script>

• 确认渲染时使用的字段与GraphQL返回的字段完全匹配（比如post.author.user是否存在，tags是否为数组）。
• 遍历列表必须使用唯一:key（优先用业务唯一标识如slug，避免用索引）。

3. 调试数据结构匹配度 #

如果仍有问题，在onResult中添加调试，确认数据结构是否符合子组件预期：

const { onResult } = useQuery(allPostsQuery);
onResult((result) => {
  if (result.data) {
    console.log('返回的数据结构:', result.data.allPosts[0]);
    console.log('作者字段是否存在:', result.data.allPosts[0]?.author?.user);
  }
});

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