如何解决GraphQL打字稿参数类型不兼容
我正在关注react tutorial。但是,似乎存在版本不匹配,我无法匹配我的类型。特别是,我的代码当前如下所示:
import * as React from "react";
import { graphql,ChildMutateProps } from "react-apollo";
import gql from "graphql-tag";
import {
RegisterMutation,RegisterMutationVariables,} from "./RegisterMutation";
interface Props {
children: (data: {
submit: (values: any) => Promise<null>;
}) => JSX.Element | null;
}
export class C extends React.PureComponent<
ChildMutateProps<Props,RegisterMutation,RegisterMutationVariables>
> {
submit = async (values: any) => {
console.log(values);
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(registerMutation)(C);
这会导致编译错误:
Argument of type 'typeof C' is not assignable to parameter of type 'ComponentType<Partial<DataProps<{},{}>> & Partial<MutateProps<{},{}>>>'.
Type 'typeof C' is not assignable to type 'ComponentClass<Partial<DataProps<{},{}>>,any>'.
Types of parameters 'props' and 'props' are incompatible.
Property 'children' is missing in type 'Partial<DataProps<{},{}>>' but required in type 'Readonly<ChildMutateProps<Props,RegisterMutationVariables>>'.
尝试了可能的解决方案:
- 引入通用类型(
>),最后一行上的graphql调用会引入更多类似性质的错误。 - 使用“ any”而不是RegisterMutation和RegisterMutationVariables进行键入会导致相同的错误,使我相信ChildMutateProps有所更改。
解决方法
这是工作解决方案的外观,react-apollo/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,RegisterMutationVariables,WithMutateProps
>(registerMutation)(C);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。