fix: error handling (#27)

apps/console/src/app/components/environments/CreateEnvironmentModal.tsx

@@ -3,8 +3,9 @@ import { Modal, Form, Input, Button, Alert } from "antd";
 import { gqlClient, queryClient } from "../../lib/graphql";
 import { css } from "@emotion/css";
 import { slugify } from "../../lib/utils/string-utils";
-import { useState } from "react";
 import { CREATE_ENVIRONMENT } from "../../graphql/mutations/environments";
+import { CreateEnvironmentMutation } from "@pezzo/graphql";
+import { GraphQLErrorResponse } from "../../graphql/types";
 
 interface Props {
   open: boolean;
@@ -19,9 +20,12 @@ type Inputs = {
 
 export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
   const [form] = Form.useForm<Inputs>();
-  const [error, setError] = useState<string | null>(null);
 
-  const createEnvironmentMutation = useMutation({
+  const { mutate, error } = useMutation<
+    CreateEnvironmentMutation,
+    GraphQLErrorResponse,
+    Inputs
+  >({
     mutationFn: (data: Inputs) =>
       gqlClient.request(CREATE_ENVIRONMENT, {
         data: {
@@ -33,15 +37,10 @@ export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
       onCreated(data.createEnvironment.name);
       queryClient.invalidateQueries({ queryKey: ["environments"] });
     },
-    onError: async ({ response }) => {
-      const error = await response.errors[0].message;
-      setError(error);
-    },
   });
 
-  const handleFormFinish = async (values) => {
-    setError(null);
-    createEnvironmentMutation.mutate(values);
+  const handleFormFinish = async (values: Inputs) => {
+    mutate(values);
     form.resetFields();
   };
 
@@ -58,7 +57,9 @@ export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
       onCancel={onClose}
       footer={false}
     >
-      {error && <Alert type="error" message={error} />}
+      {error && (
+        <Alert type="error" message={error.response.errors[0].message} />
+      )}
       <Form
         form={form}
         layout="vertical"

apps/console/src/app/components/prompts/CommitPromptModal.tsx

@@ -6,7 +6,11 @@ import { useState } from "react";
 import { useCurrentPrompt } from "../../lib/providers/CurrentPromptContext";
 import { CREATE_PROMPT_VERSION } from "../../graphql/mutations/prompts";
 import { PromptEditFormInputs } from "../../lib/hooks/usePromptEdit";
-import { CreatePromptVersionInput } from "@pezzo/graphql";
+import {
+  CreatePromptVersionInput,
+  CreatePromptVersionMutation,
+} from "@pezzo/graphql";
+import { GraphQLErrorResponse } from "../../graphql/types";
 
 interface Props {
   open: boolean;
@@ -23,13 +27,22 @@ export const CommitPromptModal = ({
   open,
   onClose,
   onCommitted,
+
   form: editPromptForm,
 }: Props) => {
   const { prompt } = useCurrentPrompt();
   const [form] = Form.useForm<Inputs>();
-  const [error, setError] = useState<string | null>(null);
 
-  const createPromptVersionMutation = useMutation({
+  const { mutate, error } = useMutation<
+    CreatePromptVersionMutation,
+    GraphQLErrorResponse,
+    {
+      message: string;
+      content: string;
+      settings: string;
+      promptId: string;
+    }
+  >({
     mutationFn: (data: CreatePromptVersionInput) => {
       return gqlClient.request(CREATE_PROMPT_VERSION, {
         data: {
@@ -47,11 +60,10 @@ export const CommitPromptModal = ({
     },
   });
 
-  const handleFormFinish = async (values) => {
-    setError(null);
+  const handleFormFinish = async (values: Inputs) => {
     const editPromptValues = editPromptForm.getFieldsValue(true);
 
-    createPromptVersionMutation.mutate({
+    mutate({
       message: form.getFieldValue("message"),
       content: editPromptValues.content,
       settings: editPromptValues.settings,
@@ -68,7 +80,9 @@ export const CommitPromptModal = ({
       onCancel={onClose}
       footer={false}
     >
-      {error && <Alert type="error" message={error} />}
+      {error && (
+        <Alert type="error" message={error.response.errors[0].message} />
+      )}
       <Form
         form={form}
         layout="vertical"

apps/console/src/app/components/prompts/CreatePromptModal.tsx

@@ -5,7 +5,8 @@ import { gqlClient, queryClient } from "../../lib/graphql";
 import { css } from "@emotion/css";
 import { PromptIntegrationSelector } from "./PromptIntegrationSelector";
 import { integrations } from "@pezzo/integrations";
-import { useState } from "react";
+import { CreatePromptMutation } from "@pezzo/graphql";
+import { GraphQLErrorResponse } from "../../graphql/types";
 
 const integrationsArray = Object.values(integrations);
 
@@ -22,9 +23,12 @@ type Inputs = {
 
 export const CreatePromptModal = ({ open, onClose, onCreated }: Props) => {
   const [form] = Form.useForm<Inputs>();
-  const [error, setError] = useState<string | null>(null);
 
-  const createPromptMutation = useMutation({
+  const { mutate, error } = useMutation<
+    CreatePromptMutation,
+    GraphQLErrorResponse,
+    Inputs
+  >({
     mutationFn: (data: Inputs) =>
       gqlClient.request(CREATE_PROMPT, {
         data: {
@@ -36,21 +40,18 @@ export const CreatePromptModal = ({ open, onClose, onCreated }: Props) => {
       onCreated(data.createPrompt.id);
       queryClient.invalidateQueries({ queryKey: ["prompts"] });
     },
-    onError: async ({ response }) => {
-      const error = await response.errors[0].message;
-      setError(error);
-    },
   });
 
   const handleFormFinish = (data: Inputs) => {
-    setError(null);
-    createPromptMutation.mutate(data);
+    mutate(data);
     form.resetFields();
   };
 
   return (
     <Modal title="New Prompt" open={open} onCancel={onClose} footer={false}>
-      {error && <Alert type="error" message={error} />}
+      {error && (
+        <Alert type="error" message={error.response.errors[0].message} />
+      )}
       <Form
         form={form}
         layout="vertical"

apps/console/src/app/graphql/types.ts

@@ -0,0 +1,9 @@
+import { GraphQLError } from "graphql-request/build/esm/types";
+
+export interface GraphQLErrorResponse {
+  response:
+    | {
+        errors: GraphQLError[];
+      }
+    | undefined;
+}