typescript TypeError:无法读取未定义的属性(阅读'operationKind')-反冲中继GraphQLSelector

dsf9zpds  于 2022-12-14  发布在  TypeScript
关注(0)|答案(3)|浏览(99)

我正在使用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;
z9zf31ra

z9zf31ra1#

我和你犯了同样的错误。
我修复了我的代码如下。
效果很好。

const clientsSelector = graphQLSelector({
  key: "clientsSelector",
  environment: RelayEnvironment,
  query: graphql`
    query ClientsAtomsQuery {
      clients {
        Id
        age
        gender
        income
        location
      }
    }
  `.default,
  variables: {},
  mapResponse: (data) => data.clients as Array<Client>,
});
z5btuh9x

z5btuh9x2#

根据this github issue(这可能最终为您工作,它没有为我)。
您必须将eagerEsModules的中继编译器选项设置为true:

{
  "eagerEsModules": true`
}

有关在何处设置此选项的更多信息,请参见中继文档。目前,此选项在relay.config.js文件中设置,如下所示:

中继配置js

module.exports = {
  // misc default config you can change
  src: "./src",
  language: "typescript",
  schema: "./data/schema.graphql",
  exclude: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
  eagerEsModules: true // <------- The line you should add
}

您还可以在package.json中设置中继选项,然后可以如下设置:

软件包.json

{
  "relay": {
    "src": "./src",
    "language": "typescript",
    "schema": "./data/schema.graphql",
    "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
    "eagerEsModules": true
  }
}

虽然这些可能是最常见的地方,你会改变它。对我来说,我没有改变它在这两个地方,虽然,因为我正在使用webpack,swc,和@swc/plugin-relay,所以我不得不去改变它在我的.swcrc.js文件。其他人可能有麻烦的webpack,可能不得不改变它在他们的webpack配置。

h7appiyu

h7appiyu3#

遇到了一个类似的问题。John的答案没有解决,当尝试dustplanet的建议时,我看到了以下错误:

Property 'default' does not exist on type 'GraphQLTaggedNode'.
  Property 'default' does not exist on type 'ReaderFragment'.

下面是我的代码片段,我在其中添加了.default

const getYellSubscription = graphql`
    subscription yellListSubscription {
        getYell {
            content
            id
        }
    }
`.default;

const yellSubscription = graphQLSelector({
    key: 'YellSubscription',
    environment: myEnvironmentKey,
    query: getYellSubscription,
    variables: ({ get }) => ({}),
    mapResponse: (data) => {
        console.log(data);
        return data.getYell;
    },
});

相关问题