React-apollo: Mutation function causes typescript error 2453 (not a valid type argument)

[skosch]

I'm applying Apollo's functionality on my component as follows:

export const InternalSettings = compose(
  graphql(internalSettingsQuery),
  graphql(updateInternalSettingsMutation, {
    props: ({mutate}) => ({
      updateMutation: (changes: any) => mutate({
        variables: {
          input: {internalSettings: changes, clientMutationId: '0'},
        }
      })
    })
  }),
)(LoadingSpinnerWrapper(InternalSettingsComponent))

This works fine as a JS file, but compiling with TypeScript results in an error:

    TS2453: The type argument for type parameter 'A' cannot be inferred from the usage. Consider specifying the type arguments explicitly.
  Type argument candidate 'CompositeComponent<{ data?: QueryProps; mutate?: MutationFunc<{}>; }>' is not a valid type argument because it is not a supertype of candidate 'ComponentClass<{}>'.
    Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<{ data?: QueryProps; mutate?: MutationFunc<{}>; }>'.
      Types of property 'propTypes' are incompatible.
        Type 'ValidationMap<{}>' is not assignable to type 'ValidationMap<{ data?: QueryProps; mutate?: MutationFunc<{}>; }>'.
          Property 'data' is missing in type 'ValidationMap<{}>'.

Do I need to explicitly type things in my mutation query setup? If yes, how, and is this documented somewhere? Thanks!

Version

• [email protected]
• [email protected]

[stale[bot]]

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if not further activity occurs. Thank you for your contributions to React Apollo!

[estaub]

I'm no expert, but it looks to me like the design of the react-apollo types prevents use of nested mutation and query on a component without some fakery. The definition of the TResult generic parameter comes into conflict from the component having both a query and mutation.

A workaround, in my case, was to remove the mutation from the component's props generic parameter, and then invoke the mutation via this.props['mutation_name']. Any port in a storm...

If anyone can demonstrate successful _clean_ use (as opposed to my hack) of nested query and mutation, please show!

Wild guess: a fix might be to use different generic parameters for TResult for mutation and query.

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!