Vue Uncaught TypeError in for loop with GrapQL-CodePudding

I am getting a TypeError when I am trying to loop through a GraphQL query in my Vue project.

My script looks like this:

<script>
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";

const POST_QUERY = gql`
  query GetPostsEdges {
    posts {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

export default {

  setup() {
    const { result } = useQuery(POST_QUERY);

    console.log(result);
    return { result };
  },
};
</script>

And my for loop:

<div v-if="result">
    <p v-for="edge in result.posts.edges.node" :key="edge.id"></p>
    <p>{{ edge.title }}</p>
</div>

The result is returned correctly in the console. But I am getting the TypeError from the for loop. I guess that maybe I have written the path wrong?

The error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')

CodePudding user response：

Use

<p v-for="edge in result.posts.edges.node" :key="edge.id">{{ edge.title }}</p>