Passing ownProps in die Komponente von Apollo gewickelt graphql

Question

Update: Hinzugefügt einige Präzisierungen

ich das Apollo graphql Wrapper bin mit einer Komponente zu wickeln. Ich möchte die onPaymentLoaded Eigenschaft von OwnProps in die verpackte Funktion senden. Mein Versuch, dies zu tun, ist unten gezeigt. Der Code geht jedoch nicht über den TypeScript-Compiler hinaus, wenn ich auch onPaymentLoaded nicht als Teil der Result-Schnittstelle einschließe. Das ist sehr verwirrend. Mein Verständnis ist, dass Result angibt, was aus der Abfrage zurückkommt - das ist nur Payment. Warum also beschwert sich der Compiler, wenn ich onPaymentLoaded nicht hinzufüge?

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

In Bezug auf den ersten Fehler, erlaubt shrthand Syntax für Objekteigenschaften keine Punkte in Notation. Vermutlich müssen Sie Requisiten überhaupt nicht transformieren, da Ihr onPaymentLoaded sowieso weitergegeben wird.

Zweitens

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

was bedeutet, Sie müssen nur TResult passieren, wie Sie getan haben und TProps die Ihre InputProps sollte gleich und die dritte allgemeine

Auch würde ich empfehlen, Neuzusammenstellung zu gebrauchen auslassen komponieren func, da graphql enhancer wahrscheinlich nicht der einzige sein wird.

Hoffen, dass dieses Beispiel, wenn meine helfen:

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


});