使用recoil-relay的graphQLSelector时出现operationKind读取错误

问题根源 #

你遇到的TypeError: Cannot read properties of undefined (reading 'operationKind')错误，核心原因是graphQLSelector的query参数传入了错误类型。recoil-relay要求这里传入relay-compiler编译后的ConcreteRequest对象，而非graphql模板字面量直接返回的临时结果。

单独用Relay时可以直接用graphql模板发起请求，但recoil-relay的实现逻辑依赖编译后的查询节点，无法直接处理未编译的模板内容。

修正后的代码 #

1. 先导入relay-compiler生成的查询文件：

import { graphQLSelector } from "recoil-relay";
import { RelayEnvironment } from "../relay_env";
import ClientsAtomsQuery from "./ClientsAtomsQuery.graphql"; // 替换为你的实际文件路径

export interface Client {
  Id: string;
  age: string;
  gender: string;
  income: string;
  location: string;
}

2. 修改graphQLSelector的query参数，使用导入的编译后查询：

const clientsSelector = graphQLSelector({
  key: "clientsSelector",
  environment: RelayEnvironment,
  query: ClientsAtomsQuery, // 替换原graphql模板内容
  variables: {},
  mapResponse: (data) => data.clients as Array<Client>,
});

验证要点 #

• 确认relay-compiler已正确生成ClientsAtomsQuery.graphql.ts文件（即你提供的包含ConcreteRequest的文件）。
• 确保导入路径与生成文件的实际位置一致。

内容的提问来源于stack exchange，提问作者Rafael Di Piero