dotansimha / graphql-code-generator-community

MIT License
114 stars 147 forks source link

[import-types-preset] Types should be imported only when the are external to the generated file #132

Open jakubmazanec opened 3 years ago

jakubmazanec commented 3 years ago

It seems import-types preset adds "Types." prefix to all types, regardless if they actualy need to be imported.

Codegen config:

generates:
    src/api/index.ts:
        schema: './node_modules/@foo/graphql-schema/schema.graphql'
        documents: './queries.graphql'
        preset: import-types
        presetConfig:
            typesPath: '@foo/graphql-schema'
        plugins:
            - typescript-operations
            - typescript-react-apollo
        config:
            withHooks: true

Types for the schema (i.e. those generated by typescript plugin) and the schema itself are in package @foo/graphql-schema. Code generated by typescript-operations is ok, it contains typed GraphQL operations specified in queries.graphql and uses types imported from @foo/graphql-schema. But the code generated by typescript-react-apollo also tries to import stuff - but it shouldn't, as types for queries are defined right next to it, e.g.:

import * as Types from '@foo/graphql-schema';

// ...

// `SocialMediaLinks` is imported from `Types`, good
export type GetFooterDataQuery = { __typename?: 'Query' } & {
    socialMediaLinks?: Types.Maybe<
        Array<Types.Maybe<{ __typename?: 'SocialMediaLinks' } & Pick<Types.SocialMediaLinks, 'title' | 'type' | 'url'>>>
    >;
};

// ...

// oh no, `GetFooterDataQuery` doesn't exist on `Types`!
export function useGetFooterDataQuery(
    baseOptions?: Apollo.QueryHookOptions<Types.GetFooterDataQuery, Types.GetFooterDataQueryVariables>,
) {
    const options = { ...defaultOptions, ...baseOptions };
    return Apollo.useQuery<Types.GetFooterDataQuery, Types.GetFooterDataQueryVariables>(GetFooterDataDocument, options);
}

For now I think I solved it by splitting the generation in two steps, first generate types for operations, and then generate Apollo hooks using import-plugin once again, but importing the types generated in the first step - I assume that it's okay, because typescript-react-apollo doesn't actually need the schema types?

dotansimha commented 3 years ago

Hi @jakubmazanec and thank you for the report!

Sorry but I'm not adding a lot here but just labeling it according to our new Contribution Guide and issue flow.

It seems like we are on stage 0. Now in order to advance to stage 1 we'll need an easily running reproduction, do you think you can create that on code sandbox?

Thank you and sorry that this comment is not a complete solution (yet).

jakubmazanec commented 3 years ago

Here is GitHub repo: https://github.com/jakubmazanec/graphql-codegen-import-types-preset

npm install
npm run codegen

File output/operations.ts, lines 55-65 should show the issue.

Is this ok for reproduction? Thanks for finding time to look at this.

dotansimha commented 3 years ago

I think initially this was intended to be typescript + typescript-operations in one file, and then typescript-react-apollo in another file with that preset, this way all types are prefixed. So this might be a use-case that isn't fully supported yet... PRs are always welcome!

ProdigySim commented 2 years ago

In my use, typescript-operations is generated based on the consumer query definitions, so it makes more sense for it to be colocated with typescript-react-apollo. Whereas typescript is generated solely from the GQL Schema. A solution to this issue would be helpful for me

chazmuzz commented 10 months ago

This problem still exists