Add React provider for Apollo, so context hooks work. Add simple example component.

Author: jdillick

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

@@ -1,4 +1,4 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import Reactium, { Hook, Enums } from 'reactium-core/sdk';
 
 Hook.register(
@@ -43,3 +43,10 @@ Hook.register(
     Enums.highest,
     'REACTIUM-CORE-SDK-GRAPHQL',
 );
+
+Hook.register('app-context-provider', async () => {
+    Reactium.AppContext.register('ApolloProvider', {
+        provider: ApolloProvider,
+        client: Reactium.GraphQL,
+    });
+});

src/app/components/ApolloTest/ApolloTest.jsx

@@ -0,0 +1,36 @@
+import { gql, useQuery } from '@apollo/client';
+import React from 'react';
+
+const GET_USERS = gql`
+    query GetUsers {
+        users {
+            id
+            name
+            email
+        }
+    }
+`;
+
+/**
+ * -----------------------------------------------------------------------------
+ * Component: ApolloTest
+ * -----------------------------------------------------------------------------
+ */
+export const ApolloTest = () => {
+    const { loading, error, data } = useQuery(GET_USERS);
+    if (loading) return <div>Loading...</div>;
+    else if (error) return <div>Error :(</div>;
+    const { users } = data;
+
+    return (
+        <ul>
+            {users.map(({ id, name, email }) => (
+                <li key={id}>
+                    {name}: {email}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+export default ApolloTest;

src/app/components/ApolloTest/reactium-domain-apollotest.js

@@ -0,0 +1,9 @@
+/**
+ * -----------------------------------------------------------------------------
+ * DDD Domain ApolloTest - Change name to place domain artifacts in this directory
+ * in a different domain.
+ * -----------------------------------------------------------------------------
+ */
+module.exports = {
+    name: 'ApolloTest',
+};

src/app/components/ApolloTest/reactium-hooks-apollotest.js

@@ -0,0 +1,13 @@
+/**
+ * -----------------------------------------------------------------------------
+ * Reactium Plugin ApolloTest
+ * -----------------------------------------------------------------------------
+ */
+(async () => {
+    const { Hook, Enums, Component } = await import('@atomic-reactor/reactium-core/sdk');
+
+    Hook.register('plugin-init', async () => {
+        const { ApolloTest } = await import('./ApolloTest');        
+        Component.register('ApolloTest', ApolloTest);
+    }, Enums.priority.normal, 'plugin-init-ApolloTest');
+})();

src/app/components/ApolloTest/reactium-route-apollotest.js

@@ -0,0 +1,10 @@
+import { ApolloTest as component } from './ApolloTest';
+
+export default [
+    {
+        id: 'route-ApolloTest-1',
+        exact: true,
+        component,
+        path: ['/apollo-test'],
+    },
+];