Apollo Query Loader

ExampleComponentThatNeedsData.tsx

import * as React from "react";

import QueryLoader from "../QueryLoader";
import useGetDataExample from "../../graphql/queries/useGetDataExample";
import useGetOtherDataExample from "../../graphql/queries/useGetOtherDataExample";

const ExampleComponentThatNeedsData = props => {
  const dataResult = useGetDataExample();
  const otherDataResult = useGetOtherDataExample();

  return (
    <QueryLoader
      results={[dataResult, otherDataResult]}
    >
      {([data, otherData]) => {
        return (
          <SuperCoolUi
            data={data}
            otherData={otherData}
          />
        );
      }}
    </QueryLoader>
  );
};

export default ExampleComponentThatNeedsData;

QueryLoader.tsx

import * as React from "react";
import { QueryResult } from "@apollo/client";

import Loading from "./Loading";

interface IProps {
  results: Array<QueryResult>;
  children: (data: Array<any>, results: Array<QueryResult>) => React.ReactNode;
}

const QueryLoader: React.FC<IProps> = ({ results, children }) => {
  const isLoading = results.some(result => result.loading);
  if (isLoading) {
    return <Loading />;
  }
  const errors = results.map(result => result.error).filter(error => error);
  if (errors.length > 0) {
    return (
      <>
        {errors.map(error => {
          console.error(error);
          return <div>{error!.message}</div>;
        })}
      </>
    );
  }
  const data = results.map(result => result.data);
  return <>{children(data, results)}</>;
};

export default QueryLoader;

unwrapData.ts

import { DocumentNode, QueryResult } from "@apollo/client";
import get from "lodash/get";

export default function unwrapData(
  gqlQuery: DocumentNode,
  result: QueryResult
) {
  const queryDataKey = get(
    gqlQuery,
    "definitions[0].selectionSet.selections[0].name.value"
  );
  if (!queryDataKey) {
    throw new Error("Can not find queryDataKey to unwrap data.");
  }
  return { ...result, data: get(result.data, queryDataKey, null) };
}

useGetDataExample.ts

import { gql, useQuery } from "@apollo/client";

import unwrapData from "../unwrapData";

export const GQL_QUERY = gql`
  query GetDataExample {
    getDataExample {
      id
      name
      otherThing
    }
  }
`;

function useGetDataExample() {
  const result = useQuery(GQL_QUERY);
  return unwrapData(GQL_QUERY, result);
}

export default useGetDataExample;