使用GraphQL、Relay与Fragment后，如何查看获取到的数据？

为什么summary字段在console.log中看不到？ #

Relay 为实现数据隔离、延迟加载等性能优化，会把 Fragment 返回的 data 包装成内部 Proxy 对象。这个 Proxy 仅在实际访问属性（比如渲染时调用 data.summary）时才暴露对应字段，直接用 console.log 打印时，浏览器默认不会展开 Proxy 的全部内部属性，所以你看不到 summary 字段，但页面渲染时能正常读取到它。

如何查看被隐藏的片段数据？ #

有几种可靠的方法可以获取并查看完整的 Fragment 数据：

• 使用 Relay 官方工具函数 getFragmentData：
  导入该函数后，传入 Fragment 的 data 参数，就能得到包含所有请求字段的普通 JavaScript 对象：

  import { getFragmentData } from 'relay-runtime';
  
  // 在组件中
  const data = useFragment(/* ... */);
  console.log(getFragmentData(data)); // 这里能看到包括summary在内的所有字段
  

• 用 JSON.stringify 序列化数据：
  直接将 data 转为 JSON 字符串，Relay 会自动解析 Proxy 并输出完整数据：

  console.log(JSON.stringify(data, null, 2));
  

• 控制台手动展开 Proxy 对象：
  在浏览器控制台中，找到打印出的 Proxy 对象，展开它的 [[Target]]（或类似命名的内部属性，不同浏览器可能有差异），就能看到真实的字段数据。不过这种方法依赖浏览器的调试展示，不适合代码中固定使用。

内容的提问来源于stack exchange，提问作者Stefanie Gauss