Search code examples
typescriptgraphqlapolloreact-apollo

How to pass a regsiterComponent to graphql using typescript interface?


I have this Comp and I want to pass it to the graphql of react-apollo:

import React from 'react'
import { graphql, ChildMutateProps } from 'react-apollo'
import gql from 'graphql-tag'
interface Props {
    children :(
        data:{ submit: (values:any) => Promise<null> }
    ) => JSX.Element | null
}
export class Comp extends React.PureComponent<ChildMutateProps<Props, any, any>> {
    submit = async ( values: any ) => {
        const response = await this.props.mutate({ variables: values })
        console.log( "response: ", response )
        return null
    }

    render() {
        return this.props.children({ submit: this.submit })
    }
}
const registerMutation = gql`
    mutation RegisterMutation( $email: String!, $password: String! ) {
        register( email: $email, password: $password ) {
            path
            message
        }
    }
`
export const RegisterController = graphql <Props> ( registerMutation ) ( Comp )

I get this typescript err from Comp when it is passed to the graphql in the last line :

class Comp
Argument of type 'typeof Comp' is not assignable to parameter of type 'ComponentType<Props & Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
  Type 'typeof Comp' is not assignable to type 'ComponentClass<Props & Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Props & Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>' is not assignable to type 'Readonly<ChildMutateProps<Props, any, any>>'.
        Types of property 'mutate' are incompatible.
          Type 'MutationFunction<{}, {}> | undefined' is not assignable to type 'MutationFunction<any, any>'.
            Type 'undefined' is not assignable to type 'MutationFunction<any, any>'.ts(2345)
Peek Problem
No quick fixes available

I`m familiar with generics but when it comes to nested ones looks to be confusing to make the component happy...

this is the graphql interface:

(alias) graphql<Props, {}, {}, Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>(document: DocumentNode, operationOptions?: OperationOption<Props, {}, {}, Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>> | undefined): (WrappedComponent: React.ComponentType<...>) => React.ComponentClass<...>
import graphql


Solution

  • ComponentType<TProps & TChildProps> shows TProps that is the first props that grqphql takes is passed to Comp, so graphql first props should be same as Comp props. as a resault the last line would be :

    export const RegisterController = graphql <ChildMutateProps<Props, any, any>> ( registerMutation ) ( Comp )