import * as React from 'react' ; import { Semigroup } from 'fp-ts/lib/Semigroup' ; import { declareQueries } from './declareQueries' ; import { QueryResult } from '../QueryResult' ; import { EnforceNonEmptyRecord , ObservableQueries , ProductL , ProductP , ProductA } from '../util' ; import { keepQueryResultSemigroup } from './Semigroup' ; type Params < A > = A extends void ? { } : { params : A ; } ; type Props < R extends ObservableQueries > = { queries : EnforceNonEmptyRecord < R > ; render : ( result : QueryResult < ProductL < R > , ProductP < R > > ) => React . ReactNode ; resultSemigroup ? : Semigroup < QueryResult < ProductL < R > , ProductP < R > > > ; } & Params < ProductA < R > > ; param queries param params param render param resultSemigroup example export function WithQueries < P extends ObservableQueries > ( props ) { const renderRef = React . useRef ( props . render ) ; renderRef . current = props . render ; const WrappedComponent = React . useMemo ( ( ) => declareQueries ( props . queries , props . resultSemigroup || keepQueryResultSemigroup < ProductL < P > , ProductP < P > > ( ) ) ( ( { queries } ) => < > { renderRef . current ( queries ) } < />), []); const params = ( props as any ) . params ? ( { queries : ( props as any ) . params } as any ) : { } ; return < WrappedComponent { ... params } / > ; }