returning a hook from a component

usage.tsx

const TrainingView = () => {
  const trainingSlug = useSingleParam(routeParams.TrainingSlug);
  const result = useTrainingViewQuery({
    variables: {
      slug: trainingSlug
    }
  });

  return useHandleData(result)(({ me: { trainingSessions } }) => {
    let [trainingSession] = trainingSessions;
    const training = trainingSession?.training;

    if (!training) {
      return null;
    }

    return (
      <A.Vertical p={A.Spacing.XXL} fullW fullH spacing={A.Spacing.L}>
        <Heading size="lg">{training.name}</Heading>
        <Heading fontWeight="300" size="md">
          {training.course.title}
        </Heading>
        )
      })
    };

useHandleData.tsx

export function useHandleData<TData = any, TVariables = any>(
  result: QueryResult<TData, TVariables>
) {
  return function a(fn: (data: TData | undefined) => any) {
    const { data, loading, error } = result;

    if (loading) return <Spinner />;
    if (error) return <Error error={error.toString()} />;

    return fn(data);
  };
}