Update: Added some additional details
Utilizing the Apollo graphql wrapper to wrap a component, I aim to pass the onPaymentLoaded property from OwnProps into the wrapped function. Despite my efforts, the code does not proceed beyond the TypeScript compiler unless I include onPaymentLoaded as part of the Result interface as well. This situation is quite perplexing. My understanding is that the Result delineates what is expected back from the query - which in this case is just Payment. So why does the compiler raise objections when onPaymentLoaded is omitted?
const PAYMENT_QUERY = gql`
query payment($id: ID!) {
payment(id: $id) {
id
amount
}
}
`;
interface Result {
payment: Payment;
// ----- If onPaymentLoaded is not included in the Result,
// the error mentioned below arises. The issue at hand is puzzling,
// since onPaymentLoaded isn't 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 occurs if onPaymentLoaded is excluded from the Result interface above:
// 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}
/>
);
}
);