apollo shenanigans

apollo-shenanigans.js

import React, { Fragment } from 'react';
import { Query, Mutation } from 'react-apollo';
import get from 'lodash/get';

//components
import Loading from 'components/LoadingScreen';

export const QueryWithLoading = ({ children, query, dataPath, loadingComponent = <Loading /> }) => (
  <Query query={query}>
    {({ data, loading }) => (loading ? loadingComponent : children(get(data, dataPath)))}
  </Query>
);

export const UpdateOrDeleteEntity = ({
  deleteMutation,
  updateMutation,
  query,
  variables,
  children
}) => (
  <Query query={query} variables={variables}>
    {({ data, loading: isLoading }) => (
      <Fragment>
        <Mutation mutation={deleteMutation}>
          {(deleteEntityMutation, { loading: isDeleting }) => (
            <Mutation mutation={updateMutation}>
              {(updateEntityMutation, { loading: isUpdating }) =>
                children({
                  mutations: { delete: deleteEntityMutation, update: updateEntityMutation },
                  isDeleting,
                  isLoading,
                  isUpdating,
                  data
                })
              }
            </Mutation>
          )}
        </Mutation>
      </Fragment>
    )}
  </Query>
);