usePreloadQueryExample.tsx

// ---- routes.ts ---
import * as React from 'react';
import { prepareQuery } from '../../relay';

export default [
  {
    path: path => `${path}Home`,
    component: React.lazy(() => import('./Home')),
    prepare: () => {
      const query = require('./__generated__/HomeQuery.graphql');
      return prepareQuery(query);
    },
  },
];

//----- LazyRoute.tsx ---

import * as React from 'react';
import { Route, RouteProps } from 'react-router-dom';

interface Props extends RouteProps {
  component: React.ComponentType<{ preloadedQuery: any }>;
  loadingComponent?: React.ComponentType;
  prepare?: () => { query: any };
}

const LazyRouter = ({
  prepare,
  component: Component,
  loadingComponent: Loading,
  ...props
}: Props) => {
  const { query } = prepare();
  return (
    <Route {...props}>
      <React.Suspense fallback={<Loading />}>
        <Component preloadedQuery={query} />
      </React.Suspense>
    </Route>
  );
};

export default LazyRouter;