How to handle loading and error state in a generic way?

In react-apollo 2.x, I used to handle loading and error state in a generic way by encapsulating the <Query> component as follows:

import * as React from 'react';

import { Query } from 'react-apollo';
import { CenteredMessage } from './centered-message';

export const DefaultQuery = ({ query, variables = {}, children }) => (
    <Query query={query} variables={variables}>
        {({ loading, error, data, fetchMore, subscribeToMore }) => {
            if (loading) {
                return <CenteredMessage>Loading...</CenteredMessage>;
            }

            if (error) {
                return <CenteredMessage>{error.message}</CenteredMessage>;
            }

            return children({ data, fetchMore, subscribeToMore });
        }}
    </Query>
);

What would be the equivalent pattern with react-apollo-hooks? I started writing a component similar to the above, but it doesn’t feel right to reintroduce render props in a hooks world:

import React, { ReactNode } from 'react';

import { OperationVariables } from 'apollo-client';
import { DocumentNode } from 'graphql';
import { useQuery } from 'react-apollo-hooks';
import { CenteredMessage } from './centered-message';

export interface DefaultQueryProps {
    query: DocumentNode,
    variables: OperationVariables,
    children: ReactNode
}

export const DefaultQuery = ({ query, variables = {}, children }: DefaultQueryProps) => {
    const { data, error, loading } = useQuery(query);
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    // TODO: include fetchMore and subscribeToMore when available
    // return children({ data, fetchMore, subscribeToMore });
    return children({ data });
};

Besides, the above pattern works well for a single query. How would you enhance it to handle multiple parallel queries? In the render props world, I used to nest <DefaultQuery> components to achieve that, but its not very elegant. See my example here - it uses a triple-nested <DefaultQuery>.

[nareshbhatia]

@FredyC, thanks for your help on StackOverflow. I have now fully converted my GraphQL tutorial from render props to hooks (including useSubscription introduced in 0.4.1). I am sure there is room for improvement, so your feedback and suggestions would be very welcome.

I tweeted about my conversion experience here.

[nareshbhatia]

Ah, I definitely glossed over the docs on that one! Implemented your suggestion here and here. Can you please let me know if I can do any better?

It would be even nicer if useQuery() would through exceptions - that would allow me to delete all the error handling from my component and let ErrorBoundary handle it.