gql.tada 中如何处理 Remix/React Router 的 useLoaderData 类型兼容性问题

在 gql.tada 项目中，开发者在使用 Remix 或 React Router 的 useLoaderData 模式时可能会遇到类型兼容性问题。这个问题源于 TypeScript 在处理联合类型时的特殊行为，特别是当函数可以返回不同类型时。

问题背景

当开发者尝试将 gql.tada 与 Remix/React Router 的 useLoaderData 模式结合使用时，TypeScript 会报类型不兼容的错误。这种情况在使用 GraphQL 查询结果作为 loader 返回数据时尤为明显。

技术分析

问题的核心在于 Remix 的 useLoaderData 内部使用了 JsonifyObject 类型来递归映射对象。这个类型的目的是防止开发者尝试通过 loader 传输非 JSON 值，因为这在技术上是不可能的。

gql.tada 使用独特的符号来实现片段掩码(fragment masking)，这些掩码既不是真实的数据也不是可序列化的。一旦有了片段掩码，数据实际上会"隐藏"其真实形状，而不是显示完整信息。这与 JsonifyObject 的类型检查机制产生了冲突。

解决方案比较

与 GraphQL Code Generator 的 client-preset 相比，后者通过在常规属性上放置"ref types"来处理片段掩码。而 gql.tada 选择使用唯一符号，因为片段掩码既不是真实的也不是可序列化的。

开发者有以下几种选择：

1. 禁用片段掩码：这会失去其优势，但可以严格强制执行片段组合
2. 避免使用 JsonifyObject：通过编写包装器来保留片段掩码
3. 等待 gql.tada 的更新：在后续版本中，JsonifyObject 将不再过滤键，从而自动解决这个问题

最佳实践

对于需要立即解决问题的开发者，建议创建一个专门用于 GraphQL 数据的 useLoaderData 包装器，这样可以绕过 JsonifyObject 的类型检查。这种解决方案既保留了类型安全，又不会影响开发体验。

结论

这个问题展示了类型系统在复杂应用场景中的挑战。gql.tada 的设计选择虽然导致了与 Remix 的类型兼容性问题，但这种设计实际上是为了提供更好的类型安全保障。随着 gql.tada 的更新，这个问题将得到原生解决，开发者将能够更顺畅地在 Remix/React Router 中使用 GraphQL 查询结果。