chore(project): bootstrap project tree

client/src/gql/client.tsx

@@ -0,0 +1,20 @@
+import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+import { Config } from '../config';
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { RetryLink } from "@apollo/client/link/retry";
+import { SubscriptionClient } from "subscriptions-transport-ws";
+
+const subscriptionClient = new SubscriptionClient(Config.subscriptionEndpoint, {
+  reconnect: true,
+});
+
+const link = new RetryLink({attempts: {max: 2}}).split(
+  (operation) => operation.operationName === 'subscription',
+  new WebSocketLink(subscriptionClient),
+  new HttpLink({ uri: Config.graphQLEndpoint, credentials: 'include' })
+);
+
+export const client = new ApolloClient<any>({
+  cache: new InMemoryCache(),
+  link: link,
+});

client/src/gql/mutations/user.tsx

@@ -0,0 +1,15 @@
+import { gql, useMutation } from '@apollo/client';
+
+export const MUTATION_UPDATE_USER = gql`
+mutation updateUser($id: ID!, $changes: UserChanges!) {
+  updateUser(id: $id, changes: $changes) {
+    id,
+    name,
+    createdAt,
+    connectedAt,
+  }
+}`;
+
+export function useUpdateUserMutation() {
+  return useMutation(MUTATION_UPDATE_USER);
+}

client/src/gql/queries/helper.ts

@@ -0,0 +1,11 @@
+import { useQuery, DocumentNode } from "@apollo/client";
+import { useState, useEffect } from "react";
+
+export function useGraphQLData<T>(q: DocumentNode, key: string, defaultValue: T, options = {}) {
+  const query = useQuery(q, options);
+  const [ data, setData ] = useState<T>(defaultValue);
+  useEffect(() => {
+    setData(query.data ? query.data[key] as T : defaultValue);
+  }, [query.loading, query.data]);
+  return { data, loading: query.loading, error: query.error };
+}

client/src/gql/queries/user.tsx

@@ -0,0 +1,25 @@
+import { gql, useQuery } from '@apollo/client';
+import { User } from '../../types/user';
+import { useGraphQLData } from './helper';
+
+export const QUERY_CURRENT_USER = gql`
+query userProfile {
+  currentUser {
+    id,
+    name,
+    email,
+    createdAt,
+    connectedAt
+  }
+}`;
+
+export function useUserProfileQuery() {
+  return useQuery(QUERY_CURRENT_USER);
+}
+
+export function useUserProfile() {
+  const { data, loading, error } = useGraphQLData<User>(
+    QUERY_CURRENT_USER, 'currentUser', {id: '', email: ''}
+  );
+  return { user: data, loading, error };
+}