Add useSyncGQLQuery hook.

Author: jdillick

reactium_modules/@reactium/graphql/index.js

@@ -0,0 +1 @@
+export * from './sdk.ts';

reactium_modules/@reactium/graphql/sdk.ts

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import {
+    useSyncState,
+    useEventEffect,
+    type ComponentEvent,
+    type ReactiumSyncState,
+} from '@atomic-reactor/reactium-sdk-core';
+import {
+    useLazyQuery,
+    type OperationVariables,
+    type DocumentNode,
+    type TypedDocumentNode,
+    type LazyQueryHookOptions,
+    type QueryResult,
+    type NoInfer,
+} from '@apollo/client';
+
+/**
+ * @description useSyncGQLQuery is a hook that wraps the useLazyQuery hook from Apollo Client, and adds state management and event handling.
+ * @param {DocumentNode | TypedDocumentNode<TData, TVariables>} query The GraphQL query document.
+ * @param {LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>} options Options to be passed to the useLazyQuery hook.
+ * @param {'set' | 'change' | 'loaded' | 'refreshed' | string} [updateEvent='set'] The event name that triggers a rerender
+ * @return {ReactiumSyncState<QueryResult<TData,TVariables>>} The sync state object.
+ * @see {@link [useLazyQuery](https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery)} for more information on the useLazyQuery hook from which this hook is derived.
+ * @see {@link [ReactiumSyncState](https://reactiumcore.github.io/reactium-sdk-core/classes/ReactiumSyncState.html)} to understand the underlying synchronized state object.
+ */
+export const useSyncGQLQuery = <
+    TData = any,
+    TVariables extends OperationVariables = OperationVariables,
+>(
+    query: DocumentNode | TypedDocumentNode<TData, TVariables>,
+    options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>,
+    updateEvent: 'set' | 'change' | 'loaded' | 'refreshed' | string = 'set',
+): ReactiumSyncState<QueryResult<TData, TVariables>> => {
+    const [lazy, result] = useLazyQuery(query, options);
+    const state = useSyncState<typeof result>(result, updateEvent);
+
+    state.extend(
+        'refresh',
+        async (variables?: Partial<TVariables>): Promise<void> => {
+            const vars = variables || options?.variables;
+            state.dispatch('refresh');
+            const newResponse = await result.refetch(vars);
+            state.set(newResponse, undefined);
+            state.dispatch<typeof newResponse>('refreshed', newResponse);
+        },
+    );
+
+    useEventEffect(state, {
+        load: async (e): Promise<void> => {
+            const { detail } = e as ComponentEvent<typeof options>;
+            state.set('loading', true);
+            const result = await lazy(detail);
+            state.set(result, undefined);
+            state.dispatch('loaded', result);
+        },
+
+        refreshed: (e): void => {
+            const { detail } = e as ComponentEvent<typeof result>;
+            state.set(detail, undefined);
+        },
+    });
+
+    useEffect((): void => {
+        if (result.called) return;
+        state.dispatch('load', options);
+    }, []);
+
+    return state;
+};

src/app/components/Dashboard/Dashboard.jsx

@@ -1,59 +1,56 @@
-import { gql, useQuery } from '@apollo/client';
+import { gql, useLazyQuery } from '@apollo/client';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import op from 'object-path';
-import { useEffect } from 'react';
 import { useHookComponent } from 'reactium-core/sdk';
+import { useSyncGQLQuery } from '@reactium/graphql';
 
-const GET_USERS = gql`
-    query {
+const LOAD_DASHBOARD_DATA = gql`
+    query LoadDashboardDat($nums: [Int!]!) {
         users {
             id
             name
             email
         }
+
         posts {
             id
             title
             body
         }
+
+        add(nums: $nums)
     }
 `;
 
 export const Dashboard = () => {
     const PostList = useHookComponent('PostList');
     const UserList = useHookComponent('UserList');
 
-    const response = useQuery(GET_USERS);
-    useEffect(() => {
-        if (response.observable) {
-            response.observable.subscribe({
-                next: ({ data }) => {
-                    console.log({ data });
-                },
-            });
-        }
-    }, [response.observable]);
+    const handle = useSyncGQLQuery(LOAD_DASHBOARD_DATA, {
+        variables: { nums: [1, 2, 3, 5] },
+    });
+    window.handle = handle;
 
-    console.log({ response });
     return (
         <Container fluid as='main'>
-            <h1>Dashboard</h1>
+            <h1>Dashboard {handle.get('data.add')}</h1>
             <Row>
                 <Col>
                     <UserList
-                        {...response}
-                        users={op.get(response, 'data.users', [])}
+                        loading={handle.get('loading', false)}
+                        error={handle.get('error')}
+                        users={handle.get('data.users', [])}
                     />
                 </Col>
             </Row>
 
             <Row>
                 <Col>
                     <PostList
-                        {...response}
-                        posts={op.get(response, 'data.posts', [])}
+                        loading={handle.get('loading', false)}
+                        error={handle.get('error')}
+                        posts={handle.get('data.posts', [])}
                     />
                 </Col>
             </Row>

src/app/components/Dashboard/Post/PostList/PostList.jsx

@@ -5,7 +5,6 @@ import Table from 'react-bootstrap/Table';
 import Placeholder from 'react-bootstrap/Placeholder';
 
 export const PostList = ({ loading = true, error, posts = [] }) => {
-    console.log({ loading, error, posts });
     return (
         <Accordion defaultActiveKey='0' className='posts'>
             <Accordion.Item eventKey='0'>

src/app/components/Dashboard/User/UserList/UserList.jsx

@@ -5,7 +5,6 @@ import Table from 'react-bootstrap/Table';
 import Placeholder from 'react-bootstrap/Placeholder';
 
 export const UserList = ({ loading = true, error, users = [] }) => {
-    console.log({ loading, error, users });
     return (
         <Accordion defaultActiveKey='0' className='users'>
             <Accordion.Item eventKey='0'>