Apollo HoC to Hooks

newWithHooks.ts

import React from 'react';
import { useQuery, QueryHookOptions } from '@apollo/react-hooks';
import ErrorBoundary from 'components/ErrorBoundary';
import PagePreloader from 'components/PagePreloader';
import getVendors from 'pages/Admin/queries/getVendors';
import VendorListTable from './VendorListTable';
	
const options: QueryHookOptions = {
  fetchPolicy: 'no-cache',
  variables: { isCorporate: true },
};
	
export default function VendorList(props: any) {
  const { loading, data, error } = useQuery(getVendors, options);

  // show preloaded if loading
  if (loading) return <PagePreloader />;

  // display error if data error
  if (error) return <ErrorBoundary error={error} />;
	
  // we have the data, show the vendors table
  return <VendorListTable vendors={data.vendors} {...props} />;
}

oldWithHoC.js

import { compose, withProps } from 'recompose';
import { graphql } from '@apollo/react-hoc';
import getVendors from 'pages/Admin/queries/getVendors';
import withGraphData from 'utils/withGraphData';
import PagePreloader from 'components/PagePreloader';
import VendorList from './VendorList';

export default compose(
  graphql(getVendors, {
    options: { fetchPolicy: 'no-cache', variables: { isCorporate: true } },
  }),
  withGraphData(PagePreloader),
  withProps(props => ({ vendors: props.data.vendors }))
)(VendorList);