When using GraphQL and Relay and Fragment, how to see the data?

Question

I am onto Step 4 of the Relay Tutorial at: https://relay.dev/docs/tutorial/fragments-1/

It was strange because when I don't use Fragment, and have the following code:

const NewsfeedQuery = graphql`
  query NewsfeedQuery {
    topStory {
      ...StoryFragment
    }
  }
`;

export default function Newsfeed() {

  const data = useLazyLoadQuery<NewsfeedQueryType>(
    NewsfeedQuery,
    {}
  )

  console.log("HERE 1", JSON.stringify(data, null, 4));

I was able to see in the dev console for the data:

HERE 1 {
    "topStory": {
        "title": "Local Yak Named Yak of the Year",
        "summary": "The annual Yak of the Year awards ceremony took place last night, and this year's winner is none other than Max, a beloved yak from the small town of Millville. Max, who is known for his friendly personality and hardworking nature, ...
  ...       

However, once I started using Fragment and useFragment, the same console.log of data does not have any content of:

The annual Yak of the Year awards ceremony took place last night

I wonder why the summary disappeared, yet it was able to work the same as before and have it shown on the webpage. I know fragment data is "hidden" or "masked" by Relay, but even if it is hidden, it should still be inside of data, shouldn't it? By what way can I see it using a console.log()? (I mean right at this point, not at the point of useFragment().

One possible way I am thinking is, could Relay be hiding all the fragment data by way of a function (or functions) inside of data and it does the returning the data? This way, console.log() won't be able to print it out.

At Story.jsx, there is:

  const data = useFragment(
    StoryFragment,
    story
  )

Overhere I can print out data, but I am just wondering right after the network fetch, how do I print out the data to see that what I needed is right there.

Answer 1

When using any query hook like useLazyLoadQuery with spread fragments Relay returns an object with some hidden fields, which tell Relay how to resolve those fragments when useFragment is called. Here is a quote from their documentation (https://relay.dev/docs/tutorial/fragments-1/#step-3--call-usefragment):

Technically, queryResult.topStory [result object] is an object that contains some hidden fields that tell Relay's useFragment where to look for the data it needs. The fragment key specifies both which node to read from (here there's just one story, but soon we'll have multiple stories), and what fields can be read out (the fields selected by that specific fragment). The useFragment hook then reads that specific information out of Relay's local data store.

So to answer your original question:

...but I am just wondering right after the network fetch, how do I print out the data to see that what I needed is right there.

I don't think you easily can without using useFragment, using @inline on the fragment or not spreading there at all.