Nl/refactor graphql queries

frontend/graphqlCodegen.ts

@@ -4,7 +4,11 @@ const config: CodegenConfig = {
   overwrite: true,
 
   schema: ["./src/instrument_sessions.graphql", "./src/workflows.graphql"],
-  documents: ["./*/src/components/**/*.{ts,tsx}", "./unified/src/App.tsx"],
+  documents: [
+    "./*/src/components/**/*.{ts,tsx}",
+    "./unified/src/App.tsx",
+    "./unified/src/graphql/**/*.ts",
+  ],
   ignoreNoDocuments: true,
 
   generates: {
@@ -22,6 +26,7 @@ const config: CodegenConfig = {
         importSchemaTypesFrom: "./src/__generated__/types.ts",
         nonOptionalTypename: true,
         skipTypeNameForRoot: true,
+        omitOperationSuffix: true,
       },
       presetConfig: {
         folder: "__generated__",

frontend/unified/src/App.tsx

@@ -1,68 +1,25 @@
 import { useState } from "react";
-import { gql, type TypedDocumentNode } from "@apollo/client";
 import { ApolloProvider, useQuery } from "@apollo/client/react";
 
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Chip,
-  Drawer,
-  Grid,
-  Stack,
-  Typography,
-} from "@mui/material";
-import { ChevronDown } from "lucide-react";
+import { Box, Chip, Drawer, Grid, Stack, Typography } from "@mui/material";
 
 import {
   InstrumentSession,
   SessionSelectionMode,
   SessionSelector,
 } from "./components/SessionSelector";
-import { ScanSelector } from "./components/ScanSelector";
 import WorkflowsDataFetcher from "./components/WorkflowsDataFetcher/WorkflowsDataFetcher";
 
 import { Beamline } from "./types";
 import { apolloClientWorkflows } from "../../src/ApolloClient";
 import { useAuth } from "@diamondlightsource/sci-react-ui";
-import {
-  SessionQueryQuery,
-  SessionQueryQueryVariables,
-} from "./__generated__/App.generated";
 import { Sidebar } from "./components/Sidebar";
 import ProcessingView from "./components/ProcessingView/ProcessingView";
+import { SESSION_QUERY } from "./graphql/SessionQuery";
 
 const VERTICAL_SPACING = 2;
 const HORIZONTAL_SPACING = 2;
 
-export const SESSION_QUERY: TypedDocumentNode<
-  SessionQueryQuery,
-  SessionQueryQueryVariables
-> = gql`
-  query sessionQuery($username: String!) {
-    account(username: $username) {
-      instrumentSessionRoles(first: 1) {
-        edges {
-          node {
-            instrumentSession {
-              proposal {
-                proposalNumber
-                proposalCategory
-              }
-              instrumentSessionNumber
-              instrument {
-                name
-              }
-              startTime
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
 const useFedid = (): string => {
   const token = useAuth().getToken();
   const parseToken = JSON.parse(atob(token.split(".")[1]));

frontend/unified/src/components/SessionSelector.tsx

@@ -7,40 +7,17 @@ import {
   Button,
   Tooltip,
 } from "@mui/material";
-import { SessionQueryQuery } from "../__generated__/App.generated";
-import {
-  GetSessionByReferenceQuery,
-  GetSessionByReferenceQueryVariables,
-} from "./__generated__/SessionSelector.generated";
 import { visitRegex } from "@diamondlightsource/sci-react-ui";
-import { gql, TypedDocumentNode } from "@apollo/client";
 import { useSuspenseQuery } from "@apollo/client/react";
-
-export const GET_SESSION_BY_REFERENCE: TypedDocumentNode<
-  GetSessionByReferenceQuery,
-  GetSessionByReferenceQueryVariables
-> = gql`
-  query GetSessionByReference($reference: String!) {
-    instrumentSessionByReference(reference: $reference) {
-      instrument {
-        name
-      }
-      instrumentSessionNumber
-      proposal {
-        proposalNumber
-        proposalCategory
-      }
-      startTime
-    }
-  }
-`;
+import { SessionQuery } from "../graphql/__generated__/SessionQuery.generated";
+import { SESSIONSELECTOR_QUERY } from "../graphql/SessionSelectorQuery";
 
 export enum SessionSelectionMode {
   Latest = "Latest",
   Custom = "Custom",
 }
 
-type NonNullAccount = NonNullable<SessionQueryQuery["account"]>;
+type NonNullAccount = NonNullable<SessionQuery["account"]>;
 
 export type InstrumentSession =
   NonNullAccount["instrumentSessionRoles"]["edges"][0]["node"]["instrumentSession"];
@@ -119,7 +96,7 @@ const SelectSessionButton: React.FC<SelectSessionButtonProps> = ({
   sessionSelectionMode,
   setSession,
 }) => {
-  const { data } = useSuspenseQuery(GET_SESSION_BY_REFERENCE, {
+  const { data } = useSuspenseQuery(SESSIONSELECTOR_QUERY, {
     variables: { reference: sessionInputValue },
   });
 

frontend/unified/src/components/WorkflowsDataFetcher/InspectLogMeta.tsx

@@ -10,53 +10,8 @@ import {
 } from "@mui/material";
 
 import { useSuspenseFragment } from "@apollo/client/react";
-import { gql, type TypedDocumentNode } from "@apollo/client";
-
-import { InspectLogMetaFragmentFragment } from "./__generated__/InspectLogMeta.generated";
-
-export const INSPECTLOGMETA_FRAGMENT: TypedDocumentNode<InspectLogMetaFragmentFragment> = gql`
-  fragment InspectLogMetaFragment on Workflow {
-    status {
-      __typename
-      ... on WorkflowSucceededStatus {
-        startTime
-        message
-        tasks {
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-      ... on WorkflowErroredStatus {
-        startTime
-        message
-        tasks {
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-      ... on WorkflowFailedStatus {
-        startTime
-        message
-        tasks {
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-    }
-  }
-`;
+import { InspectLogMetaFragment } from "../../graphql/WorkflowDataFetcher/__generated__/InspectLogMetaFragment.generated";
+import { INSPECTLOGMETA_FRAGMENT } from "../../graphql/WorkflowDataFetcher/InspectLogMetaFragment";
 
 type Artifact = {
   name: string;
@@ -69,7 +24,7 @@ type Task = {
   artifacts: Artifact[];
 };
 
-const getTasks = (data: InspectLogMetaFragmentFragment): Task[] => {
+const getTasks = (data: InspectLogMetaFragment): Task[] => {
   if (
     data.status &&
     (data.status.__typename === "WorkflowSucceededStatus" ||
@@ -84,7 +39,7 @@ const getTasks = (data: InspectLogMetaFragmentFragment): Task[] => {
 const InspectLogMeta = ({
   queryData,
 }: {
-  queryData: InspectLogMetaFragmentFragment;
+  queryData: InspectLogMetaFragment;
 }) => {
   const [logUrl, setLogUrl] = useState<string | null>(null);
   const { data } = useSuspenseFragment({

frontend/unified/src/components/WorkflowsDataFetcher/LogStreamer/LogStreamContent.tsx

@@ -1,4 +1,3 @@
-import { gql, TypedDocumentNode } from "@apollo/client";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 import { Box } from "@mui/material";
 import {
@@ -11,26 +10,7 @@ import {
 } from "react";
 import { LogLine } from "./LogLine";
 import { useSubscription } from "@apollo/client/react";
-import {
-  LogStreamContentSubscriptionSubscription,
-  LogStreamContentSubscriptionSubscriptionVariables,
-} from "./__generated__/LogStreamContent.generated";
-
-const LOGSTREAMCONTENT_SUBSCRIPTION: TypedDocumentNode<
-  LogStreamContentSubscriptionSubscription,
-  LogStreamContentSubscriptionSubscriptionVariables
-> = gql`
-  subscription LogStreamContentSubscription(
-    $visit: VisitInput!
-    $workflowName: String!
-    $taskId: String!
-  ) {
-    logs(visit: $visit, workflowName: $workflowName, taskId: $taskId) {
-      content
-      podName
-    }
-  }
-`;
+import { LOGSTREAMCONTENT_SUBSCRIPTION } from "../../../graphql/WorkflowDataFetcher/LogStreamContentSubscription";
 
 const LogStreamContent = ({
   visit,

frontend/unified/src/components/WorkflowsDataFetcher/LogStreamer/LogStreamer.tsx

@@ -1,4 +1,3 @@
-import { gql, TypedDocumentNode } from "@apollo/client";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 import { useSuspenseFragment } from "@apollo/client/react";
 import {
@@ -12,45 +11,10 @@ import {
 } from "@mui/material";
 import { useState } from "react";
 import { setFetchedTasks } from "./utils";
-import LogStreamContent from "./LogStreamContent";
-import { LogStreamerFragmentFragment } from "./__generated__/LogStreamer.generated";
 import { getTaskStatusIcon } from "./getTaskStatusIcon";
-
-export const LOGSTREAMER_FRAGMENT: TypedDocumentNode<LogStreamerFragmentFragment> = gql`
-  fragment LogStreamerFragment on Workflow {
-    status {
-      __typename
-      ... on WorkflowRunningStatus {
-        tasks {
-          id
-          name
-          status
-        }
-      }
-      ... on WorkflowSucceededStatus {
-        tasks {
-          id
-          name
-          status
-        }
-      }
-      ... on WorkflowFailedStatus {
-        tasks {
-          id
-          name
-          status
-        }
-      }
-      ... on WorkflowErroredStatus {
-        tasks {
-          id
-          name
-          status
-        }
-      }
-    }
-  }
-`;
+import { LogStreamerFragment } from "../../../graphql/WorkflowDataFetcher/__generated__/LogStreamerFragment.generated";
+import { LOGSTREAMER_FRAGMENT } from "../../../graphql/WorkflowDataFetcher/LogStreamerFragment";
+import LogStreamContent from "./LogStreamContent";
 
 const LogStreamer = ({
   visit,
@@ -59,7 +23,7 @@ const LogStreamer = ({
 }: {
   visit: Visit;
   selectedWorkflow: string;
-  queryData: LogStreamerFragmentFragment;
+  queryData: LogStreamerFragment;
 }) => {
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
   const { data } = useSuspenseFragment({

frontend/unified/src/components/WorkflowsDataFetcher/Plot/ArtifactSelector.tsx

@@ -1,65 +1,8 @@
-import { gql, TypedDocumentNode } from "@apollo/client";
-import { ArtifactSelectorFragmentFragment } from "./__generated__/ArtifactSelector.generated";
 import { useSuspenseFragment } from "@apollo/client/react";
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { useState } from "react";
-
-export const ARTIFACTSELECTOR_FRAGMENT: TypedDocumentNode<ArtifactSelectorFragmentFragment> = gql`
-  fragment ArtifactSelectorFragment on Workflow {
-    name
-    status {
-      __typename
-      ... on WorkflowRunningStatus {
-        startTime
-        tasks {
-          id
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-      ... on WorkflowSucceededStatus {
-        startTime
-        tasks {
-          id
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-      ... on WorkflowFailedStatus {
-        startTime
-        tasks {
-          id
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-      ... on WorkflowErroredStatus {
-        startTime
-        tasks {
-          id
-          name
-          artifacts {
-            name
-            url
-            mimeType
-          }
-        }
-      }
-    }
-  }
-`;
+import { ArtifactSelectorFragment } from "../../../graphql/WorkflowDataFetcher/__generated__/ArtifactSelectorFragment.generated";
+import { ARTIFACTSELECTOR_FRAGMENT } from "../../../graphql/WorkflowDataFetcher/ArtifactSelectorFragment";
 
 export type Artifact = {
   name: string;
@@ -72,7 +15,7 @@ type TaskNameAndArtifactTuple = [taskName: string, artifacts: Artifact[]];
 type ArtifactSelectorProps = {
   setArtifact: (_: Artifact | null) => void;
   isPlottingEnabled: boolean;
-  queryData: ArtifactSelectorFragmentFragment;
+  queryData: ArtifactSelectorFragment;
 };
 
 const IMAGE_ARTIFACT_MIME_TYPES = ["image/jpeg", "image/tiff"];