From e2c1382ed5f8be6d0e50094c3f85aa34a1f78365 Mon Sep 17 00:00:00 2001 From: Meng Zhang Date: Tue, 5 Dec 2023 22:51:45 +0800 Subject: [PATCH] refactor: extract graphql query into components --- ee/tabby-ui/app/(dashboard)/page.tsx | 8 +- ee/tabby-ui/lib/gql/generates/gql.ts | 26 ++---- ee/tabby-ui/lib/gql/generates/graphql.ts | 101 ++++++---------------- ee/tabby-ui/lib/gql/request-documents.tsx | 22 ----- ee/tabby-ui/lib/hooks/use-workers.ts | 17 +++- 5 files changed, 58 insertions(+), 116 deletions(-) delete mode 100644 ee/tabby-ui/lib/gql/request-documents.tsx diff --git a/ee/tabby-ui/app/(dashboard)/page.tsx b/ee/tabby-ui/app/(dashboard)/page.tsx index d4c2da7..f9cb98e 100644 --- a/ee/tabby-ui/app/(dashboard)/page.tsx +++ b/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) diff --git a/ee/tabby-ui/lib/gql/generates/gql.ts b/ee/tabby-ui/lib/gql/generates/gql.ts index a028a2a..484a74d 100644 --- a/ee/tabby-ui/lib/gql/generates/gql.ts +++ b/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, - '\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 + types.RegisterDocument } /** @@ -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] ?? {} diff --git a/ee/tabby-ui/lib/gql/generates/graphql.ts b/ee/tabby-ui/lib/gql/generates/graphql.ts index ae50657..ff4b93b 100644 --- a/ee/tabby-ui/lib/gql/generates/graphql.ts +++ b/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 type GetWorkersQuery = { - __typename?: 'Query' - workers: Array<{ - __typename?: 'Worker' - kind: WorkerKind - name: string - addr: string - device: string - arch: string - cpuInfo: string - cpuCount: number - cudaDevices: Array - }> -} - -export type GetRegistrationTokenQueryVariables = Exact<{ [key: string]: never }> - -export type GetRegistrationTokenQuery = { - __typename?: 'Query' - registrationToken: string -} - +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 +> export const GetIsAdminInitializedDocument = { kind: 'Document', definitions: [ @@ -298,54 +300,3 @@ export const RegisterDocument = { } ] } as unknown as DocumentNode -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 -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 -> diff --git a/ee/tabby-ui/lib/gql/request-documents.tsx b/ee/tabby-ui/lib/gql/request-documents.tsx deleted file mode 100644 index c41aceb..0000000 --- a/ee/tabby-ui/lib/gql/request-documents.tsx +++ /dev/null @@ -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 - } -`) \ No newline at end of file diff --git a/ee/tabby-ui/lib/hooks/use-workers.ts b/ee/tabby-ui/lib/hooks/use-workers.ts index af1ffdd..3ecc478 100644 --- a/ee/tabby-ui/lib/hooks/use-workers.ts +++ b/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]: '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