refactor: extract graphql query into components

ee/tabby-ui/app/(dashboard)/page.tsx

@@ -17,8 +17,8 @@ import WorkerCard from './components/worker-card'
 import { useWorkers } from '@/lib/hooks/use-workers'
 import { WorkerKind } from '@/lib/gql/generates/graphql'
 import { useGraphQL } from '@/lib/hooks/use-graphql'
-import { getRegistrationTokenDocument } from '@/lib/gql/request-documents'
 import { CopyButton } from '@/components/copy-button'
+import { graphql } from '@/lib/gql/generates'
 
 const COMMUNITY_DIALOG_SHOWN_KEY = 'community-dialog-shown'
 
@@ -75,6 +75,12 @@ function toBadgeString(str: string) {
   return encodeURIComponent(str.replaceAll('-', '--'))
 }
 
+const getRegistrationTokenDocument = graphql(/* GraphQL */ `
+  query GetRegistrationToken {
+    registrationToken
+  }
+`)
+
 function MainPanel() {
   const { data: healthInfo } = useHealth()
   const workers = useWorkers(healthInfo)

ee/tabby-ui/lib/gql/generates/gql.ts

@@ -13,14 +13,12 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
+  '\n  query GetRegistrationToken {\n    registrationToken\n  }\n':
+    types.GetRegistrationTokenDocument,
   '\n  query GetIsAdminInitialized {\n    isAdminInitialized\n  }\n':
     types.GetIsAdminInitializedDocument,
   '\n  mutation register($email: String!, $password1: String!, $password2: String!, $invitationCode: String) {\n    register(\n      email: $email\n      password1: $password1\n      password2: $password2\n      invitationCode: $invitationCode\n    ) {\n      accessToken\n      refreshToken\n    }\n  }\n':
-    types.RegisterDocument,
+    types.RegisterDocument
-  '\n  query GetWorkers {\n    workers {\n      kind\n      name\n      addr\n      device\n      arch\n      cpuInfo\n      cpuCount\n      cudaDevices\n    }\n  }\n':
-    types.GetWorkersDocument,
-  '\n  query GetRegistrationToken {\n    registrationToken\n  }\n':
-    types.GetRegistrationTokenDocument
 }
 
 /**
@@ -37,6 +35,12 @@ const documents = {
  */
 export function graphql(source: string): unknown
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  query GetRegistrationToken {\n    registrationToken\n  }\n'
+): (typeof documents)['\n  query GetRegistrationToken {\n    registrationToken\n  }\n']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -49,18 +53,6 @@ export function graphql(
 export function graphql(
   source: '\n  mutation register($email: String!, $password1: String!, $password2: String!, $invitationCode: String) {\n    register(\n      email: $email\n      password1: $password1\n      password2: $password2\n      invitationCode: $invitationCode\n    ) {\n      accessToken\n      refreshToken\n    }\n  }\n'
 ): (typeof documents)['\n  mutation register($email: String!, $password1: String!, $password2: String!, $invitationCode: String) {\n    register(\n      email: $email\n      password1: $password1\n      password2: $password2\n      invitationCode: $invitationCode\n    ) {\n      accessToken\n      refreshToken\n    }\n  }\n']
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: '\n  query GetWorkers {\n    workers {\n      kind\n      name\n      addr\n      device\n      arch\n      cpuInfo\n      cpuCount\n      cudaDevices\n    }\n  }\n'
-): (typeof documents)['\n  query GetWorkers {\n    workers {\n      kind\n      name\n      addr\n      device\n      arch\n      cpuInfo\n      cpuCount\n      cudaDevices\n    }\n  }\n']
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: '\n  query GetRegistrationToken {\n    registrationToken\n  }\n'
-): (typeof documents)['\n  query GetRegistrationToken {\n    registrationToken\n  }\n']
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {}

ee/tabby-ui/lib/gql/generates/graphql.ts

@@ -127,6 +127,13 @@ export enum WorkerKind {
   Completion = 'COMPLETION'
 }
 
+export type GetRegistrationTokenQueryVariables = Exact<{ [key: string]: never }>
+
+export type GetRegistrationTokenQuery = {
+  __typename?: 'Query'
+  registrationToken: string
+}
+
 export type GetIsAdminInitializedQueryVariables = Exact<{
   [key: string]: never
 }>
@@ -152,30 +159,25 @@ export type RegisterMutation = {
   }
 }
 
-export type GetWorkersQueryVariables = Exact<{ [key: string]: never }>
+export const GetRegistrationTokenDocument = {
-
+  kind: 'Document',
-export type GetWorkersQuery = {
+  definitions: [
-  __typename?: 'Query'
+    {
-  workers: Array<{
+      kind: 'OperationDefinition',
-    __typename?: 'Worker'
+      operation: 'query',
-    kind: WorkerKind
+      name: { kind: 'Name', value: 'GetRegistrationToken' },
-    name: string
+      selectionSet: {
-    addr: string
+        kind: 'SelectionSet',
-    device: string
+        selections: [
-    arch: string
+          { kind: 'Field', name: { kind: 'Name', value: 'registrationToken' } }
-    cpuInfo: string
+        ]
-    cpuCount: number
+      }
-    cudaDevices: Array<string>
+    }
-  }>
+  ]
-}
+} as unknown as DocumentNode<
-
+  GetRegistrationTokenQuery,
-export type GetRegistrationTokenQueryVariables = Exact<{ [key: string]: never }>
+  GetRegistrationTokenQueryVariables
-
+>
-export type GetRegistrationTokenQuery = {
-  __typename?: 'Query'
-  registrationToken: string
-}
-
 export const GetIsAdminInitializedDocument = {
   kind: 'Document',
   definitions: [
@@ -298,54 +300,3 @@ export const RegisterDocument = {
     }
   ]
 } as unknown as DocumentNode<RegisterMutation, RegisterMutationVariables>
-export const GetWorkersDocument = {
-  kind: 'Document',
-  definitions: [
-    {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'GetWorkers' },
-      selectionSet: {
-        kind: 'SelectionSet',
-        selections: [
-          {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'workers' },
-            selectionSet: {
-              kind: 'SelectionSet',
-              selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'kind' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'addr' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'device' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'arch' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'cpuInfo' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'cpuCount' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'cudaDevices' } }
-              ]
-            }
-          }
-        ]
-      }
-    }
-  ]
-} as unknown as DocumentNode<GetWorkersQuery, GetWorkersQueryVariables>
-export const GetRegistrationTokenDocument = {
-  kind: 'Document',
-  definitions: [
-    {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'GetRegistrationToken' },
-      selectionSet: {
-        kind: 'SelectionSet',
-        selections: [
-          { kind: 'Field', name: { kind: 'Name', value: 'registrationToken' } }
-        ]
-      }
-    }
-  ]
-} as unknown as DocumentNode<
-  GetRegistrationTokenQuery,
-  GetRegistrationTokenQueryVariables
->

ee/tabby-ui/lib/gql/request-documents.tsx

@@ -1,22 +0,0 @@
-import { graphql } from './generates'
-
-export const getAllWorkersDocument = graphql(/* GraphQL */ `
-  query GetWorkers {
-    workers {
-      kind
-      name
-      addr
-      device
-      arch
-      cpuInfo
-      cpuCount
-      cudaDevices
-    }
-  }
-`)
-
-export const getRegistrationTokenDocument = graphql(/* GraphQL */ `
-  query GetRegistrationToken {
-    registrationToken
-  }
-`)

ee/tabby-ui/lib/hooks/use-workers.ts

@@ -1,9 +1,9 @@
 import React from 'react'
 import { groupBy, findIndex, slice } from 'lodash-es'
 import { Worker, WorkerKind } from '@/lib/gql/generates/graphql'
-import { getAllWorkersDocument } from '@/lib/gql/request-documents'
 import { useGraphQL } from './use-graphql'
 import type { HealthInfo } from './use-health'
+import { graphql } from '@/lib/gql/generates'
 
 const modelNameMap: Record<WorkerKind, 'chat_model' | 'model'> = {
   [WorkerKind.Chat]: 'chat_model',
@@ -26,6 +26,21 @@ function transformHealthInfoToWorker(
   }
 }
 
+export const getAllWorkersDocument = graphql(/* GraphQL */ `
+  query GetWorkers {
+    workers {
+      kind
+      name
+      addr
+      device
+      arch
+      cpuInfo
+      cpuCount
+      cudaDevices
+    }
+  }
+`)
+
 function useWorkers(healthInfo?: HealthInfo) {
   const { data } = useGraphQL(getAllWorkersDocument)
   let workers = data?.workers