0

I'm trying out GraphQL codegen + graphql-typed-document-node. The examples provided by the library works (check out github link). However, when I apply it to my React 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'm guessing there is an issue with React's compiler, but don't understand why it highlighted the row export type Maybe<T> = T | null;. Has anyone faced similar issue?

devfromfinland
  • 39
  • 4
  • The problem seems to be that the generation process produces a `js` file but should produce a `ts` file. Did you use the right order of plugins? – Herku Jan 10 '22 at 21:43
  • The generated file is .ts. Here is the codegen.yml: ```yml schema: back-end/src/graphql/*.ts documents: front-end/src/**/*.ts generates: shared/graphql.ts: - typescript - typescript-resolvers - typescript-operations - typed-document-node ``` – devfromfinland Jan 12 '22 at 07:36
  • Ah okay, the file actually has a ts ending. But it seems like it is not transformed by your webpack typescript transformer maybe? Are you using create-react-app or something else? – Herku Jan 12 '22 at 14:34
  • I'm using create-react-app with typescript template. All typescript codes in the front-end works as expected – devfromfinland Jan 12 '22 at 15:13
  • Are you trying to generate your types into `shared` which is in a parent folder or something? – Herku Jan 12 '22 at 16:00
  • yes, the `shared` folder will contain all shared constants and types which will be used by both `back-end` and `front-end`, and I'm using npm workspaces to manage this monorepo – devfromfinland Jan 13 '22 at 17:09
  • Not sure if you are still working on this problem, but this folder might not be included in your compilation process. `react-scripts` might only compile ts files under `src/`. – Herku Jan 19 '22 at 21:54
  • Before `npm workspaces`, I used `react-app-rewired` to modify and allow importing the `shared` folder since it is outside of scope (import {} from '../../../shared/graphql'). After switching to npm workspaces, shared folder is consider as a package, so I can just import {} from 'shared/graphql' and it works :). I will try to put a sample repo so you can try it out. I haven't touched this one for a week :) – devfromfinland Jan 21 '22 at 05:38
  • This is probably the bug of this library. I reported it here: https://github.com/dotansimha/graphql-typed-document-node/issues/131 – devfromfinland Jan 21 '22 at 20:34
  • Hi @Herku, in case you are still interested in this. I have updated the examples in github: https://github.com/devfromfinland/graphql-typed-document-node/tree/master/examples/apollo-client-3 Feel free to checkout the repo and try out this example. In the root is back-end where types are generated and index.ts file is an example of getting the types correctly with graphql useQuery. I have create a quick create-react-app with react-app-rewired so it can import generated types from root folder. With the useQuery in the App.tsx, the build fails as this post topic – devfromfinland Jan 21 '22 at 21:03

0 Answers0