Vue3 is fetching data from Django graphql but does not display the component on webpage?

While using Vue3 to fetch data from Django graphql backend, chrome console shows the fetched data as array:

(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 but the component (AllPosts.vue) is not displayed on the webpage. Can you suggest a solution with description of the error and the solution?

What worked was, with a little help from a friend:

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>
Back to Top