I want to use aws amplify for fetching data. So i was thinking to create a custom hooks. So far it's working fine but onError dosen't work as intended

[Parthvsquare]

Is it possible to use aws amplify instead of axios? (we have cognito pool, so different pools will get different data)
the response i like this

{
    "data": null,
    "errors": [
        {
            "path": [
             
            ],
            "locations": null,
            "message": "something went wrong here"
        }
    ]
}

(edited comment for formatting issue)

export function useGQLMutation<TQueryKey extends [string, Record<string, unknown>?], TMutationFnData, TError, TData extends any = TMutationFnData>(
  gqlDoc: string,
  options?: Omit<UseMutationOptions<TMutationFnData, TError, TData, TQueryKey>, "mutationKey" | "mutationFn">
) {
  const awsFetch = (variables: any) => {
    return Promise.resolve(API.graphql({ query: gqlDoc, variables }))
      .then((value) => {
        debugger;
        console.log("===> ~ file: graphqlClient.ts:42 ~ .then ~ value:", value);
        // the expect error is added because value is of type any
        //@ts-expect-error
        if (!value.data) {
          throw new Error(".data is missing in the GraphQL result returned by amplify");
        }
        //@ts-expect-error
        if (value!.errors) {
          throw new Error(value.errors);
        }

        // we get data.data but it typescript does not know that
        //@ts-expect-error
        return value.errors as TMutationFnData;
      })
      .catch((error: any) => {
        return error.errors;
      });
  };

  return useMutation({
    mutationFn: awsFetch,
    ...options,
  });
}

So far i was able to create this custom hook but i can figure out the error part

this is how i use this hook.

const { mutate, isLoading: isMutationLoading } = useGQLMutation({gql doc}, {
    onError: (error: any) => {
      notification.error({
        message: "Cannot mark as resolve",
      });
      modal.error({
        title: "Encountered an Error",
        content: <ReactJson src={error} theme="monokai" />,
        onOk: () => navigate("/"),
        width: "60vh",
      });
    },
    onSuccess: () => {
      notification.success({
        message: "Successfully ......",
      });
    
    },
    onSettled: () => setComponentDisabled(false),
  });

[TkDodo]

but onError dosen't work as intended

you're not returning a rejected promise from the function because this transforms it into a resolved promise:

.catch((error: any) => {
  return error.errors;
});

[Parthvsquare]

Thanks a lot man 👍🏼

      .catch((error: any) => {
        // as the error we get comes in an object we need to check, an cause a onError trigger manually
        return Promise.reject(error.errors);
      });

This trigger the onError.

Btw, do you see any flaws? or any improvements i can make in this code?
I don't get typesafe data, is there a way to fix this?