0

我正在尝试更改 apollo 在客户端返回数据的结果。我在第 3 版的文档中读到也许这是可能的。我目前有一个 graphql 查询,它返回一个 EDGES 数组中的数据,然后在你获得实际数据之前,每个项目都在一个“节点”中。

查询如下所示:

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
                }
            }
        }
    }
`;

响应如下: 在此处输入图像描述

我知道我可以用这种方式编写 typePolicy 来更改日期字符串,例如:Post:{ fields:{ date(){ return 'date edit' } } },

所以我想看看我是否可以将返回的整个数组的响应更改为这样的东西,因为我需要检查每个组件中的边缘和节点,这有点烦人:

posts:[
 {...item 1},
 {...item 2},
 {...item 3},
  ...etc
]

我试过写一个这样的 typePolicy,它返回正确的数据,但是当我在前端查询它时,什么都没有改变。数据仍包含在 Edges 对象中,并且每个项目仍位于 wpGraphql 后端的节点中。

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
              },
            }
          },
        },
      },

我可以像这样修改响应,还是只需要编写一个自定义帮助函数来在每次查询数据时修改数据,然后再使用组件内的数据?

4

0 回答 0