How to use the @apollo/client.useMutation function in @apollo/client

export function useDeclineMutation(baseOptions?: ApolloReactHooks.MutationHookOptions) {
  return ApolloReactHooks.useMutation(Operations.Decline, baseOptions);
}
export type DeclineMutationHookResult = ReturnType;

function Index(): JSX.Element {
  const classes = useStyles();
  const router = useRouter();
  const [input, setInput] = useState(null);
  const { error: activeProjErr, data: activeProjData } = useQuery(
    ACTIVE_PROJECT,
    {
      pollInterval: 1000,
    }
  );
  const [
    openProject,
    { error: openProjErr, data: openProjData, loading: openProjLoading },
  ] = useMutation(OPEN_PROJECT, {
    onError: () => {},
    onCompleted({ openProject }) {
      if (openProject) {
        router.push("/get-started");
      }
    },
    update(cache, { data: { openProject } }) {
      cache.modify({
        fields: {
          activeProject() {
            const activeProjRef = cache.writeFragment({
              id: openProject.name,
              data: openProject,
              fragment: gql`
                fragment ActiveProject on Project {
                  name

name
                  isActive
                  type
                }
              `,
            });
            return DELETE;
          },
          httpRequestLogFilter(_, { DELETE }) {
            return DELETE;
          },
        },
      });
    },
  });
  const [closeProject, { error: closeProjErr }] = useMutation(CLOSE_PROJECT, {
    errorPolicy: "all",
    onError: () => {},
    update(cache) {
      cache.modify({
        fields: {
          activeProject() {
            return null;
          },
          projects(_, { DELETE }) {
            return DELETE;
          },
          httpRequestLogFilter(_, { DELETE }) {
            return DELETE;
          },
        },
      });

const [isJoinNetworkModalOpen, setJoinNetworkModalOpen] = useState(false)
  const [isConnectPeerModalOpen, setConnectPeerModalOpen] = useState(false)

  const getNodeQuery = useQuery(GET_NODE, {
    variables: { id: nodeId },
  })

  const getNodeInterfacesQuery = useQuery(GET_INTERFACES, {
    variables: { nodeId, networkId: '' },
  })

  const getNodeConnectionsQuery = useQuery(GET_CONNECTIONS, {
    variables: { nodeId, interfaceId: '', networkId: '' },
  })

  const [createConnection, createConnectionMutation] = useMutation(CREATE_CONNECTION)
  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE)
  const [updateInterface, updateInterfaceMutation] = useMutation(UPDATE_INTERFACE)
  const [updateConnection, updateConnectionMutation] = useMutation(UPDATE_CONNECTION)
  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)
  const [deleteConnection, deleteConnectionMutation] = useMutation(DELETE_CONNECTION)

  useEffect(() => {
    window.scrollTo(0, 0)
    getNodeQuery.refetch()
    getNodeInterfacesQuery.refetch()
    getNodeConnectionsQuery.refetch()
  }, [location])

  useEffect(() => {
    if (location.state != null) {
      setTimeout(() => {

const getNodeQuery = useQuery(GET_NODE, {
    variables: { id: nodeId },
  })

  const getNodeInterfacesQuery = useQuery(GET_INTERFACES, {
    variables: { nodeId, networkId: '' },
  })

  const getNodeConnectionsQuery = useQuery(GET_CONNECTIONS, {
    variables: { nodeId, interfaceId: '', networkId: '' },
  })

  const [createConnection, createConnectionMutation] = useMutation(CREATE_CONNECTION)
  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE)
  const [updateInterface, updateInterfaceMutation] = useMutation(UPDATE_INTERFACE)
  const [updateConnection, updateConnectionMutation] = useMutation(UPDATE_CONNECTION)
  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)
  const [deleteConnection, deleteConnectionMutation] = useMutation(DELETE_CONNECTION)

  useEffect(() => {
    window.scrollTo(0, 0)
    getNodeQuery.refetch()
    getNodeInterfacesQuery.refetch()
    getNodeConnectionsQuery.refetch()
  }, [location])

  useEffect(() => {
    if (location.state != null) {
      setTimeout(() => {
        setSelectedConnectionId(location.state.connectionId)
      }, 300)
    }

export function useUpdateVehicleGraph( options?: Omit, 'mutation'> ) {
      const lazyMutation = useMutation(UpdateVehicleGraphDocument, options );
      
      const pickObjects = (mutation:UpdateVehicleGraphMutation | null | undefined) => { return ( mutation && mutation.update_vehicle && mutation.update_vehicle!.returning ); };
      
      const wrappedLazyMutation = async ( options: MutationFunctionOptions ) => {
        const fetchResult = await lazyMutation[0]( options );
        return { ...fetchResult, objects: pickObjects(fetchResult.data) }
      };

      return [ wrappedLazyMutation, { ...lazyMutation[1], objects: pickObjects(lazyMutation[1].data) } ] as [typeof wrappedLazyMutation, typeof lazyMutation[1] & { objects: ReturnType }];
    }

export function useInsertVehicleGraphLocationOnly( options?: Omit, 'mutation' | 'variables'> ) {
    const lazyMutation = useMutation( InsertVehicleGraphLocationOnlyDocument, options );
                                
    const pickVehicleGraphLocationOnly = (mutation:InsertVehicleGraphLocationOnlyMutation | null | undefined) => { return ( mutation && mutation.insert_vehicle && mutation.insert_vehicle!.returning && mutation.insert_vehicle!.returning[0] ); };
    
    const wrappedLazyMutation = async ({ vehicle, options } :{ vehicle: Vehicle_Insert_Input, options?: Omit, 'variables'> }) => {
      const fetchResult = await lazyMutation[0]({ variables: { objects: [vehicle] }, ...options });
      return { ...fetchResult, vehicleGraphLocationOnly: pickVehicleGraphLocationOnly(fetchResult.data) };
    };

    return [ wrappedLazyMutation, { ...lazyMutation[1], vehicleGraphLocationOnly: pickVehicleGraphLocationOnly(lazyMutation[1].data) } ] as [typeof wrappedLazyMutation, typeof lazyMutation[1] & { vehicleGraphLocationOnly: ReturnType }];
  }

export function useInsertVehicleGraphWithOnConflict( options?: Omit, 'mutation' | 'variables'> ) {
    const lazyMutation = useMutation( InsertVehicleGraphWithOnConflictDocument, options );
                                
    const wrappedLazyMutation = async ({ vehicle, onConflict, options } :{ vehicle: Vehicle_Insert_Input, onConflict?: Vehicle_On_Conflict, options?: Omit, 'variables'> }) => {
      const fetchResult = await lazyMutation[0]({ variables: { objects: [vehicle], onConflict }, ...options });
      return { ...fetchResult, vehicleGraph: pickVehicleGraph(fetchResult.data) };
    };

    const pickVehicleGraph = (mutation:InsertVehicleGraphMutation | null | undefined) => { return ( mutation && mutation.insert_vehicle && mutation.insert_vehicle!.returning && mutation.insert_vehicle!.returning[0] ); };

    return [ wrappedLazyMutation, { ...lazyMutation[1], vehicleGraph: pickVehicleGraph(lazyMutation[1].data) } ] as [typeof wrappedLazyMutation, typeof lazyMutation[1] & { vehicleGraph: ReturnType }];
  }

const [isConnectPeerModalOpen, setConnectPeerModalOpen] = useState(false)

  const getNodeQuery = useQuery(GET_NODE, {
    variables: { id: nodeId },
  })

  const getNodeInterfacesQuery = useQuery(GET_INTERFACES, {
    variables: { nodeId, networkId: '' },
  })

  const getNodeConnectionsQuery = useQuery(GET_CONNECTIONS, {
    variables: { nodeId, interfaceId: '', networkId: '' },
  })

  const [createConnection, createConnectionMutation] = useMutation(CREATE_CONNECTION)
  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE)
  const [updateInterface, updateInterfaceMutation] = useMutation(UPDATE_INTERFACE)
  const [updateConnection, updateConnectionMutation] = useMutation(UPDATE_CONNECTION)
  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)
  const [deleteConnection, deleteConnectionMutation] = useMutation(DELETE_CONNECTION)

  useEffect(() => {
    window.scrollTo(0, 0)
    getNodeQuery.refetch()
    getNodeInterfacesQuery.refetch()
    getNodeConnectionsQuery.refetch()
  }, [location])

  useEffect(() => {
    if (location.state != null) {
      setTimeout(() => {
        setSelectedConnectionId(location.state.connectionId)

const NewNetwork = () => {
  const navigate = useNavigate()
  const { success, error } = useToast()

  const formik = useFormik({
    initialValues: {
      name: '',
      addressRange: '',
    },
    validationSchema: Yup.object().shape({
      name: Yup.string().required().nullable(),
      addressRange: Yup.string().required().nullable(),
    }),
  })

  const [createNetwork, createNetworkMutation] = useMutation(CREATE_NETWORK, {
    variables: {},
    onCompleted: () => {
      success('Network created')
      navigate('/ui/networks/')
    },
  })

  const handleSaveButtonClick = () => {
    formik.validateForm().then((errors) => {
      if (_.isEmpty(errors)) {
        createNetwork({ variables: { ...formik.values } })
          .then(() => {
            navigate('/ui/networks')
          })
          .catch(() => {})
      } else {