Migration metrics (#523)

* Add useLazyLoadQuery to RepositoryMetrics * Add useFragment to RepositoryMetricsPage
cirruslabs · Mar 9, 2023 · 5df2541 · 5df2541
1 parent cfe5c94
commit 5df2541
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 55 deletions.
diff --git a/src/components/metrics/RepositoryMetricsPage.tsx b/src/components/metrics/RepositoryMetricsPage.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'babel-plugin-relay/macro';
 import React, { useState } from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { makeStyles } from '@mui/styles';
 import RepositoryMetricsCharts from './RepositoryMetricsCharts';
 import Card from '@mui/material/Card';
@@ -12,7 +12,7 @@ import Input from '@mui/material/Input';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
-import { RepositoryMetricsPage_repository } from './__generated__/RepositoryMetricsPage_repository.graphql';
+import { RepositoryMetricsPage_repository$key } from './__generated__/RepositoryMetricsPage_repository.graphql';
 import { MetricsQueryParameters } from './__generated__/RepositoryMetricsChartsQuery.graphql';
 import { Helmet as Head } from 'react-helmet';
 
@@ -30,12 +30,22 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  repository: RepositoryMetricsPage_repository;
+  repository: RepositoryMetricsPage_repository$key;
 }
 
-function RepositoryMetricsPage(props: Props) {
+export default function RepositoryMetricsPage(props: Props) {
+  let repository = useFragment(
+    graphql`
+      fragment RepositoryMetricsPage_repository on Repository {
+        id
+        owner
+        name
+      }
+    `,
+    props.repository,
+  );
+
   let [parameters, setParameters] = useState<MetricsQueryParameters>({});
-  let { repository } = props;
   let classes = useStyles();
 
   function handleChange(event) {
@@ -139,13 +149,3 @@ function cleanEmptyOrNullValues(obj) {
   }
   return result;
 }
-
-export default createFragmentContainer(RepositoryMetricsPage, {
-  repository: graphql`
-    fragment RepositoryMetricsPage_repository on Repository {
-      id
-      owner
-      name
-    }
-  `,
-});
diff --git a/src/scenes/RepositoryMetrics/RepositoryMetrics.tsx b/src/scenes/RepositoryMetrics/RepositoryMetrics.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
-import { QueryRenderer } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
+import { useLazyLoadQuery } from 'react-relay';
 
-import environment from '../../createRelayEnvironment';
-import CirrusLinearProgress from '../../components/common/CirrusLinearProgress';
 import NotFound from '../NotFound';
 import RepositoryMetricsPage from '../../components/metrics/RepositoryMetricsPage';
 import { RepositoryMetricsQuery } from './__generated__/RepositoryMetricsQuery.graphql';
@@ -14,44 +12,38 @@ import TimelineIcon from '@mui/icons-material/Timeline';
 
 export default function RepositoryMetrics(parentProps): JSX.Element {
   const { platform, owner, name } = useParams();
-  return (
-    <QueryRenderer<RepositoryMetricsQuery>
-      environment={environment}
-      variables={{ platform, owner, name }}
-      query={graphql`
-        query RepositoryMetricsQuery($platform: String!, $owner: String!, $name: String!) {
-          ownerRepository(platform: $platform, owner: $owner, name: $name) {
-            ...AppBreadcrumbs_repository
-            ...RepositoryMetricsPage_repository
-          }
-          viewer {
-            ...AppBreadcrumbs_viewer
-          }
-        }
-      `}
-      render={({ error, props }) => {
-        if (!props) {
-          return <CirrusLinearProgress />;
+
+  const response = useLazyLoadQuery<RepositoryMetricsQuery>(
+    graphql`
+      query RepositoryMetricsQuery($platform: String!, $owner: String!, $name: String!) {
+        ownerRepository(platform: $platform, owner: $owner, name: $name) {
+          ...AppBreadcrumbs_repository
+          ...RepositoryMetricsPage_repository
         }
-        if (!props.ownerRepository) {
-          return <NotFound message={error} />;
+        viewer {
+          ...AppBreadcrumbs_viewer
         }
-        return (
-          <>
-            <AppBreadcrumbs
-              repository={props.ownerRepository}
-              viewer={props.viewer}
-              extraCrumbs={[
-                {
-                  name: 'Metrics',
-                  Icon: TimelineIcon,
-                },
-              ]}
-            />
-            <RepositoryMetricsPage repository={props.ownerRepository} {...parentProps} />
-          </>
-        );
-      }}
-    />
+      }
+    `,
+    { platform, owner, name },
+  );
+
+  if (!response.ownerRepository) {
+    return <NotFound />;
+  }
+  return (
+    <>
+      <AppBreadcrumbs
+        repository={response.ownerRepository}
+        viewer={response.viewer}
+        extraCrumbs={[
+          {
+            name: 'Metrics',
+            Icon: TimelineIcon,
+          },
+        ]}
+      />
+      <RepositoryMetricsPage repository={response.ownerRepository} {...parentProps} />
+    </>
   );
 }