WithQuery.js

//--------------------------------------------------------------------
// COMPONENT DEFINITION:
//--------------------------------------------------------------------
// See renderProps: https://www.youtube.com/watch?v=BcVAq3YFiuc

import React from 'react';
import PropTypes from 'prop-types';
import { Query } from 'react-apollo';
import Text from '../Components/Text';
import CenteredActivityIndicator from '../Components/CenteredActivityIndicator';

const WithQuery = ({ children, ...rest }) => (
  <Query {...rest}>
    {(queryProps) => {
      if (queryProps.error) {
        return <Text>Error :( {JSON.stringify(queryProps.error)}</Text>;
      }

      if (queryProps.loading) {
        return <CenteredActivityIndicator />;
      }

      return children(queryProps);
    }}
  </Query>
);

WithQuery.propTypes = {
  children: PropTypes.func.isRequired,
};

export default WithQuery;

//--------------------------------------------------------------------
// USAGE:
//--------------------------------------------------------------------
const SpotsMapScreen = ({ navigation }) => {
  const handleCardPress = (spotId) => {
    navigation.navigate('SpotDetailsScreen', {
      uuid: spotId,
    });
  };

  return (
    <WithQuery query={GET_SPOTS}>
      {({ data }) => (
        <SpotsMapWithListFallback
          spots={data.spots}
          cardComponent={Card}
          onCardPress={handleCardPress}
        />
      )}
    </WithQuery>
  );
};