GraphQL response returns [Object] instead of data

Question

New to GraphQL and using it to return data from Wordpress API. When creating a query in GraphiQL Wordpress IDE it returns the correct data, but when I implemented the query in my NEXTJS app and did a console.log I see [Object] instead of the data in the response. I am confused as to why it appears correctly when creating the query with the IDE but when implemented does not render the data as expected.

My setup:

//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

If you really want to see what's the actual data present within the console.log, you can use

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

also you can access specific objects by using,

console.log(data.posts.nodes):