Vue3 получает данные из Django graphql, но не отображает компонент на веб-странице?

При использовании Vue3 для получения данных из бэкенда Django graphql консоль chrome показывает полученные данные в виде массива:

(3) [{…}, {…}, {…}] 0 : {__typename: 'PostType', title: 'That Bum.', subtitle: '', publishDate: '2023-12-14T19:23:09+00:00', published: false, …} 1 : {__typename: 'PostType', title: '"Fight Like a Girl!"', subtitle: '', publishDate: '2023-12-07T19:27:26+00:00', published: false, …} 2 : {__typename: 'PostType', title: 'Sunday Sermon', subtitle: '', publishDate: null, published: false, …} length : 3, но компонент (AllPosts.vue) не отображается на веб-странице. Можете ли вы предложить решение с описанием ошибки и решения?

Что получилось, с небольшой помощью друга:

AllPosts.vue:

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

const allPosts = ref([]);

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

const { onResult, onError } = useQuery(allPostsQuery);

onResult((result) => {
  if (result.data) {
    allPosts.value = result.data.allPosts;
    console.log('Posts received:', allPosts.value);
  }
});

onError((error) => {
  console.error('Error fetching posts:', error);
});

onErrorCaptured((error) => {
  console.error('Error captured in component:', error);
});

</script>

<template>
  <div>
    <h2 class="white-text" style="margin-left: 20px;">Recent posts</h2>
    <PostList v-if="allPosts && allPosts.length > 0" style="color: white;":posts="allPosts" />
    <div v-else>
      <p>Loading...</p>
    </div>

  </div>
</template>
<style>
.white-text {
  color: white;
}
</style>
Вернуться на верх