chore(release): 0.4.0-alpha.2

Author: 0xxmemo

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inverter-network/react",
   "description": "INVERTER react",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.2",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -79,8 +79,8 @@
   },
   "dependencies": {
     "@api3/logos": "^0.2.18",
-    "@inverter-network/sdk": "0.4.0-alpha.1",
-    "@inverter-network/graphql": "^0.9.12",
+    "@inverter-network/sdk": "0.4.0-alpha.2",
+    "@inverter-network/graphql": "^0.9.15",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.2",

src/hooks/use-graphql-subscription.ts

@@ -4,38 +4,50 @@ import * as React from 'react'
 import { subscription } from '@inverter-network/graphql'
 import type {
   GraphQLSubscriptionArgs,
-  GraphQLSubscriptionResult,
+  SubscriptionResult,
 } from '@inverter-network/graphql'
 
 export type UseGraphQLSubscriptionParams<T extends GraphQLSubscriptionArgs> = {
   fields: T
   enabled?: boolean
 }
 
+export type UseGraphQLSubscriptionResult<T extends GraphQLSubscriptionArgs> = {
+  data: SubscriptionResult<T> | null
+  error: string | null
+  isLoading: boolean
+}
+
 export const useGraphQLSubscription = <T extends GraphQLSubscriptionArgs>({
   fields,
   enabled = true,
-}: UseGraphQLSubscriptionParams<T>): GraphQLSubscriptionResult<T> | null => {
-  const memo = React.useMemo(() => {
-    return subscription(fields)
-  }, [fields])
-
-  const [data, setData] = React.useState<Awaited<typeof memo> | null>(null)
+}: UseGraphQLSubscriptionParams<T>): UseGraphQLSubscriptionResult<T> => {
+  const [data, setData] = React.useState<SubscriptionResult<T> | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
 
   React.useEffect(() => {
-    if (!memo || !enabled) return
-
-    const fetchData = async () => {
-      try {
-        const result = memo
-        setData(result)
-      } catch (error) {
-        console.error('Error in GraphQL subscription:', error)
+    if (!enabled) return () => {} // Return empty cleanup function
+
+    try {
+      const sub = subscription(fields)
+      let callbackId: string | null = null
+
+      callbackId = sub.addCallback(setData)
+
+      // Return cleanup function
+      return () => {
+        sub.removeCallback(callbackId)
       }
+    } catch (error: any) {
+      console.error(
+        'Error subscribing to fields',
+        error?.message ?? error?.cause ?? error
+      )
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setError(error?.message ?? error?.cause ?? 'Unknown error')
+      return () => {} // Add return for catch block
     }
+  }, [JSON.stringify(fields), enabled])
 
-    fetchData()
-  }, [memo, enabled])
-
-  return data
+  return { data, error, isLoading: !data }
 }