Improve client configuration to make it more flexible. Better useSyncGQLQuery documentation.

Author: jdillick

reactium_modules/@reactium/graphql/reactium-hooks-graphql-client.js

@@ -30,10 +30,7 @@ Hook.register(
                     '@atomic-reactor/reactium-api module is required',
                 );
             Reactium.API.register('GraphQL', {
-                api: new ApolloClient({
-                    uri: window.graphqlAPI || 'http://localhost:4000/graphql',
-                    ...config,
-                }),
+                api: new ApolloClient(config),
                 config,
             });
         } catch (err) {

reactium_modules/@reactium/graphql/sdk.ts

@@ -23,6 +23,32 @@ import {
  * @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.
+ * @example
+ * import { useSyncGQLQuery } from '@reactium/graphql';
+ * import { gql } from '@apollo/client';
+ *
+ * const MY_QUERY = gql`
+ *    query MyQuery($id: ID!) {
+ *       myQuery {
+ *         id
+ *        name
+ *      }
+ *   }
+ * `;
+ *
+ * const MyComponent = () => {
+ *   const state = useSyncGQLQuery(MY_QUERY, { variables: { id: '123' } });
+ *   const { data, loading, error } = state.get();
+ *
+ *  if (loading) return <div>Loading...</div>;
+ *  return (
+ *    <div>
+ *      {error && <div>Error: {error.message}</div>}
+ *      {data && <div>{data.myQuery.name}</div>}
+ *      <button onClick={() => state.refresh()}>Refresh</button>
+ *      <button onClick={() => state.refresh({ id: '456'})}>Load Id 456</button>
+ *    </div>
+ * );
  */
 export const useSyncGQLQuery = <
     TData = any,

src/app/components/Dashboard/Dashboard.jsx

@@ -28,9 +28,8 @@ export const Dashboard = () => {
     const UserList = useHookComponent('UserList');
 
     const handle = useSyncGQLQuery(LOAD_DASHBOARD_DATA, {
-        variables: { nums: [1, 2, 3, 5] },
+        variables: { nums: [0, 1] },
     });
-    window.handle = handle;
 
     return (
         <Container fluid as='main'>