refactor: rewrite useFlow and useStepConnection with RQ

packages/web/src/components/EditorLayout/index.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -8,6 +8,7 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import Snackbar from '@mui/material/Snackbar';
+
 import { EditorProvider } from 'contexts/Editor';
 import EditableTypography from 'components/EditableTypography';
 import Container from 'components/Container';
@@ -15,17 +16,20 @@ import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
-import { GET_FLOW } from 'graphql/queries/get-flow';
 import * as URLS from 'config/urls';
 import { TopBar } from './style';
+import useFlow from 'hooks/useFlow';
+import { useQueryClient } from '@tanstack/react-query';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const [updateFlow] = useMutation(UPDATE_FLOW);
   const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
-  const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId } });
-  const flow = data?.getFlow;
+  const { data, isLoading: isFlowLoading } = useFlow(flowId);
+  const flow = data?.data;
+  const queryClient = useQueryClient();
+
   const onFlowNameUpdate = React.useCallback(
     async (name) => {
       await updateFlow({
@@ -38,14 +42,17 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlow: {
             __typename: 'Flow',
-            id: flow?.id,
+            id: flowId,
             name,
           },
         },
       });
+
+      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
     },
-    [flow?.id],
+    [flowId, queryClient],
   );
+
   const onFlowStatusUpdate = React.useCallback(
     async (active) => {
       await updateFlowStatus({
@@ -58,14 +65,17 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlowStatus: {
             __typename: 'Flow',
-            id: flow?.id,
+            id: flowId,
             active,
           },
         },
       });
+
+      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
     },
-    [flow?.id],
+    [flowId, queryClient],
   );
+
   return (
     <>
       <TopBar
@@ -94,7 +104,7 @@ export default function EditorLayout() {
             </IconButton>
           </Tooltip>
 
-          {!loading && (
+          {!isFlowLoading && (
             <EditableTypography
               variant="body1"
               onConfirm={onFlowNameUpdate}
@@ -124,7 +134,7 @@ export default function EditorLayout() {
       <Stack direction="column" height="100%">
         <Container maxWidth="md">
           <EditorProvider value={{ readOnly: !!flow?.active }}>
-            {!flow && !loading && 'not found'}
+            {!flow && !isFlowLoading && 'not found'}
 
             {flow && <Editor flow={flow} />}
           </EditorProvider>