refactor(web): handle GQL errors w useSetAtom (#528)

web/src/services/gql/provider.tsx

@@ -10,6 +10,7 @@ import type { ReactNode } from "react";
 import { reportError } from "@reearth/sentry";
 import { useAuth } from "@reearth/services/auth";
 import { e2eAccessToken } from "@reearth/services/config";
+import { useSetError } from "@reearth/services/state";
 
 import fragmentMatcher from "./fragmentMatcher.json";
 
@@ -47,6 +48,8 @@ function offsetFromCursor(items: any, cursor: string, readField: ReadFieldFuncti
 }
 
 const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
+  const { setError } = useSetError();
+
   const endpoint = window.REEARTH_CONFIG?.api
     ? `${window.REEARTH_CONFIG.api}/graphql`
     : "/api/graphql";
@@ -81,6 +84,7 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
       };
     }
     if (error) {
+      setError(error);
       reportError(error);
     }
   });

web/src/services/state/gqlErrorHandling.ts

@@ -0,0 +1,12 @@
+import { atom, useAtom, useSetAtom } from "jotai";
+
+// useError is needed for Apollo provider error only. Handle other errors with useNotification directly.
+type GQLError = { type?: string; message?: string };
+const error = atom<GQLError | undefined>(undefined);
+
+export const useError = () => useAtom(error);
+
+export default () => {
+  const setError = useSetAtom(error);
+  return { setError };
+};

web/src/services/state/index.ts

@@ -6,9 +6,7 @@ import { LayerSelectionReason } from "@reearth/classic/core/Map";
 import { Camera } from "@reearth/classic/util/value";
 import { ProjectType } from "@reearth/types";
 
-// useError is needed for Apollo provider error only. Handle other errors with useNotification directly.
-const error = atom<{ type?: string; message?: string } | undefined>(undefined);
-export const useError = () => useAtom(error);
+export { default as useSetError, useError } from "./gqlErrorHandling";
 
 const sceneId = atom<string | undefined>(undefined);
 export const useSceneId = () => useAtom(sceneId);