From 032137e004871c840e7be0e5dabc517b08f6604c Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 23 May 2023 20:44:31 +0100
Subject: [PATCH] Fix support messaging

---
 .gitignore                                |   4 +
 codegen-support.yml                       |  14 --
 package.json                              |  13 +-
 src/App.tsx                               |   4 +-
 src/components/MessagingSidebar/index.tsx |  18 +--
 src/graphql/chat.api.support.ts           |  22 +--
 src/graphql/types.support.ts              | 110 +++++++-------
 src/index.tsx                             |  26 ++--
 src/pages/Support/index.tsx               |  71 ++++-----
 yarn.lock                                 | 170 ++++++++++++++++------
 10 files changed, 259 insertions(+), 193 deletions(-)
 delete mode 100644 codegen-support.yml

diff --git a/.gitignore b/.gitignore
index eb14a76..4bbcda1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,10 @@
 /.pnp
 .pnp.js
 
+# development
+codegen-main.yml
+codegen-support.ts
+
 # testing
 /coverage
 
diff --git a/codegen-support.yml b/codegen-support.yml
deleted file mode 100644
index 6343571..0000000
--- a/codegen-support.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-overwrite: true
-schema: 'https://astrobuild-support-service.herokuapp.com'
-documents: 'src/graphql/*.api.support.ts'
-config:
-  withHOC: false
-  scalars:
-    Date: Date
-  enumsAsTypes: true
-  withHooks: true
-generates:
-  src/graphql/types.support.ts:
-    plugins:
-      - 'typescript'
-      - 'typescript-operations'
diff --git a/package.json b/package.json
index fef1f67..fa7f242 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@types/styled-components": "^5.1.26",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
+    "graphql-ws": "^5.13.1",
     "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
@@ -27,7 +28,6 @@
     "reactflow": "^11.7.0",
     "sort-by": "^1.2.0",
     "styled-components": "^5.3.10",
-    "subscriptions-transport-ws": "^0.9.19",
     "typescript": "^5.0.2",
     "vite-plugin-svgr": "^2.4.0",
     "web-vitals": "^3.3.0",
@@ -36,10 +36,10 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "generate-main": "graphql-codegen --config codegen-main.yml",
-    "generate-support": "graphql-codegen --config codegen-support.yml",
+    "generate:main": "graphql-codegen --config codegen-main.yml",
     "lint": "yarn run eslint src --ext .ts,.tsx",
-    "fix": "yarn lint --fix"
+    "fix": "yarn lint --fix",
+    "generate:support": "graphql-codegen --config codegen-support.ts"
   },
   "browserslist": {
     "production": [
@@ -54,8 +54,9 @@
     ]
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^3.2.2",
-    "@graphql-codegen/introspection": "^3.0.1",
+    "@graphql-codegen/cli": "3.3.1",
+    "@graphql-codegen/client-preset": "3.0.1",
+    "@graphql-codegen/introspection": "3.0.1",
     "@graphql-codegen/typescript": "^3.0.2",
     "@graphql-codegen/typescript-operations": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
diff --git a/src/App.tsx b/src/App.tsx
index 0960dc2..67d42dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -136,7 +136,7 @@ const App = () => {
           }
         />
         <Route
-          path='/support/:project'
+          path='/support/:projectId'
           element={
             <Protected>
               <Support />
@@ -144,7 +144,7 @@ const App = () => {
           }
         />
         <Route
-          path='/support/:project/:id'
+          path='/support/:projectId/:threadId'
           element={
             <Protected>
               <Support />
diff --git a/src/components/MessagingSidebar/index.tsx b/src/components/MessagingSidebar/index.tsx
index 6b650ad..961ab19 100644
--- a/src/components/MessagingSidebar/index.tsx
+++ b/src/components/MessagingSidebar/index.tsx
@@ -7,7 +7,7 @@ import { Wrapper } from './styles';
 import {
   GetProjectThreadsQuery,
   GetProjectThreadsQueryVariables,
-  ThreadObject,
+  Support,
 } from '../../graphql/types.support';
 import { GET_PROJECT_THREADS } from '../../graphql/chat.api.support';
 import { Add, Empty } from '../../assets';
@@ -21,7 +21,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
   const role = useReactiveVar(roleVar);
   const location = useLocation();
   const navigate = useNavigate();
-  const [projectThreads, setProjectThreads] = useState<Array<ThreadObject>>();
+  const [projectThreads, setProjectThreads] = useState<Array<Support>>();
 
   useEffect(() => {
     (async () => {
@@ -32,15 +32,13 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
         >({
           query: GET_PROJECT_THREADS,
           variables: {
-            projectId: location.pathname.split('/')[2]!,
+            projectId: location.pathname.split('/')[2] as string,
           },
           fetchPolicy: 'network-only',
         });
-        setProjectThreads(threads?.data?.getProjectThreads!);
+        setProjectThreads(threads?.data?.threads!);
       }
     })();
-
-    // eslint-disable-next-line
   }, [location.pathname]);
 
   return (
@@ -55,7 +53,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
         >
           <Box flexGrow='1'>
             <Text variant='title' weight='bold' color='white'>
-              Messaging Support
+              Support
             </Text>
           </Box>
           <Button
@@ -65,7 +63,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
             iconLeft={<Add />}
             onClick={() => {
               onClose();
-              navigate(`/support-messaging/${location.pathname.split('/')[2]}`);
+              navigate(`/support/${location.pathname.split('/')[2]}`);
             }}
           />
         </Box>
@@ -86,9 +84,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
                 onClick={() => {
                   onClose();
                   navigate(
-                    `/support-messaging/${location.pathname.split('/')[2]}/${
-                      thread.id
-                    }`
+                    `/support/${location.pathname.split('/')[2]}/${thread.id}`
                   );
                 }}
               >
diff --git a/src/graphql/chat.api.support.ts b/src/graphql/chat.api.support.ts
index f1d61eb..0673bd7 100644
--- a/src/graphql/chat.api.support.ts
+++ b/src/graphql/chat.api.support.ts
@@ -2,11 +2,12 @@ import gql from 'graphql-tag';
 
 export const GET_PROJECT_THREADS = gql`
   query GetProjectThreads($projectId: String!) {
-    getProjectThreads(projectId: $projectId) {
+    threads(projectId: $projectId) {
       id
       title
       threadDescription
       userMessages {
+        id
         username
         text
       }
@@ -16,11 +17,12 @@ export const GET_PROJECT_THREADS = gql`
 
 export const GET_THREAD_BY_ID = gql`
   query GetThreadById($threadId: String!) {
-    getThreadById(threadId: $threadId) {
+    thread(threadId: $threadId) {
       id
       title
       threadDescription
       userMessages {
+        id
         username
         text
       }
@@ -47,22 +49,24 @@ export const CREATE_THREAD = gql`
       projectId: $projectId
       title: $title
       threadDescription: $threadDescription
-    )
+    ) {
+      id
+    }
   }
 `;
 
 export const SEND_MSG = gql`
-  mutation SendMsg($threadId: String!, $username: String!, $msg: String!) {
-    sendMsg(threadId: $threadId, username: $username, msg: $msg)
+  mutation SendMessage($threadId: String!, $username: String!, $text: String!) {
+    sendMessage(threadId: $threadId, username: $username, text: $text)
   }
 `;
 
-export const CONNECT_STREAM = gql`
-  subscription ConnectStream($mutationType: MutationType) {
-    connectStream(mutationType: $mutationType) {
+export const MESSAGES_SUBSCRIPTION = gql`
+  subscription messagesSubscription {
+    messages {
       mutationType
       id
-      userMessage {
+      userMessages {
         id
         username
         text
diff --git a/src/graphql/types.support.ts b/src/graphql/types.support.ts
index cf7a682..20571b7 100644
--- a/src/graphql/types.support.ts
+++ b/src/graphql/types.support.ts
@@ -1,4 +1,6 @@
+/* eslint-disable */
 export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
   [K in keyof T]: T[K];
 };
@@ -19,80 +21,78 @@ export type Scalars = {
 
 export type MutationRoot = {
   __typename?: 'MutationRoot';
-  createThread: Scalars['ID'];
-  deleteThread: ThreadObject;
-  sendMsg: Scalars['ID'];
+  createThread: Support;
+  deleteThread?: Maybe<Support>;
+  sendMessage: Scalars['ID'];
 };
 
 export type MutationRootCreateThreadArgs = {
   projectId: Scalars['String'];
-  title: Scalars['String'];
   threadDescription: Scalars['String'];
+  title: Scalars['String'];
 };
 
 export type MutationRootDeleteThreadArgs = {
   threadId: Scalars['String'];
 };
 
-export type MutationRootSendMsgArgs = {
+export type MutationRootSendMessageArgs = {
+  text: Scalars['String'];
   threadId: Scalars['String'];
   username: Scalars['String'];
-  msg: Scalars['String'];
 };
 
-export type MutationType = 'CREATED';
+export enum MutationType {
+  Created = 'CREATED',
+}
 
 export type QueryRoot = {
   __typename?: 'QueryRoot';
-  messages: Array<UserMessage>;
-  getProjectThreads: Array<ThreadObject>;
-  getThreadById: ThreadObject;
+  messages?: Maybe<Array<UserMessages>>;
+  thread?: Maybe<Support>;
+  threads?: Maybe<Array<Support>>;
 };
 
 export type QueryRootMessagesArgs = {
-  threadId: Scalars['String'];
+  threadId: Scalars['ID'];
 };
 
-export type QueryRootGetProjectThreadsArgs = {
-  projectId: Scalars['String'];
+export type QueryRootThreadArgs = {
+  threadId: Scalars['ID'];
 };
 
-export type QueryRootGetThreadByIdArgs = {
-  threadId: Scalars['String'];
+export type QueryRootThreadsArgs = {
+  projectId: Scalars['ID'];
 };
 
 export type StreamChanged = {
   __typename?: 'StreamChanged';
-  mutationType: MutationType;
   id: Scalars['ID'];
-  userMessage?: Maybe<UserMessageObject>;
+  mutationType: MutationType;
+  userMessages?: Maybe<UserMessages>;
 };
 
 export type SubscriptionRoot = {
   __typename?: 'SubscriptionRoot';
-  connectStream: StreamChanged;
+  interval: Scalars['Int'];
+  messages: StreamChanged;
 };
 
-export type SubscriptionRootConnectStreamArgs = {
-  mutationType?: Maybe<MutationType>;
+export type SubscriptionRootIntervalArgs = {
+  n?: Scalars['Int'];
 };
 
-export type ThreadObject = {
-  __typename?: 'ThreadObject';
-  id: Scalars['String'];
-  title: Scalars['String'];
+export type Support = {
+  __typename?: 'Support';
+  id: Scalars['ID'];
+  projectId: Scalars['ID'];
   threadDescription: Scalars['String'];
-  userMessages: Array<UserMessage>;
+  title: Scalars['String'];
+  userMessages: Array<UserMessages>;
 };
 
-export type UserMessage = {
-  __typename?: 'UserMessage';
-  username: Scalars['String'];
-  text: Scalars['String'];
-};
-
-export type UserMessageObject = {
-  __typename?: 'UserMessageObject';
+export type UserMessages = {
+  __typename?: 'UserMessages';
   id: Scalars['String'];
   username: Scalars['String'];
   text: Scalars['String'];
@@ -103,15 +103,15 @@ export type GetProjectThreadsQueryVariables = Exact<{
 }>;
 
 export type GetProjectThreadsQuery = { __typename?: 'QueryRoot' } & {
-  getProjectThreads: Array<
-    { __typename?: 'ThreadObject' } & Pick<
-      ThreadObject,
-      'id' | 'title' | 'threadDescription'
+  threads: Array<
+    { __typename?: 'Support' } & Pick<
+      Support,
+      'id' | 'title' | 'projectId' | 'threadDescription' | 'userMessages'
     > & {
         userMessages: Array<
           { __typename?: 'UserMessage' } & Pick<
-            UserMessage,
-            'username' | 'text'
+            UserMessages,
+            'id' | 'username' | 'text'
           >
         >;
       }
@@ -123,12 +123,12 @@ export type GetThreadByIdQueryVariables = Exact<{
 }>;
 
 export type GetThreadByIdQuery = { __typename?: 'QueryRoot' } & {
-  getThreadById: { __typename?: 'ThreadObject' } & Pick<
-    ThreadObject,
-    'id' | 'title' | 'threadDescription'
+  thread: { __typename?: 'Support' } & Pick<
+  Support,
+    'id' | 'title' | 'projectId' | 'threadDescription' | 'userMessages'
   > & {
       userMessages: Array<
-        { __typename?: 'UserMessage' } & Pick<UserMessage, 'username' | 'text'>
+        { __typename?: 'UserMessages' } & Pick<UserMessages, 'id' | 'username' | 'text'>
       >;
     };
 };
@@ -139,7 +139,7 @@ export type MessagesQueryVariables = Exact<{
 
 export type MessagesQuery = { __typename?: 'QueryRoot' } & {
   messages: Array<
-    { __typename?: 'UserMessage' } & Pick<UserMessage, 'username' | 'text'>
+    { __typename?: 'UserMessages' } & Pick<UserMessages, 'username' | 'text' | 'id'>
   >;
 };
 
@@ -157,28 +157,24 @@ export type CreateThreadMutation = { __typename?: 'MutationRoot' } & Pick<
 export type SendMsgMutationVariables = Exact<{
   threadId: Scalars['String'];
   username: Scalars['String'];
-  msg: Scalars['String'];
+  text: Scalars['String'];
 }>;
 
 export type SendMsgMutation = { __typename?: 'MutationRoot' } & Pick<
   MutationRoot,
-  'sendMsg'
+  'sendMessage'
 >;
 
-export type ConnectStreamSubscriptionVariables = Exact<{
-  mutationType?: Maybe<MutationType>;
-}>;
-
-export type ConnectStreamSubscription = { __typename?: 'SubscriptionRoot' } & {
-  connectStream: { __typename?: 'StreamChanged' } & Pick<
+export type MessagesSubscription = { __typename?: 'SubscriptionRoot' } & {
+  messages: { __typename?: 'StreamChanged' } & Pick<
     StreamChanged,
-    'mutationType' | 'id'
+    'mutationType'
   > & {
-      userMessage?: Maybe<
-        { __typename?: 'UserMessageObject' } & Pick<
-          UserMessageObject,
+      userMessages?: Maybe<
+        { __typename?: 'UserMessages' } & Pick<
+          UserMessages,
           'id' | 'username' | 'text'
         >
-      >;
+>;
     };
 };
diff --git a/src/index.tsx b/src/index.tsx
index 94d6ae8..60069ab 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { createClient } from 'graphql-ws';
 import {
   ApolloClient,
   InMemoryCache,
-  createHttpLink,
   ApolloProvider,
   split,
+  HttpLink,
 } from '@apollo/client';
-import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { setContext } from '@apollo/client/link/context';
 import { ThemeProvider } from 'styled-components';
@@ -17,20 +18,19 @@ import App from './App';
 import GlobalStyles from './GlobalStyles';
 import reportWebVitals from './reportWebVitals';
 
-const httpLinkMain = createHttpLink({
+const httpLinkMain = new HttpLink({
   uri: import.meta.env.VITE_GRAPHQL_API,
 });
 
-const httpLinkSupport = createHttpLink({
+const httpLinkSupport = new HttpLink({
   uri: import.meta.env.VITE_GRAPHQL_SUPPORT_API,
 });
 
-const wsLink = new WebSocketLink({
-  uri: `${import.meta.env.VITE_GRAPHQL_SUPPORT_SUBSCRIPTIONS_API}`,
-  options: {
-    reconnect: true,
-  },
-});
+const wsLink = new GraphQLWsLink(
+  createClient({
+    url: `${import.meta.env.VITE_GRAPHQL_SUPPORT_SUBSCRIPTIONS_API}`,
+  })
+);
 
 const splitLink = split(
   ({ query }) => {
@@ -69,7 +69,9 @@ let root: ReactDOMClient.Root | null = null;
 
 document.addEventListener('DOMContentLoaded', () => {
   if (!root) {
-    root = ReactDOMClient.createRoot(document.querySelector('#app') as HTMLElement);
+    root = ReactDOMClient.createRoot(
+      document.querySelector('#app') as HTMLElement
+    );
 
     root.render(
       <React.StrictMode>
@@ -84,7 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
           </ThemeProvider>
         </ApolloProvider>
       </React.StrictMode>
-    )
+    );
   }
 });
 
diff --git a/src/pages/Support/index.tsx b/src/pages/Support/index.tsx
index e03683d..d37b720 100644
--- a/src/pages/Support/index.tsx
+++ b/src/pages/Support/index.tsx
@@ -6,56 +6,53 @@ import { useState, useEffect } from 'react';
 import { roleVar, userVar } from '../../graphql/state';
 import { Wrapper } from './styles';
 import {
-  ConnectStreamSubscription,
-  ConnectStreamSubscriptionVariables,
   CreateThreadMutation,
   CreateThreadMutationVariables,
   GetThreadByIdQuery,
   GetThreadByIdQueryVariables,
   MessagesQuery,
   MessagesQueryVariables,
+  MessagesSubscription,
   SendMsgMutation,
   SendMsgMutationVariables,
-  ThreadObject,
-  UserMessageObject,
+  Support as SupportType,
+  UserMessages,
 } from '../../graphql/types.support';
 import { Box, Button, Input, TextArea, Text } from '../../components';
 import { Send, ThreadClient, ThreadProductOwner } from '../../assets';
 import {
-  CONNECT_STREAM,
   CREATE_THREAD,
   GET_THREAD_BY_ID,
   MESSAGES,
+  MESSAGES_SUBSCRIPTION,
   SEND_MSG,
 } from '../../graphql/chat.api.support';
 import { theme } from '../../themes';
 import { clientSupport } from '../..';
 
 const Support = () => {
-  const { project, id } = useParams<{ id: string; project: string }>();
+  const { projectId, threadId } = useParams<{ projectId: string, threadId: string }>();
   const role = useReactiveVar(roleVar);
   const currentUser = useReactiveVar(userVar);
   const navigate = useNavigate();
-  const [thread, setThread] = useState<ThreadObject>();
-  const [messages, setMessages] = useState<Array<UserMessageObject>>([]);
-  const [addedMessages, setAddedMessages] = useState<Array<UserMessageObject>>(
-    []
-  );
+  const [thread, setThread] = useState<SupportType>();
+  const [messages, setMessages] = useState<Array<UserMessages>>([]);
+  const [addedMessages, setAddedMessages] = useState<Array<UserMessages>>([]);
 
   useEffect(() => {
     (async () => {
-      if (id) {
+      if (threadId) {
         const threadResult = await clientSupport.query<
           GetThreadByIdQuery,
           GetThreadByIdQueryVariables
         >({
           query: GET_THREAD_BY_ID,
           variables: {
-            threadId: id!,
+            threadId: threadId!,
           },
         });
 
-        setThread(threadResult?.data?.getThreadById);
+        setThread(threadResult?.data?.thread);
 
         const messagesResult = await clientSupport.query<
           MessagesQuery,
@@ -63,41 +60,37 @@ const Support = () => {
         >({
           query: MESSAGES,
           variables: {
-            threadId: id!,
+            threadId: threadId!,
           },
           fetchPolicy: 'network-only',
         });
         setMessages(
-          Array.from(messagesResult?.data?.messages).map((message, index) => ({
-            text: message.text,
-            username: message.username,
-            id: index.toString(),
-          }))
+          Array.from(messagesResult?.data?.messages).map(
+            (message: UserMessages) => ({
+              text: message.text,
+              username: message.username,
+              id: message.id,
+            })
+          )
         );
 
-        const messageSubscriber = clientSupport.subscribe<
-          ConnectStreamSubscription,
-          ConnectStreamSubscriptionVariables
+        clientSupport.subscribe<
+          MessagesSubscription
         >({
-          query: CONNECT_STREAM,
-          variables: {
-            mutationType: 'CREATED',
-          },
-        });
-
-        messageSubscriber.subscribe(({ data }) => {
+          query: MESSAGES_SUBSCRIPTION,
+        }).subscribe(({ data }) => {
           setAddedMessages((prevMessages) => [
             ...prevMessages,
             {
-              id: messages.length.toString(),
-              username: data?.connectStream?.userMessage?.username!,
-              text: data?.connectStream?.userMessage?.text!,
+              id: data?.messages?.userMessages?.id!,
+              username: data?.messages?.userMessages?.username!,
+              text: data?.messages?.userMessages?.text!,
             },
           ]);
         });
       }
     })();
-  }, [id]);
+  }, [threadId]);
 
   const createThreadForm = useFormik({
     initialValues: {
@@ -115,14 +108,12 @@ const Support = () => {
       >({
         mutation: CREATE_THREAD,
         variables: {
-          projectId: project as string,
+          projectId: projectId as string,
           title,
           threadDescription: description,
         },
       });
-      navigate(
-        `/support/${project}/${createdThread.data?.createThread}`
-      );
+      navigate(`/support/${projectId}/${createdThread.data?.createThread.id}`);
     },
   });
 
@@ -137,9 +128,9 @@ const Support = () => {
       await clientSupport.mutate<SendMsgMutation, SendMsgMutationVariables>({
         mutation: SEND_MSG,
         variables: {
-          threadId: id as string,
+          threadId: threadId as string,
           username: `${currentUser?.firstName} ${currentUser?.lastName}`,
-          msg,
+          text: msg,
         },
       });
       resetForm();
diff --git a/yarn.lock b/yarn.lock
index 4ac0d41..871d8ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -963,16 +963,24 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
   integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==
 
-"@graphql-codegen/cli@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@graphql-codegen/cli/-/cli-3.2.2.tgz#1a94bc1ff9cfb7d618859336017d523689ab7d15"
-  integrity sha512-u+dm/SW1heLnUL4Tyf5Uv0AxOFhTCmUPHKwRLq2yE8MPhv7+Ti4vxxUP/XGoaMNRuHlN37wLI7tpFLV1Hhm22Q==
+"@graphql-codegen/add@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-4.0.1.tgz#c187af820fdd2fc7a9c1c2453bc389cd4e16699e"
+  integrity sha512-A7k+9eRfrKyyNfhWEN/0eKz09R5cp4XXxUuNLQAVm/aohmVI2xdMV4lM02rTlM6Pyou3cU/v0iZnhgo6IRpqeg==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.1.0"
+    tslib "~2.5.0"
+
+"@graphql-codegen/cli@3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/cli/-/cli-3.3.1.tgz#103e7a2263126fdde168a1ce623fc2bdc05352f0"
+  integrity sha512-4Es8Y9zFeT0Zx2qRL7L3qXDbbqvXK6aID+8v8lP6gaYD+uWx3Jd4Hsq5vxwVBR+6flm0BW/C85Qm0cvmT7O6LA==
   dependencies:
     "@babel/generator" "^7.18.13"
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.18.13"
     "@graphql-codegen/core" "^3.1.0"
-    "@graphql-codegen/plugin-helpers" "^4.1.0"
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
     "@graphql-tools/apollo-engine-loader" "^7.3.6"
     "@graphql-tools/code-file-loader" "^7.3.17"
     "@graphql-tools/git-loader" "^7.2.13"
@@ -1004,6 +1012,25 @@
     yaml "^1.10.0"
     yargs "^17.0.0"
 
+"@graphql-codegen/client-preset@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/client-preset/-/client-preset-3.0.1.tgz#4de9fcdcc1527113501d9ff4455b2b2025ecb21c"
+  integrity sha512-aHlnlDWS39kddNJ/I+ItIUj3AX1040aRwHEv2FiPAL0ILrGzHg3AZY1Ay358Ys8fXclrqIN7IeWLmeyI3TIHiA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
+    "@graphql-codegen/add" "^4.0.1"
+    "@graphql-codegen/gql-tag-operations" "3.0.1"
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-codegen/typed-document-node" "^4.0.1"
+    "@graphql-codegen/typescript" "^3.0.4"
+    "@graphql-codegen/typescript-operations" "^3.0.4"
+    "@graphql-codegen/visitor-plugin-common" "^3.1.1"
+    "@graphql-tools/documents" "^0.1.0"
+    "@graphql-tools/utils" "^9.0.0"
+    "@graphql-typed-document-node/core" "3.2.0"
+    tslib "~2.5.0"
+
 "@graphql-codegen/core@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/core/-/core-3.1.0.tgz#ad859d52d509a4eb2ebe5aabba6543a628fb181b"
@@ -1014,7 +1041,18 @@
     "@graphql-tools/utils" "^9.1.1"
     tslib "~2.5.0"
 
-"@graphql-codegen/introspection@^3.0.1":
+"@graphql-codegen/gql-tag-operations@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/gql-tag-operations/-/gql-tag-operations-3.0.1.tgz#b0fcdc4dfce1850d646d80abe6f642d309cfd8c8"
+  integrity sha512-8TpJuOiw56wSIS3v+jF5Yr695NYFCpSpChTbUnVLYT6QmnBExv/VwA9bHDchuyUBUE3PfpP/l5JF62Sc0oWmWg==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-codegen/visitor-plugin-common" "3.1.1"
+    "@graphql-tools/utils" "^9.0.0"
+    auto-bind "~4.0.0"
+    tslib "~2.5.0"
+
+"@graphql-codegen/introspection@3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/introspection/-/introspection-3.0.1.tgz#403c9bb12abf998a3bd37a519eb0fd01b537d64d"
   integrity sha512-D6vJQTEL/np4EmeUHm5spLK59cr+AMXEoLRoTI+dagFzlHYDTfXZH6F7uhKaakxcj0SAQhIWKvGMggotUdEtyg==
@@ -1035,6 +1073,18 @@
     lodash "~4.17.0"
     tslib "~2.5.0"
 
+"@graphql-codegen/plugin-helpers@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/plugin-helpers/-/plugin-helpers-4.2.0.tgz#8324914d0f99162a223cfa01796cdd6be972d2ae"
+  integrity sha512-THFTCfg+46PXlXobYJ/OoCX6pzjI+9woQqCjdyKtgoI0tn3Xq2HUUCiidndxUpEYVrXb5pRiRXb7b/ZbMQqD0A==
+  dependencies:
+    "@graphql-tools/utils" "^9.0.0"
+    change-case-all "1.0.15"
+    common-tags "1.8.2"
+    import-from "4.0.0"
+    lodash "~4.17.0"
+    tslib "~2.5.0"
+
 "@graphql-codegen/schema-ast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/schema-ast/-/schema-ast-3.0.1.tgz#37b458bb57b95715a9eb4259341c856dae2a461d"
@@ -1044,6 +1094,17 @@
     "@graphql-tools/utils" "^9.0.0"
     tslib "~2.5.0"
 
+"@graphql-codegen/typed-document-node@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/typed-document-node/-/typed-document-node-4.0.1.tgz#6522a605d032fd9d10c7cac36b4a8728a83a957f"
+  integrity sha512-mQNYCd12JsFSaK6xLry4olY9TdYG7GxQPexU6qU4Om++eKhseGwk2eGmQDRG4Qp8jEDFLMXuHMVUKqMQ1M+F/A==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-codegen/visitor-plugin-common" "3.1.1"
+    auto-bind "~4.0.0"
+    change-case-all "1.0.15"
+    tslib "~2.5.0"
+
 "@graphql-codegen/typescript-operations@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript-operations/-/typescript-operations-3.0.2.tgz#41793f996b3f89f4fc348bce6ee509aefb2e4515"
@@ -1055,6 +1116,17 @@
     auto-bind "~4.0.0"
     tslib "~2.5.0"
 
+"@graphql-codegen/typescript-operations@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript-operations/-/typescript-operations-3.0.4.tgz#60163c07f0ef73655779ece450d02c1172c44027"
+  integrity sha512-6yE2OL2+WJ1vd5MwFEGXpaxsFGzjAGUytPVHDML3Bi3TwP1F3lnQlIko4untwvHW0JhZEGQ7Ck30H9HjcxpdKA==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-codegen/typescript" "^3.0.4"
+    "@graphql-codegen/visitor-plugin-common" "3.1.1"
+    auto-bind "~4.0.0"
+    tslib "~2.5.0"
+
 "@graphql-codegen/typescript@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-3.0.2.tgz#6099c0632188ad9c6d41a5b66116ded0bf5c6076"
@@ -1066,6 +1138,17 @@
     auto-bind "~4.0.0"
     tslib "~2.5.0"
 
+"@graphql-codegen/typescript@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-3.0.4.tgz#e12dc106a2722ebc7d18556980ccf47fa9d0805f"
+  integrity sha512-x4O47447DZrWNtE/l5CU9QzzW4m1RbmCEdijlA3s2flG/y1Ckqdemob4CWfilSm5/tZ3w1junVDY616RDTSvZw==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-codegen/schema-ast" "^3.0.1"
+    "@graphql-codegen/visitor-plugin-common" "3.1.1"
+    auto-bind "~4.0.0"
+    tslib "~2.5.0"
+
 "@graphql-codegen/visitor-plugin-common@3.0.2", "@graphql-codegen/visitor-plugin-common@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-3.0.2.tgz#784c0faaa7e0773072ea5de464fdcae8d7765564"
@@ -1082,6 +1165,22 @@
     parse-filepath "^1.0.2"
     tslib "~2.5.0"
 
+"@graphql-codegen/visitor-plugin-common@3.1.1", "@graphql-codegen/visitor-plugin-common@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-3.1.1.tgz#50c2aa3c537a805ce68d2f115d0a9811b151428c"
+  integrity sha512-uAfp+zu/009R3HUAuTK2AamR1bxIltM6rrYYI6EXSmkM3rFtFsLTuJhjUDj98HcUCszJZrADppz8KKLGRUVlNg==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^4.2.0"
+    "@graphql-tools/optimize" "^1.3.0"
+    "@graphql-tools/relay-operation-optimizer" "^6.5.0"
+    "@graphql-tools/utils" "^9.0.0"
+    auto-bind "~4.0.0"
+    change-case-all "1.0.15"
+    dependency-graph "^0.11.0"
+    graphql-tag "^2.11.0"
+    parse-filepath "^1.0.2"
+    tslib "~2.5.0"
+
 "@graphql-tools/apollo-engine-loader@^7.3.6":
   version "7.3.26"
   resolved "https://registry.yarnpkg.com/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-7.3.26.tgz#91e54460d5579933e42a2010b8688c3459c245d8"
@@ -1126,6 +1225,14 @@
     tslib "^2.5.0"
     value-or-promise "^1.0.12"
 
+"@graphql-tools/documents@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/documents/-/documents-0.1.0.tgz#9c27faea5a17ab271dbd99edd8d52eee0e43573e"
+  integrity sha512-1WQeovHv5S1M3xMzQxbSrG3yl6QOnsq2JUBnlg5/0aMM5R4GNMx6Ms+ROByez/dnuA81kstRuSK+2qpe+GaRIw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tslib "^2.4.0"
+
 "@graphql-tools/executor-graphql-ws@^0.0.12":
   version "0.0.12"
   resolved "https://registry.yarnpkg.com/@graphql-tools/executor-graphql-ws/-/executor-graphql-ws-0.0.12.tgz#dde0d1f5beeceff209df44e30b45388b0afaff95"
@@ -1351,6 +1458,11 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.2.tgz#6fc464307cbe3c8ca5064549b806360d84457b04"
   integrity sha512-9anpBMM9mEgZN4wr2v8wHJI2/u5TnnggewRN6OlvXTTnuVyoY19X6rOv9XTqKRw6dcGKwZsBi8n0kDE2I5i4VA==
 
+"@graphql-typed-document-node/core@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
+  integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
+
 "@jest/expect-utils@^29.5.0":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.5.0.tgz#f74fad6b6e20f924582dc8ecbf2cb800fe43a036"
@@ -2585,11 +2697,6 @@ babel-preset-fbjs@^3.4.0:
     "@babel/plugin-transform-template-literals" "^7.0.0"
     babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
 
-backo2@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
-  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3576,11 +3683,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
-  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
-
 expect@^29.0.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7"
@@ -3899,6 +4001,11 @@ graphql-ws@5.12.0:
   resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.12.0.tgz#d06fe38916334b4a4c827f73268cbf4359a32ed7"
   integrity sha512-PA3ImUp8utrpEjoxBMhvxsjkStvFEdU0E1gEBREt8HZIWkxOUymwJBhFnBL7t/iHhUq1GVPeZevPinkZFENxTw==
 
+graphql-ws@^5.13.1:
+  version "5.13.1"
+  resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.13.1.tgz#96ac9963edb1e94c8e7f21af48ce5fcaab91779a"
+  integrity sha512-eiX7ES/ZQr0q7hSM5UBOEIFfaAUmAY9/CSDyAnsETuybByU7l/v46drRg9DQoTvVABEHp3QnrvwgTRMhqy7zxQ==
+
 graphql@^16.6.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
@@ -4355,11 +4462,6 @@ isomorphic-ws@5.0.0, isomorphic-ws@^5.0.0:
   resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
   integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
 
-iterall@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
-  integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
-
 jest-diff@^26.0.0:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
@@ -4581,6 +4683,11 @@ lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
 lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -5723,17 +5830,6 @@ styled-components@^5.3.10:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-subscriptions-transport-ws@^0.9.19:
-  version "0.9.19"
-  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.19.tgz#10ca32f7e291d5ee8eb728b9c02e43c52606cdcf"
-  integrity sha512-dxdemxFFB0ppCLg10FTtRqH/31FNRL1y1BQv8209MK5I4CwALb7iihQg+7p65lFcIl8MHatINWBLOqpgU4Kyyw==
-  dependencies:
-    backo2 "^1.0.2"
-    eventemitter3 "^3.1.0"
-    iterall "^1.2.1"
-    symbol-observable "^1.0.4"
-    ws "^5.2.0 || ^6.0.0 || ^7.0.0"
-
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -5765,11 +5861,6 @@ swap-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-symbol-observable@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
 symbol-observable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
@@ -6107,11 +6198,6 @@ ws@8.12.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.1.tgz#c51e583d79140b5e42e39be48c934131942d4a8f"
   integrity sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==
 
-"ws@^5.2.0 || ^6.0.0 || ^7.0.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.0.tgz#0033bafea031fb9df041b2026fc72a571ca44691"
-  integrity sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==
-
 ws@^8.12.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"