I encountered a TypeError while attempting to iterate through a GraphQL query in my Vue project.
The script snippet in question is as follows:
<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>
Here's the section of code causing issues:
<div v-if="result">
<p v-for="edge in result.posts.edges.node" :key="edge.id"></p>
<p>{{ edge.title }}</p>
</div>
While the result is correctly displayed in the console, I keep receiving a TypeError when trying to loop through it. It seems like there might be an issue with how I've specified the path?
The specific error message reads:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')