Relay-compiler-language-typescript: Typescript error in Relay generated files "identifierField" not exist..

[damikun]

# Issue

Relay Generated files contains typescript error on _"identifierField"_.. App runs without problem in case ts is ignored...

This field does not exist under ReaderNode.d.ts

Error:

TS Error Message

(property) "identifierField": string
Type '{ connection: null; fragmentPathInResult: string[]; operation: any; identifierField: string; }' is not assignable to type 'ReaderRefetchMetadata'.
Object literal may only specify known properties, and '"identifierField"' does not exist in type 'ReaderRefetchMetadata'.ts(2322)
`

Is this field normaly part of relay ? because under ReaderNode.d i cannot find it...

I saw _"identifierField"_ is searchable under experimental part... can be missing typing...

Current one does not have it..
export interface ReaderRefetchMetadata {
    readonly connection: ReaderPaginationMetadata | null | undefined;
    readonly operation: string | ConcreteRequest;
    readonly fragmentPathInResult: ReadonlyArray<string>;
}

I have all in last versions ( i think ) I also tried to go back with _react-relay_ from experimental to 10.0.1 but not results...

# Versions
"@types/relay-compiler": "^8.0.0",
"@types/relay-runtime": "^10.0.1"
"typescript": "^3.9.7"
"babel-plugin-macros": "^2.8.0",
"babel-plugin-relay": "^10.0.1",
relay-compiler": "^10.0.1",
"relay-compiler-language-typescript": "13.0.0",
"relay-config": "^10.0.1",
"relay-hooks": "^3.5.2",
"react-relay": "0.0.0-experimental-8058ef82",

Code include query

  const userquery = graphql`
    query UserDetailQuery($user_id: ID!) {
      userByID(user_id: $user_id) {
        ...UserDetail_user
      }
    }

  `;

  //@ts-ignore
  const UserDetailfragment = graphql`
    fragment UserDetail_user on User_DTO
      @refetchable(queryName: "UserDetailRefetchQuery") {
      id
      firstName
      lastName
      avatarImageName
      deactivated
      activTimestamp
      role {
        iD
        name
        code
      }
      # ...UserDetailGroups_user
      # ...UserDetailRole_user
      # ...UserDetailPremissions_user
    }
  `;

    const userdetaildata = useLazyLoadQuery<UserDetailQuery>(
      userquery ,
      {
        user_id: props.userid,
      },
      {
        fetchPolicy: "store-or-network",
      }
    );

    const [data, refetch] = useRefetchableFragment<
      UserDetailRefetchQuery,
      UserDetail_user$key
    >(UserDetailfragment, userdetaildata.userByID as UserDetail_user$key);

[maraisr]

can you do me a yarn list @types/relay-*. I can't see why you'd be having this issue, but from what I've experienced (this exact same issue) was because of an @types not installing the right version.

[damikun]

can you do me a yarn list @types/relay-*. I can't see why you'd be having this issue, but from what I've experienced (this exact same issue) was because of an @types not installing the right version.

I also tried to delete entire node-modules and reinstall all (in case some wired error) but no luck..

@maraisr

Result :
├─ @types/[email protected]
└─ @types/[email protected]

[maraisr]

Ah! You've got a custom id field. Seems to be a missed thing in the types. I'll check this out, and try get a fix out ASAP.

[damikun]

Ah! You've got a custom id field. Seems to be a missed thing in the types. I'll check this out, and try get a fix out ASAP.

Heh super thx.. no problem im using @ts-nocheck for now to ignore this error.. :)

BTW backend is on .net core (Hotchocolate) just for info...

[maraisr]

@damikun wow nice, yeah we use HotChocloate at my company too. By far the best graphql server tech in the c# space.

I've resolved your issue in a PR to the types. Will track its progress there.

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46532

Also; @alloy what is the process to get me more access to those types? Love to help out in the maintenance of them.

[maraisr]

@damikun if you checkout @types/[email protected] to npm. It'll have the changes in to fix this issue. Let me know how that goes.

[alloy]

@maraisr Let’s close pre-emptively so we don’t need to remember to circle back.

@damikun In case there’s still an issue, please do let us know.

[damikun]

@alloy @maraisr

Hi guys i tested "identifierField" issue with 10.0.3 and it is ok, but another types error pops up after updating to 10.0.3 in types.. just for info 10.0.2 dont have this problems.. I will paste down the error... Agian //ts-nocheck will solve this but just for info there are some changes that leads to errors..

```TypeScript error in C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/src/App.tsx(59,35):
Type 'RelayModernEnvironment' is not assignable to type 'Environment'.
Types of property 'subscribe' are incompatible.
Type '(snapshot: import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").Snapshot, callback: (snapshot: import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").Snapshot) => void) => import("C:/Users/da...' is not assignable to type '(snapshot: import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").Snapshot, callback: (snapshot: import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/s...'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'snapshot' and 'snapshot' are incompatible.
Type 'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").Snapshot' is not assignable to type 'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").Snapshot'.
The types of 'selector.node.metadata' are incompatible between these types.
Type '{ readonly connection?: readonly import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly refetch?: import("C:/Users/dakup...' is not assignable to type '{ readonly connection?: readonly import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly ...'.
Type '{ readonly connection?: readonly import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly refetch?: import("C:/Users/dakup...' is not assignable to type '{ readonly connection?: readonly import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly ...'. Types of property 'refetch' are incompatible.
Type 'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata | undefined' is not assignable to type
'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata | undefined'.
Type 'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata' is not assignable to type 'import("C:/Users/dakupc/Documents/.NetDev/AKL/Frontend/node_modules/@types/react-relay/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata'.
Property 'connection' is optional in type 'ReaderRefetchMetadata' but required in type 'ReaderRefetchMetadata'. TS2322

57 |     <BrowserRouter>
58 |       <Router>

59 | | ^
60 |
61 |
62 | ```

[sibelius]

I think you need to open another issue and understand why this is happening

and trying to send a pull request to fix this

[alloy]

I think you probably have multiple copies of relay-runtime in your dependency tree. Check yarn why relay-runtime

[damikun]

I think you probably have multiple copies of relay-runtime in your dependency tree. Check yarn why relay-runtime

Only one... i will try to play with it to get more info..

[alloy]

According to the error you pasted, you have an extra copy at node_modules/@types/react-relay/node_modules/@types/relay-runtime

[damikun]

Interesting i tried to delete whole node modules and reinstall all using yarn, but no result..

[alloy]

Delete the specific directory and manually remove the older version from your yarn.lock file.