feat: add gql client (strimzi#57)

* feat: add gql client

Closes: strimzi#55

Signed-off-by: Jordan <[email protected]>

* fix: add placeholder config

Signed-off-by: Jordan <[email protected]>

* feat: add split for config and api separation

Also adds hardcoded endpoints on client

Signed-off-by: Jordan <[email protected]>

* refactor: cleanup and review comments

Signed-off-by: Jordan <[email protected]>

* fix: ignore coverage

Signed-off-by: Jordan <[email protected]>

* fix: enable tests on CI

Signed-off-by: Jordan <[email protected]>

* fix: update package-lock

Signed-off-by: Jordan <[email protected]>

.github/workflows/node-pr-jobs-secure.yml

@@ -48,8 +48,8 @@ jobs:
       #   with:
       #     CLIENT_MASTER_REPORT: ${{ env.CLIENT_MASTER_REPORT }}
       #     SERVER_MASTER_REPORT: ${{ env.SERVER_MASTER_REPORT }}
-      # - name: Test
-      #   run: npm run test:jest -- --forceExit # force exit in case a test does not clean up after failure
+      - name: Test
+        run: npm run test:jest -- --forceExit # force exit in case a test does not clean up after failure
       # - name: Coverage report
       #   id: coverage
       #   if: ${{ always() }}

client/Bootstrap/GraphQLClient/GraphQLClient.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+
+/* istanbul ignore file */
+
+import { ApolloClient, HttpLink, split, InMemoryCache } from '@apollo/client';
+import { WebSocketLink } from '@apollo/client/link/ws';
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+
+const SERVER_API = 'ws://localhost:3000/api';
+
+const subscriptionClient = new SubscriptionClient(SERVER_API, {
+  reconnect: true,
+});
+
+const subscriptionLink = new WebSocketLink(subscriptionClient);
+
+const configLink = new HttpLink({ uri: '/config', fetch });
+
+const splitLink = split(
+  (operation) => operation.getContext().purpose === 'config',
+  configLink,
+  subscriptionLink
+);
+
+const apolloClient = new ApolloClient({
+  link: splitLink,
+  cache: new InMemoryCache(),
+});
+
+export { apolloClient };

client/Bootstrap/GraphQLClient/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+
+/* istanbul ignore file */
+
+export { apolloClient } from './GraphQLClient';

client/Queries/README.md

@@ -0,0 +1,106 @@
+# Queries
+
+This directory is home to all GraphQL queries. These should be imported by the appropriate models and exposed via a hook.
+
+## File Structure
+
+- Queries
+  - query set (e.g. topics)
+    - index.ts - containing all gql queries for that set
+
+## Examples
+
+### API
+
+```typescript
+// topics/index.ts
+
+import gql from 'graphql-tag';
+
+export const GET_TOPICS = gql`
+  query {
+    ...
+  }
+`;
+
+export const TOPIC_SUBSCRIPTION = gql`
+  subscription {
+    ...
+  }
+`;
+
+export const CREATE_TOPIC = gql`
+  mutation {
+    ...
+  }
+`;
+```
+
+```typescript
+// useTopic.hook.ts
+
+import { CREATE_TOPIC, TOPIC_SUBSCRIPTION, GET_TOPICS } from '@/Queries/topics';
+import { useMutation, useQuery, useSubscription } from '@apollo/client';
+
+const useTopic = () => {
+  const [createTopic, { data }] = useMutation(CREATE_TOPIC);
+  const getTopics = () => useQuery(GET_TOPICS);
+  const topicsSubscription = () =>
+    useSubscription(TOPIC_SUBSCRIPTION, {}, true);
+  return {
+    addTopic,
+    getTopics,
+    topicsSubscription,
+  };
+};
+
+export default useTopic;
+```
+
+```typescript
+// topics.model.ts
+
+import { useTopic } from '@/Hooks';
+
+const TopicModel = () => {
+  const { addTopic, getTopics, topicSubscription } = useTopic();
+
+  // pass these as props to view
+  const { loading, error, data } = getTopics();
+  const { sub_loading, sub_error, sub_data } = topicsSubscription();
+  ...
+};
+```
+
+### Config
+
+When fetching config, a context will need to be provided so that Apollo goes to the correct server.
+
+```typescript
+// config/index.ts
+
+import gql from 'graphql-tag';
+
+const GET_CONFIG = gql`
+  query {
+    ...
+  }
+`;
+```
+
+```typescript
+// config.hook.ts
+
+import { GET_CONFIG } from '@/Queries/topics';
+import { useQuery } from '@apollo/client';
+
+const useConfig = () => {
+  const getConfig = () =>
+    useQuery(GET_CONFIG, {
+      context: {
+        purpose: 'config',
+      },
+    });
+  return getConfig;
+};
+```