전달 ownProps는

Question

업데이트를 graphql : 어떤 해명

내가 구성 요소를 포장 아폴로 graphql 래퍼를 사용하고 추가되었습니다. OwnProps의 onPaymentLoaded 속성을 래핑 된 함수로 보내고 싶습니다. 이 작업을 수행하려는 시도가 아래에 나와 있습니다. 그러나 Result 인터페이스의 일부로 onPaymentLoaded을 포함하지 않으면 코드가 TypeScript 컴파일러를 지나치지 않습니다. 이것은 매우 혼란 스럽습니다. 제 생각에 Result은 쿼리에서 되돌아 오는 내용을 지정합니다. 바로 Payment입니다. 그렇다면 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} 
      /> 
     ); 
    } 
); 

Answer 1

, shrthand 객체 속성에 대한 구문은 표기법 도트 수 doen't. 또한, 대부분의 경우, onPaymentLoaded가 어쨌든 전달되므로 소품을 변형 할 필요가 없습니다. 둘째

, youve를 완료하고 InputProps 동일하고 생략한다 TProps 세 번째 일반적인 또한

내가 다시 컴포지션의를 사용하는 것이 좋습니다 당신은 TResult을 통과해야 의미

graphql< TResult = {}, TProps = {}, TChildProps = ChildProps<TProps & TResult>

graphql 인핸서가 아마 유일한 것일 것 같은 func를 작성하십시오. 나의 도움이 될 것입니다 경우

희망이 예 :

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 }} 
    /> 


});