Typescript 将ownProps传递到Apollo graphql包装的组件中

更新：添加了一些澄清

我正在使用Apollo

graphql

包装器来包装组件。我想将

onPaymentLoaded

属性从

OwnProps

发送到包装函数中。我的尝试如下所示。但是，如果我没有将

onPaymentLoaded

作为

结果

接口的一部分，则代码不会通过TypeScript编译器。这很令人困惑。我的理解是，

Result

指定了查询返回的内容，即

支付

。那么，如果我没有在PaymentLoaded上添加

onPaymentLoaded

，编译器为什么会抱怨呢

const PAYMENT_QUERY = gql`
    query payment($id: ID!) {
        payment(id: $id) {
            id
            amount
        }
    }
`;

interface Result {
    payment: Payment;
    // ----- If I don't include onPaymentLoaded in the Result,
    //       I get the error shown below. I don't understand why.
    //       onPaymentLoaded is not part of the query result!!!
    onPaymentLoaded: (payment: Payment) => void;
}

type WrappedProps = Result & QueryProps;

interface OwnProps {
    paymentid: string;
    onPaymentLoaded: (payment: Payment) => void;
}

const withPayment = graphql<
    Result,
    OwnProps,
    WrappedProps
>(PAYMENT_QUERY, {
    options: ({ paymentid }) => ({
        variables: { id: paymentid }
    }),
    props: ({ data, ownProps }) => ({ ...data, ownProps })
});

export const PaymentContainer = withPayment(
    // ----- Error if interface Result above does not include onPaymentLoaded:
    //       Type 'Response & QueryProps<OperationVariables> &
    //       { children?: ReactNode; }' has no property 'onPaymentLoaded'
    //       and no string index signature."
    ({ loading, error, payment, onPaymentLoaded }) => {
        return (
            <PaymentView
                loading={loading}
                error={error}
                payment={payment}
                onPaymentLoaded={onPaymentLoaded}
            />
        );
    }
);

const PAYMENT\u QUERY=gql`
查询付款（$id:id！）{
付款（id:$id）{
身份证件
数量
}
}
`;
接口结果{
付款：付款；
//-----如果结果中未包含onPaymentLoaded，
//我得到的错误如下所示。我不明白为什么。
//onPaymentLoaded不是查询结果的一部分！！！
onPaymentLoaded：（付款：付款）=>作废；
}
类型wrappedrops=Result&QueryProps；
界面道具{
paymentid:string；
onPaymentLoaded：（付款：付款）=>作废；
}
const with payment=graphql<
结果,，
自己的道具，
包装袋
>（付款查询）{
选项：（{paymentid}）=>({
变量：{id:paymentid}
}),
props:（{data，ownProps}）=>（{…data，ownProps}）
});
export const PaymentContainer=withPayment(
//----如果上面的接口结果不包括onPaymentLoaded，则出错：
//“类型”响应和查询rops&
//{children？：ReactNode；}'没有属性'onPaymentLoaded'
//而且没有字符串索引签名。”
（{加载，错误，付款，onPaymentLoaded}）=>{
返回(
);
}
);

关于第一个错误，对象属性的shrthand语法不允许在符号中使用点。此外，很可能根本不需要转换道具，因为onPaymentLoaded将被传递

第二,

graphql

这意味着您只需要像之前一样传递TResult和TProps，这应该等于您的InputProps，并且省略第三个泛型

我还建议使用recompose的compose func，因为graphql增强器可能不是唯一的增强器

如果我的例子有助于：

import * as React from 'react';
import { compose } from 'recompose';
import graphql from 'react-apollo/graphql';
import { QueryProps } from 'react-apollo';

import { MenuDishQuery } from '@admin/graphql/types.gen';
import { MenuDish as MenuDishPres } from '@admin/components';
import { dataLoadingOrError } from '@common/utils';

const DATA_QUERY = require('./data.gql');

type OwnProps = {
  recipeId: string;
}

type Data = { data: MenuDishQuery.Query & QueryProps }

type WrappedProps = OwnProps & Data;


export const MenuDish = compose<WrappedProps, OwnProps>(

  graphql<MenuDishQuery.Query, WrappedProps>(DATA_QUERY, {
    options: props => ({
      variables: {
        recipeId: props.recipeId
      }
    })
  }),

  dataLoadingOrError()


)(props => {

  const { data } = props;
  const { recipe } = data;

  return <MenuDishPres
    dish={{ recipe }}
  />


});

import*as React from'React'；
从“重新组合”导入{compose}；
从“react apollo/graphql”导入graphql；
从'react apollo'导入{QueryProps}；
从“@admin/graphql/types.gen”导入{MenuDishQuery}；
从“@admin/components”导入{MenuDish as MenuDishPres}；
从'@common/utils'导入{dataLoadingOrError}；
const DATA_QUERY=require（'./DATA.gql'）；
类型OwnProps={
recipeId：字符串；
}
类型数据={Data:MenuDishQuery.Query&QueryProps}
类型wrappedrops=OwnProps&Data；
导出常量MenuDish=compose(
graphql（数据查询{
选项：道具=>({
变量：{
recipeId:props.recipeId
}
})
}),
dataLoadingOrError（）
)（道具=>{
const{data}=props；
常量{recipe}=数据；
返回
});

嗨，丹尼尔，谢谢你的详细回复。自从我发布我的问题以来，我已经得出了类似的结论-因此我将你的答案标记为正确。但是我确实有一个问题没有回答。请查看我对问题和代码的更新。如果你能提供你的想法，那将非常好。P.S.（1）我还没有开始写作，因为我首先试图理解

graphql

HOC的基本用法你可能是对的，我可能根本不需要转换道具-我还没有尝试过。嗨@Naresh，我已经上传了一个要点，我在其中按照我通常的方式重构了你的代码。希望这会有帮助！这非常有帮助，@Daniel。再次感谢你花时间做这件事。