Generating hooks with typescript-react-apollo seems to use the wrong import

[gwesseling]

Hey, we are switching from apollo-tooling to graphql-code-generator for generating TypeScript type definitions for Graphql operations. We are generating the type definitions based on .graphql files inside our front-end, which works fine (so far 🤞). Since we are using React and the Apollo-client in our front-end, we like to auto generate the hooks as well using the @graphql-codegen/typescript-react-apollo package. The current configuration generates the hooks while importing the Graphql mutation/query from the provided .graphql file (we use graphql-tag/loader with webpack*). Unfortunately, the import for the Graphql mutation/query seems to be wrong (might be a misconfiguration on our end?).

Current situation:

import * as Operations from "./AddTripActivity.graphql";
import * as Apollo from "@apollo/client";
// ...
return Apollo.useMutation<AddActivityToDayMutation, AddActivityToDayMutationVariables>(
        Operations.addActivityToDay,
        options,
);

Expected situation:

import Operations from "./AddTripActivity.graphql";
import * as Apollo from "@apollo/client";
// ...
return Apollo.useMutation<AddActivityToDayMutation, AddActivityToDayMutationVariables>(
        Operations,
        options,
);

codegen.ts:

import type {CodegenConfig} from "@graphql-codegen/cli";

const config: CodegenConfig = {
    schema: "http://localhost:8080/graphql",
    documents: ["src/**/*.graphql"],
    overwrite: true,
    generates: {
        "src/js/types/graphql.ts": {
            plugins: [
                {
                    // Disable eslint for generated types files
                    add: {
                        content: "/* eslint-disable */",
                    },
                },
                "typescript",
            ],
        },
        "src/": {
            preset: "near-operation-file",
            presetConfig: {
                extension: ".generated.tsx",
                baseTypesPath: "js/types/graphql.ts",
            },
            plugins: [
                "typescript-operations",
                {
                    "typescript-react-apollo": {
                        documentMode: "external",
                        importDocumentNodeExternallyFrom: "near-operation-file",
                        useTypeImports: true,
                        pureMagicComment: true,
                        // We had to turn off `emitLegacyCommonJSImports` to stop codegen from putting .js behind .graphql
                        emitLegacyCommonJSImports: false,
                    },
                },
            ],
        },
    },
};
export default config;

Packages:

"@graphql-codegen/cli": "2.13.12",
"@graphql-codegen/typescript": "2.8.1",
"@graphql-codegen/typescript-operations": "2.5.6",
"@graphql-codegen/typescript-react-apollo": "3.3.6",
"@graphql-codegen/near-operation-file-preset": "2.4.4",
"@graphql-codegen/add": "3.2.1",

*We are aware that graphql-let exists but it doesn't fit our use case.