Flatten Apollo response from WpGraphql in next.js - wordpress

Question

I'm trying to change the result that apollo returns with the data on the client side. I've read in the docs of version 3 that maybe this is possible. I currently have a graphql query that returns data within an EDGES array, and then each item is in a "node" before you get to the actual data.
The query looks like:
export const QUERY_ALL_POSTS = gql`
query AllPosts {
posts(first: 20) {
__typename
edges {
__typename
node {
__typename
author {
node {
avatar {
height
url
width
}
id
name
slug
}
}
id
categories {
edges {
node {
databaseId
id
name
slug
}
}
}
content
date
excerpt
featuredImage {
node {
altText
caption
sourceUrl
srcSet
sizes
id
}
}
modified
databaseId
title
slug
isSticky
}
}
}
}
`;
And the response looks like:
I know that I can write the typePolicy this way to change the date string for example:
Post:{
fields:{
date(){
return 'date edit'
}
}
},
So I wanted to see if I could change the response of the entire array that gets returned to something like this because I'll be needing to check for edges and nodes in every component which is kinda of annoying:
posts:[
{...item 1},
{...item 2},
{...item 3},
...etc
]
I've tried to write a typePolicy like this, and it returns the correct data, but when I query it on the frontend, nothing has changed. The data is still contained in an Edges object and each item is still in a NODE from the wpGraphql backend.
typePolicies: {
Post:{
fields:{
date(){
return 'date edit test' // returns a modified date object
}
}
},
Query: {
fields: {
// posts: flatten(),
posts:{
read(posts, { readField }) {
if(posts){
const newItem = posts.edges.map(post => {
return post.node
})
console.log('newItem', newItem)
return newItem
}
return posts // does not return a modified posts object
},
}
},
},
},
Can I modify the response like this or do I just have to write a custom helper function to modify the data every time I query it before using the data inside a component?