GraphQL 响应返回 [Object] 而不是数据

Question

GraphQL 新手并使用它从 Wordpress API 返回数据。 在 GraphiQL Wordpress IDE 中创建查询时，它返回正确的数据，但是当我在 NEXTJS 应用程序中实现查询并执行console.log时，我看到[Object]而不是响应中的数据。 我很困惑为什么在使用 IDE 创建查询时它会正确显示，但在实现时不会按预期呈现数据。

我的设置：

//apollo-client.js

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
    uri: `${process.env.NEXT_PUBLIC_GRAPH_QL}`,
    cache: new InMemoryCache({
        addTypename: false,
    }),
});

export default client;

//index.ts
import { gql } from '@apollo/client';
import client from '../../apollo-client';

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query getPosts {
       posts(first: 20) {
        nodes {
         title
          featuredImage {
           node {
            sourceUrl
           } 
          }
         }
        }
      }
    `,
  });

  return {
    props: {
      posts: data
    },
 };

console.log(posts) ：

{
  posts: {
    nodes: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object]
    ]
  }
}

Answer 1

如果您真的想查看 console.log 中存在的实际数据是什么，您可以使用

console.log(JSON.stringify(posts)):

您还可以通过使用访问特定对象，

console.log(data.posts.nodes):