TS2742

error TS2742: The inferred type of ‘ProductDeleteDocument‘ cannot be named without a reference to ‘graphql-tag/node_modules/graphql/language/ast‘. This is likely not portable. A type annotation is necessary.

Broken Code ❌

1
2
3
4
5
6
7

export const ProductDeleteDocument = gql`
	mutation ProductDelete($productId: ID!) {
		productDelete(input: { id: $productId }) {
			deletedProductId
		}
	}
`;

Fixed Code ✔️

TypeScript asks for a type annotation to explicitly resolve the inferred type, so let’s add a type annotation:

1
2
3
4
5
6
7
8
9

import {DocumentNode} from 'graphql';

export const ProductDeleteDocument: DocumentNode = gql`
	mutation ProductDelete($productId: ID!) {
		productDelete(input: { id: $productId }) {
			deletedProductId
		}
	}
`;

In a monorepository the error TS2742 can show up when you are using a package that has not set a “main” property in its “package.json” file. Sometimes it also happens that there is a “types” property which does not point to the correct typings. Make sure both paths are present and relative:

1
2
3
4

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

You can run into this error when a code generator, such as graphql-code-generator, misses to render an important statement (see here). This can happen when the generator relies on implicit typings (type inference) and it can be fixed by instructing your code generator to render the missing import statement. Depending on your code generator this could be done through a config file:

1
2
3
4
5
6

plugins:
  - add:
    	content: 'import type { DocumentNode } from "graphql/language/ast";'
  - typescript
  - typescript-operations
  - typescript-react-apollo