Как передать regsiterComponent в graphql с помощью машинописного интерфейса? - PullRequest
0 голосов
/ 19 сентября 2019

У меня есть этот Comp, и я хочу передать его в graphql Reaction-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 )

Я получаю эту ошибку машинописи от Comp, когда она передается в GraphQL в последней строке:

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

Я знаком с дженериками, но когда дело доходит до вложенных, кажется, что путаница делает компонент счастливым ...

это интерфейс graphql:

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

1 Ответ

0 голосов
/ 20 сентября 2019

ComponentType<TProps & TChildProps> показывает TProps, то есть первые реквизиты, которые принимает grqphql, передаются в Comp, поэтому первые графические реквизиты должны быть такими же, как Comp реквизиты.в качестве результата последней строкой будет:

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