Webpack config for `graphql-let` breaks HMR

[alex-vladut]

I configured graphql-let for a small project to generate the document types for the .graphql files. As I added the Webpack config to use graphql-let loader it breaks the hot module reload feature and every change I make to the code restarts the server making the development process suboptimal.

For reference, here is the project when I configured it https://github.com/alex-vladut/aws-amplify-cdk, and the Webpack config could be found here https://github.com/alex-vladut/aws-amplify-cdk/blob/main/apps/todo/webpack.config.js.

Another issue I encountered is that whenever I make a change to any graphql file the type file is correctly generated, but for some reason, the typescript compiler is not updated and still shows an error. If I restart the app, it picks up the types as expected and works fine. As an example, let's say I have the following file getUser.graphql

query User($id: ID!) {
  getUser(id: $id) {
    id
   # name
  }
}

It is referenced in a React component as follows:

import { useQuery } from '@apollo/client';
import { UserDocument } from './getUser.graphql';

export function UserFromLib() {
  const { data, loading, error } = useQuery(UserDocument);
  return <div>{data?.getUser?.name}</div>;
}

Notice that here I reference the name field which was not defined in the query. While the app is running, even if the field is added to be returned from the Graphql query, it still shows a typescript compilation error that name is not defined. graphql-let correctly updated the type file though.

I would be curious if anyone encountered such issues in their projects and found a solution, or could point me to possible things I can do to further investigate. Thanks for your help.

[comp615]

This could be tangential to your original ask and may not solve it, but you might look at using the hook generated by graphql-let directly as the typing on that might be better. In your example above, it'd be something like:

import { useGetUserQuery } from './getUser.graphql';

export function UserFromLib() {
  const { data, loading, error } = useGetUserQuery();
  return <div>{data?.getUser?.name}</div>;
}

[alex-vladut]

Thank you for your suggestion 👍. I gave it a try and replaced the typed-document-node with typescript-react-apollo in the config, but for some reason the HMR is still broken for me. I will keep digging, not sure what could be the issue here. I would prefer to have the framework-agnostic TypedDocumentNodes, but I agree with you if this is not as reliable as the apollo plugin I could used apollo too.

It would be great if the Apollo document nodes were typed, but it seems it generates a simple untyped DocumentNode:

...
export declare const UserDocument: Apollo.DocumentNode;