[typescript-react-apollo] Create options for typed QueryResult, MutationResult and MutationOptions

[eddeee888]

In my projects, I'm using typescript-react-apollo plugin and I find myself having to type things like QueryResult, MutationResult and MutationOptions quite often as I use these types in other components quite often. For example:

// For a Query
export type ViewUserQueryResult = ReactApollo.QueryResult<ViewUserQuery, ViewUserQueryVariables>

// For a Mutation
export type LoginMutationResult = ReactApollo.MutationResult<LoginMutation>
export type LoginMutationOptions = ReactApollo.MutationOptions<LoginMutation, LoginMutationVariables>

There's already a config for withMutationFn as seen here. Is there a plan to support other types?

At the moment, I have forked from master and created options called:

• withResultType: boolean, will generate *QueryResult and *MutaionResult
• withMutationOptionsType: boolean, will generate *MutationOptions

I'm happy to create a PR to add these options if that's a feature we want to have?

[dotansimha]

@eddeee888 a PR would be great. We have this for hooks (#2133), but not for component/hoc.
Thanks!

[18601673727]

Hey sorry for the interrupt, but maybe I'm having troubles with this line:

graphql-code-generator/packages/plugins/typescript/react-apollo/src/visitor.ts

Line 174 in 474a951

return `export type ${mutationOptionsType} = ReactApollo.MutationOptions<${operationResultType}, ${operationVariablesTypes}>;`;

which maybe generates following code:

export type SaveTagsMutationOptions = ReactApollo.MutationOptions<
  SaveTagsMutation,
  SaveTagsMutationVariables
>;

IDE will complain about error like below:

Namespace '"/Users/cool-user/awesome-project/node_modules/@apollo/react-common/lib/index"' has no exported member 'MutationOptions'.ts(2694)

Changed ReactApollo to ReactApolloHooks, seems resolved.

Let me know if this helped, thank you all!

[eddeee888]

Hi @18601673727 !

This is supposed to be used for the non-hook version i.e. react-apollo. I'm not using react-apollo-hooks so I haven't accounted for that :) Maybe someone who has used it before can create a PR for the hook version?

Also, it's worth to double-check if the type name is different between official beta @apollo/react-hooks vs react-apollo-hooks type name

[18601673727]

Hi @eddeee888 !

Got it, this is actually from @apollo/react-hooks integrated build, you could find my setup here. Your fantastic PR already covers a lot, maybe just a few more steps will support both! =)

[dotansimha]

Available in 1.5.0 🎉