usePreloadedQuery与useQueryLoader的区别及导入代码疑问

1. usePreloadedQuery 和 useQueryLoader 的核心功能差异 #

这两个钩子是Relay预加载机制的前后环节，核心分工完全不同：

• useQueryLoader：负责触发查询请求，但不直接返回数据。它的作用是提前发起GraphQL查询（比如用户即将访问某个页面时，在当前页面先触发请求），返回一个query reference（查询引用），这个引用可以传递给其他组件。它的核心价值是实现预加载，提升用户体验（比如页面切换时数据已经加载完成）。
• usePreloadedQuery：负责消费预加载的查询结果。它必须接收由useQueryLoader（或其他预加载方式生成的）query reference，然后返回查询到的数据供组件渲染。它本身不会发起新的请求，只是处理已经发起的请求的状态（加载中、成功、错误）并返回数据。

简单说：useQueryLoader是“发起预加载”的开关，usePreloadedQuery是“使用预加载数据”的消费者。

2. 两种导入操作的差异 #

这两行代码的作用完全不同，本质是类型与运行时实体的区别：

• import type {HomeTabQuery as HomeTabQueryType} from 'HomeTabQuery.graphql'：这是TypeScript的类型导入，仅用于编译阶段的类型检查，编译后会被完全移除，不会出现在最终的JavaScript代码中。它导入的是该GraphQL查询对应的TypeScript类型（比如查询返回数据的类型、查询变量的类型），用来给代码做类型约束。
• const HomeTabQuery = require('HomeTabQuery.graphql')：这是CommonJS的运行时导入，导入的是Relay编译后生成的实际查询对象（包含查询的AST、操作名称等运行时必需的信息）。这个对象是发起GraphQL请求的核心参数，需要传递给useQueryLoader等钩子来触发查询。

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