From bfc2de49a35951e87f3906fd1f22c21bacb773a8 Mon Sep 17 00:00:00 2001 From: Meng Zhang Date: Thu, 7 Dec 2023 13:52:59 +0800 Subject: [PATCH] refactor: move tabby specific libs to lib/tabby (#970) * refactor: move useGraphQL to useGraphQLQuery * refactor: tabby-gql-client -> tabby/gql * refactor: tabby-fetcher -> tabby/fetcher * fix --- ee/tabby-ui/app/(dashboard)/page.tsx | 4 ++-- ee/tabby-ui/app/auth/components/signup.tsx | 4 ++-- .../app/auth/components/user-auth-form.tsx | 2 +- ee/tabby-ui/components/prompt-form.tsx | 2 +- ee/tabby-ui/lib/gql/generates/gql.ts | 6 +++--- ee/tabby-ui/lib/hooks/use-graphql.ts | 18 ------------------ ee/tabby-ui/lib/hooks/use-health.tsx | 2 +- ee/tabby-ui/lib/hooks/use-workers.ts | 4 ++-- ee/tabby-ui/lib/tabby/auth.tsx | 2 +- .../lib/{tabby-fetcher.ts => tabby/fetcher.ts} | 0 .../lib/{tabby-gql-client.ts => tabby/gql.ts} | 16 ++++++++++++++++ 11 files changed, 29 insertions(+), 31 deletions(-) delete mode 100644 ee/tabby-ui/lib/hooks/use-graphql.ts rename ee/tabby-ui/lib/{tabby-fetcher.ts => tabby/fetcher.ts} (100%) rename ee/tabby-ui/lib/{tabby-gql-client.ts => tabby/gql.ts} (75%) diff --git a/ee/tabby-ui/app/(dashboard)/page.tsx b/ee/tabby-ui/app/(dashboard)/page.tsx index 704f94e..00c7ff3 100644 --- a/ee/tabby-ui/app/(dashboard)/page.tsx +++ b/ee/tabby-ui/app/(dashboard)/page.tsx @@ -16,9 +16,9 @@ import { PropsWithChildren, useEffect, useState } from 'react' 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 { CopyButton } from '@/components/copy-button' import { graphql } from '@/lib/gql/generates' +import { useGraphQLQuery } from '@/lib/tabby/gql' const COMMUNITY_DIALOG_SHOWN_KEY = 'community-dialog-shown' @@ -84,7 +84,7 @@ const getRegistrationTokenDocument = graphql(/* GraphQL */ ` function MainPanel() { const { data: healthInfo } = useHealth() const workers = useWorkers(healthInfo) - const { data: registrationTokenRes } = useGraphQL( + const { data: registrationTokenRes } = useGraphQLQuery( getRegistrationTokenDocument ) diff --git a/ee/tabby-ui/app/auth/components/signup.tsx b/ee/tabby-ui/app/auth/components/signup.tsx index b8eeffa..d8ab4e6 100644 --- a/ee/tabby-ui/app/auth/components/signup.tsx +++ b/ee/tabby-ui/app/auth/components/signup.tsx @@ -2,8 +2,8 @@ import { graphql } from '@/lib/gql/generates' import { UserAuthForm } from './user-auth-form' -import { useGraphQL } from '@/lib/hooks/use-graphql' import { useSearchParams } from 'next/navigation' +import { useGraphQLQuery } from '@/lib/tabby/gql' export const getIsAdminInitialized = graphql(/* GraphQL */ ` query GetIsAdminInitialized { @@ -12,7 +12,7 @@ export const getIsAdminInitialized = graphql(/* GraphQL */ ` `) export default function Signup() { - const { data } = useGraphQL(getIsAdminInitialized) + const { data } = useGraphQLQuery(getIsAdminInitialized) const title = data?.isAdminInitialized ? 'Create an account' : 'Create an admin account' diff --git a/ee/tabby-ui/app/auth/components/user-auth-form.tsx b/ee/tabby-ui/app/auth/components/user-auth-form.tsx index 8f5c228..378add8 100644 --- a/ee/tabby-ui/app/auth/components/user-auth-form.tsx +++ b/ee/tabby-ui/app/auth/components/user-auth-form.tsx @@ -19,7 +19,7 @@ import { FormMessage } from '@/components/ui/form' import { graphql } from '@/lib/gql/generates' -import { useGraphQLForm } from '@/lib/tabby-gql-client' +import { useGraphQLForm } from '@/lib/tabby/gql' export const registerUser = graphql(/* GraphQL */ ` mutation register( diff --git a/ee/tabby-ui/components/prompt-form.tsx b/ee/tabby-ui/components/prompt-form.tsx index 38c2c9b..90a48e4 100644 --- a/ee/tabby-ui/components/prompt-form.tsx +++ b/ee/tabby-ui/components/prompt-form.tsx @@ -22,7 +22,7 @@ import { import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover' import { useEnterSubmit } from '@/lib/hooks/use-enter-submit' import { cn } from '@/lib/utils' -import fetcher from '@/lib/tabby-fetcher' +import fetcher from '@/lib/tabby/fetcher' import { debounce, has } from 'lodash-es' import type { ISearchHit, SearchReponse } from '@/lib/types' diff --git a/ee/tabby-ui/lib/gql/generates/gql.ts b/ee/tabby-ui/lib/gql/generates/gql.ts index 98220c7..e0d873e 100644 --- a/ee/tabby-ui/lib/gql/generates/gql.ts +++ b/ee/tabby-ui/lib/gql/generates/gql.ts @@ -17,7 +17,7 @@ const documents = { 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': + '\n mutation register(\n $email: String!\n $password1: String!\n $password2: String!\n $invitationCode: String\n ) {\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, @@ -55,8 +55,8 @@ export function graphql( * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ 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'] + source: '\n mutation register(\n $email: String!\n $password1: String!\n $password2: String!\n $invitationCode: String\n ) {\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(\n $email: String!\n $password1: String!\n $password2: String!\n $invitationCode: String\n ) {\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. */ diff --git a/ee/tabby-ui/lib/hooks/use-graphql.ts b/ee/tabby-ui/lib/hooks/use-graphql.ts deleted file mode 100644 index e8057ad..0000000 --- a/ee/tabby-ui/lib/hooks/use-graphql.ts +++ /dev/null @@ -1,18 +0,0 @@ -import useSWR, { SWRResponse, SWRConfiguration } from 'swr' -import { gqlClient } from '@/lib/tabby-gql-client' -import { Variables } from 'graphql-request' -import { TypedDocumentNode } from '@graphql-typed-document-node/core' - -function useGraphQL( - document: TypedDocumentNode, - variables?: TVariables, - swrConfiguration?: SWRConfiguration -): SWRResponse { - return useSWR( - [document, variables], - ([document, variables]) => gqlClient.request(document, variables), - swrConfiguration - ) -} - -export { useGraphQL } diff --git a/ee/tabby-ui/lib/hooks/use-health.tsx b/ee/tabby-ui/lib/hooks/use-health.tsx index 5108e86..60b76ed 100644 --- a/ee/tabby-ui/lib/hooks/use-health.tsx +++ b/ee/tabby-ui/lib/hooks/use-health.tsx @@ -2,7 +2,7 @@ import useSWRImmutable from 'swr/immutable' import { SWRResponse } from 'swr' -import fetcher from '@/lib/tabby-fetcher' +import fetcher from '@/lib/tabby/fetcher' export interface HealthInfo { device: 'metal' | 'cpu' | 'cuda' diff --git a/ee/tabby-ui/lib/hooks/use-workers.ts b/ee/tabby-ui/lib/hooks/use-workers.ts index 3ecc478..f1183a4 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 { useGraphQL } from './use-graphql' import type { HealthInfo } from './use-health' import { graphql } from '@/lib/gql/generates' +import { useGraphQLQuery } from '../tabby/gql' const modelNameMap: Record = { [WorkerKind.Chat]: 'chat_model', @@ -42,7 +42,7 @@ export const getAllWorkersDocument = graphql(/* GraphQL */ ` `) function useWorkers(healthInfo?: HealthInfo) { - const { data } = useGraphQL(getAllWorkersDocument) + const { data } = useGraphQLQuery(getAllWorkersDocument) let workers = data?.workers const groupedWorkers = React.useMemo(() => { diff --git a/ee/tabby-ui/lib/tabby/auth.tsx b/ee/tabby-ui/lib/tabby/auth.tsx index 16d4321..6087808 100644 --- a/ee/tabby-ui/lib/tabby/auth.tsx +++ b/ee/tabby-ui/lib/tabby/auth.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { graphql } from '@/lib/gql/generates' import useInterval from '@/lib/hooks/use-interval' -import { gqlClient } from '@/lib/tabby-gql-client' +import { gqlClient } from '@/lib/tabby/gql' import { jwtDecode } from 'jwt-decode' interface AuthData { diff --git a/ee/tabby-ui/lib/tabby-fetcher.ts b/ee/tabby-ui/lib/tabby/fetcher.ts similarity index 100% rename from ee/tabby-ui/lib/tabby-fetcher.ts rename to ee/tabby-ui/lib/tabby/fetcher.ts diff --git a/ee/tabby-ui/lib/tabby-gql-client.ts b/ee/tabby-ui/lib/tabby/gql.ts similarity index 75% rename from ee/tabby-ui/lib/tabby-gql-client.ts rename to ee/tabby-ui/lib/tabby/gql.ts index 3efdc31..316dce1 100644 --- a/ee/tabby-ui/lib/tabby-gql-client.ts +++ b/ee/tabby-ui/lib/tabby/gql.ts @@ -1,3 +1,4 @@ +import useSWR, { SWRResponse, SWRConfiguration } from 'swr' import { GraphQLClient, Variables } from 'graphql-request' import { TypedDocumentNode } from '@graphql-typed-document-node/core' import { GraphQLResponse } from 'graphql-request/build/esm/types' @@ -45,3 +46,18 @@ export function useGraphQLForm< } return { onSubmit } } + +export function useGraphQLQuery< + TResult, + TVariables extends Variables | undefined +>( + document: TypedDocumentNode, + variables?: TVariables, + swrConfiguration?: SWRConfiguration +): SWRResponse { + return useSWR( + [document, variables], + ([document, variables]) => gqlClient.request(document, variables), + swrConfiguration + ) +}