Failed to compile in React Typescript with graphql-typed-document-node #131
Description
Hi, I'm trying out your library. The example works fine for me, but when I apply it to my app, it failed to compile.
I have generated the types from backend schema and frontend operations. The file looks like this
import { GraphQLResolveInfo } from 'graphql';
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
export type RequireFields<T, K extends keyof T> = { [X in Exclude<keyof T, K>]?: T[X] } & { [P in K]-?: NonNullable<T[P]> };
... all types
export const AllChannelsDocument = {...} as unknown as DocumentNode<AllChannelsQuery, AllChannelsQueryVariables>;
My query:
export const ALL_CHANNELS = gql`
query allChannels {
allChannels {
id
name
}
}
`;
My functional component:
import { AllChannelsDocument } from './generated-type'
import { ALL_CHANNELS } from './operations.ts'
function ChannelList(): JSX.Element {
const test = useQuery(AllChannelsDocument);
return (
...
)
}
If I use useQuery(ALL_CHANNELS), it works but without type.
If I use useQuery(AllChannelsDocument), I can see the type showing, but it failed to run the React App.
Here is the error message
Failed to compile.
../generated-type.ts 6:7
Module parse failed: Unexpected token (6:7)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { GraphQLResolveInfo } from 'graphql';
| import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
> export type Maybe<T> = T | null;
| export type InputMaybe<T> = Maybe<T>;
| export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
I have searched stackoverflow and found that I should downgrade react-scripts to 4.0.1. I did but it doesn't help resolving the issue.
Package versions in root (monorepo)
"dependencies": {
"graphql": "^15.8.0",
"typescript": "^4.5.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.3.1",
"@graphql-codegen/introspection": "2.1.1",
"@graphql-codegen/typed-document-node": "^2.2.2",
"@graphql-codegen/typescript": "2.4.2",
"@graphql-codegen/typescript-operations": "2.2.2",
"@types/node": "^17.0.8"
}
Package versions in React App
"dependencies": {
"@apollo/client": "^3.5.6",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.1",
"shared": "*",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
}
I couldn't find any requirement regarding compileOptions for your library to work with React. I wonder what is the cause of this issue? (btw, I had to downgrade graphql to v15 for it to work with your example)