no-more-named-queries.tsx

import React from 'react';
import { compose, graphql } from 'react-apollo';
import { QueryOne, QueryTwo } from './graphql.query';
import { OneQuery, TwoQuery } from '../../lib/_generated-types';

type InputProps = {
    productId: number;
};

type Variables = {
    id: number | null;
};

type DataOne = OneQuery & {
    loadingOne: boolean;
};

type DataTwo = TwoQuery & {
    loadingTwo: boolean
}

const withOne = graphql<InputProps, DataOne, {}, {}>(QueryOne, {
    props: ({ data, ownProps })  => ({
        one: data.one,
        loadingOne: data.loading,
        id: ownProps.productId
    }),
    options: {
        ssr: false
    },
});


const withTwo = graphql<InputProps, DataTwo, Variables, {}>(QueryTwo, {
    props: ({ data, ownProps })  => ({
        loadingTwo: data.loading,
        two: data.two,
        bar: ownProps.productId
    }),
    options: ({ productId }) => ({
        variables: { id: productId },
        ssr: false
    }),
});

/**
 * EXAMPLE STATELESS COMPONENT
 */
const NumbersFunction = ({
    loadingOne,
    loadingTwo,
    one,
    two,
}: InputProps & DataOne & DataTwo) => {
    if (loadingOne || loadingTwo || !one) return null;
    return (
        <h3>
            {one} is less than {two}
        </h3>
    );
};

export const NumbersWithDataF = compose(
    withOne, // executed last
    withTwo, // executed first
)(NumbersFunction);


/**
 * EXAMPLE CLASS
 */
class NumbersClass extends React.Component<InputProps & DataOne & DataTwo> {
    render(): React.ReactNode {
        const { one, two, loadingOne } = this.props;
        if (loadingOne || !one) return null;
        return (
            <h3>
                {one} is less than {two}
            </h3>
        );
    }
}

export const NumbersWithDataC = compose(
    withOne, // executed last
    withTwo, // executed first
)(NumbersClass);