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>