如何使用 typescript 接口将 regsiterComponent 传递给 graphql？

Question

我有这个 Comp，我想把它传递给 react-apollo 的 graphql:

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 )

当它在最后一行传递给 graphql 时，我从 Comp 得到了这个打字稿错误：

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

Answer 1

ComponentType<TProps & TChildProps> 显示 TProps 即 graphql 获取的第一个 props 传递给 Comp，因此 graphql 第一个 props 应该与 Comp props 相同。结果最后一行是：

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

Answer 2

我继续完成下一个教程，生成代码，这就是工作解决方案的样子，GraphQL 已经更改了它的参数。

// types
interface ComponentProps {
  children: (data: {
    submit: (values: any) => Promise<null>;
  }) => JSX.Element | null;
}

type WithMutateProps = ChildMutateProps<
  ComponentProps,
  RegisterMutation,
  RegisterMutationVariables
>;

// class definition
export class C extends React.PureComponent<WithMutateProps> { ...

// final controller
export const RegisterController = graphql<
  ComponentProps,
  RegisterMutation,
  RegisterMutationVariables,
  WithMutateProps
>(registerMutation)(C);

如何使用 typescript 接口将 regsiterComponent 传递给 graphql？

How to pass a regsiterComponent to graphql using typescript interface?

typescript

graphql

apollo

react-apollo