我正在使用recoil-relay
直接为选择器获取查询。目前,我正在使用graphQLSelector
,但在尝试获取选择器返回的值时遇到了问题。示例代码:
import { graphql } from "react-relay";
import { graphQLSelector } from "recoil-relay";
import { RelayEnvironment } from "../relay_env";
export interface Client {
Id: string;
age: string;
gender: string;
income: string;
location: string;
}
const clientsSelector = graphQLSelector({
key: "clientsSelector",
environment: RelayEnvironment,
query: graphql`
query ClientsAtomsQuery {
clients {
Id
age
gender
income
location
}
}
`,
variables: {},
mapResponse: (data) => data.clients as Array<Client>,
});
执行以下操作时,运行时出现错误:
const clients = useRecoilValue(clientsSelector);
中继环境不是问题所在,因为当我尝试只使用Relay来使用相同的查询时,它工作正常。
中继编译器正在运行并生成正确的.graphql.ts
文件:
...
import { ConcreteRequest, Query } from 'relay-runtime';
export type ClientsAtomsQuery$variables = {};
export type ClientsAtomsQuery$data = {
readonly clients: ReadonlyArray<{
readonly Id: number | null;
readonly age: string;
readonly gender: string;
readonly income: string;
readonly location: string;
}>;
};
export type ClientsAtomsQuery = {
response: ClientsAtomsQuery$data;
variables: ClientsAtomsQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"alias": null,
"args": null,
"concreteType": "Client",
"kind": "LinkedField",
"name": "clients",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "Id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "age",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "gender",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "income",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "location",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ClientsAtomsQuery",
"selections": (v0/*: any*/),
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "ClientsAtomsQuery",
"selections": (v0/*: any*/)
},
"params": {
"cacheID": "30edf9a9b7f2c445a8a07730198d719d",
"id": null,
"metadata": {},
"name": "ClientsAtomsQuery",
"operationKind": "query",
"text": "query ClientsAtomsQuery {\n clients {\n Id\n age\n gender\n income\n location\n }\n}\n"
}
};
})();
(node as any).hash = "e029635c746ef9ec4ca4b7503898730d";
export default node;
3条答案
按热度按时间z9zf31ra1#
我和你犯了同样的错误。
我修复了我的代码如下。
效果很好。
z5btuh9x2#
根据this github issue(这可能最终为您工作,它没有为我)。
您必须将eagerEsModules的中继编译器选项设置为true:
有关在何处设置此选项的更多信息,请参见中继文档。目前,此选项在
relay.config.js
文件中设置,如下所示:中继配置js
您还可以在package.json中设置中继选项,然后可以如下设置:
软件包.json
虽然这些可能是最常见的地方,你会改变它。对我来说,我没有改变它在这两个地方,虽然,因为我正在使用webpack,swc,和@swc/plugin-relay,所以我不得不去改变它在我的
.swcrc.js
文件。其他人可能有麻烦的webpack,可能不得不改变它在他们的webpack配置。h7appiyu3#
遇到了一个类似的问题。John的答案没有解决,当尝试dustplanet的建议时,我看到了以下错误:
下面是我的代码片段,我在其中添加了
.default
: