refactor(ui): graphql client refactoring (#1276)

* feat(tabby-ui): init * feat(ui): auto refresh access token * fix(ui): requestPolicy * fix(ui): move jwt decode to authcontext to avoid too much calculate * fix(ui): useSignin * Apply suggestions from code review --------- Co-authored-by: Meng Zhang <[email protected]>
TabbyML · Jan 23, 2024 · cb0e3b1 · cb0e3b1
1 parent 74830a4
commit cb0e3b1
Show file tree

Hide file tree

Showing 18 changed files with 409 additions and 225 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx b/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx
@@ -1,10 +1,13 @@
 'use client'
 
+import { noop } from 'lodash-es'
+import { useQuery } from 'urql'
+
 import { graphql } from '@/lib/gql/generates'
 import { WorkerKind } from '@/lib/gql/generates/graphql'
 import { useHealth } from '@/lib/hooks/use-health'
 import { useWorkers } from '@/lib/hooks/use-workers'
-import { useAuthenticatedGraphQLQuery, useMutation } from '@/lib/tabby/gql'
+import { useMutation } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
 import { IconRotate } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
@@ -32,13 +35,13 @@ function toBadgeString(str: string) {
 export default function Workers() {
   const { data: healthInfo } = useHealth()
   const workers = useWorkers()
-  const { data: registrationTokenRes, mutate } = useAuthenticatedGraphQLQuery(
-    getRegistrationTokenDocument
-  )
+  const [{ data: registrationTokenRes }, reexecuteQuery] = useQuery({
+    query: getRegistrationTokenDocument
+  })
 
   const resetRegistrationToken = useMutation(resetRegistrationTokenDocument, {
     onCompleted() {
-      mutate()
+      reexecuteQuery()
     }
   })
 
@@ -69,6 +72,7 @@ export default function Workers() {
           <Input
             className="max-w-[320px] font-mono text-red-600"
             value={registrationTokenRes.registrationToken}
+            onChange={noop}
           />
           <Button
             title="Rotate"

diff --git a/ee/tabby-ui/app/(dashboard)/page.tsx b/ee/tabby-ui/app/(dashboard)/page.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { noop } from 'lodash-es'
+import { useQuery } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
 import { useHealth } from '@/lib/hooks/use-health'
-import { useAuthenticatedGraphQLQuery, useMutation } from '@/lib/tabby/gql'
+import { useMutation } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
 import {
   CardContent,
@@ -43,14 +45,14 @@ const resetUserAuthTokenDocument = graphql(/* GraphQL */ `
 
 function MainPanel() {
   const { data: healthInfo } = useHealth()
-  const { data, mutate } = useAuthenticatedGraphQLQuery(meQuery)
+  const [{ data }, reexecuteQuery] = useQuery({ query: meQuery })
   const [origin, setOrigin] = useState('')
   useEffect(() => {
     setOrigin(new URL(window.location.href).origin)
   }, [])
 
   const resetUserAuthToken = useMutation(resetUserAuthTokenDocument, {
-    onCompleted: () => mutate()
+    onCompleted: () => reexecuteQuery()
   })
 
   if (!healthInfo || !data) return
@@ -63,7 +65,7 @@ function MainPanel() {
       <CardContent className="flex flex-col gap-4">
         <Label>Endpoint URL</Label>
         <span className="flex items-center gap-1">
-          <Input value={origin} className="max-w-[320px]" />
+          <Input value={origin} onChange={noop} className="max-w-[320px]" />
           <CopyButton value={origin} />
         </span>
 
@@ -72,6 +74,7 @@ function MainPanel() {
           <Input
             className="max-w-[320px] font-mono text-red-600"
             value={data.me.authToken}
+            onChange={noop}
           />
           <Button
             title="Rotate"

diff --git a/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx b/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx
@@ -2,9 +2,10 @@
 
 import React, { useEffect, useState } from 'react'
 import moment from 'moment'
+import { useQuery } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
-import { useAuthenticatedGraphQLQuery, useMutation } from '@/lib/tabby/gql'
+import { useMutation } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
 import { IconTrash } from '@/components/ui/icons'
 import {
@@ -37,7 +38,7 @@ const deleteInvitationMutation = graphql(/* GraphQL */ `
 `)
 
 export default function InvitationTable() {
-  const { data, mutate } = useAuthenticatedGraphQLQuery(listInvitations)
+  const [{ data }, reexecuteQuery] = useQuery({ query: listInvitations })
   const invitations = data?.invitations
   const [origin, setOrigin] = useState('')
   useEffect(() => {
@@ -46,7 +47,7 @@ export default function InvitationTable() {
 
   const deleteInvitation = useMutation(deleteInvitationMutation, {
     onCompleted() {
-      mutate()
+      reexecuteQuery()
     }
   })
 
@@ -84,7 +85,7 @@ export default function InvitationTable() {
           })}
           <TableRow>
             <TableCell className="p-2">
-              <CreateInvitationForm onCreated={() => mutate()} />
+              <CreateInvitationForm onCreated={() => reexecuteQuery()} />
             </TableCell>
           </TableRow>
         </TableBody>

diff --git a/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx b/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx
@@ -2,9 +2,9 @@
 
 import React from 'react'
 import moment from 'moment'
+import { useQuery } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
-import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
 import { Badge } from '@/components/ui/badge'
 import {
   Table,
@@ -26,7 +26,7 @@ const listUsers = graphql(/* GraphQL */ `
 `)
 
 export default function UsersTable() {
-  const { data } = useAuthenticatedGraphQLQuery(listUsers)
+  const [{ data }] = useQuery({ query: listUsers })
   const users = data?.users
 
   return (

diff --git a/ee/tabby-ui/app/auth/signup/components/user-register-form.tsx b/ee/tabby-ui/app/auth/signup/components/user-register-form.tsx
@@ -69,7 +69,7 @@ export function UserAuthForm({
   const { isSubmitting } = form.formState
   const onSubmit = useMutation(registerUser, {
     async onCompleted(values) {
-      if (await signIn(values.register)) {
+      if (await signIn(values?.register)) {
         router.replace('/')
       }
     },

diff --git a/ee/tabby-ui/app/files/components/file-tree.tsx b/ee/tabby-ui/app/files/components/file-tree.tsx
@@ -6,7 +6,7 @@ import { SWRResponse } from 'swr'
 import useSWRImmutable from 'swr/immutable'
 
 import { useDebounce } from '@/lib/hooks/use-debounce'
-import { useAuthenticatedApi, useSession } from '@/lib/tabby/auth'
+import { useSession } from '@/lib/tabby/auth'
 import fetcher from '@/lib/tabby/fetcher'
 import { cn } from '@/lib/utils'
 import {
@@ -276,11 +276,9 @@ const DirectoryTreeNode: React.FC<DirectoryTreeNodeProps> = ({
 
   const { data, isValidating }: SWRResponse<ResolveEntriesResponse> =
     useSWRImmutable(
-      useAuthenticatedApi(
-        shouldFetchChildren
-          ? `/repositories/${repositoryName}/resolve/${basename}`
-          : null
-      ),
+      shouldFetchChildren
+        ? `/repositories/${repositoryName}/resolve/${basename}`
+        : null,
       fetcher,
       {
         revalidateIfStale: false
@@ -422,10 +420,9 @@ const RepositoriesFileTree: React.FC<RepositoriesFileTreeProps> = ({
     try {
       if (!accessToken) return []
 
-      const repos: ResolveEntriesResponse = await fetcher([
-        '/repositories/resolve/',
-        accessToken
-      ])
+      const repos: ResolveEntriesResponse = await fetcher(
+        '/repositories/resolve/'
+      )
       return repos?.entries
     } catch (e) {
       return []
@@ -447,10 +444,7 @@ const RepositoriesFileTree: React.FC<RepositoriesFileTreeProps> = ({
       // fetch default directories
       const requests: Array<() => Promise<ResolveEntriesResponse>> =
         directoryPaths.map(path => () => {
-          return fetcher([
-            `/repositories/${defaultRepository}/resolve/${path}`,
-            accessToken
-          ])
+          return fetcher(`/repositories/${defaultRepository}/resolve/${path}`)
         })
       const entries = await Promise.all(requests.map(fn => fn()))
       let result: TFile[] = []

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -6,8 +6,7 @@ import { has } from 'lodash-es'
 import useSWRImmutable from 'swr/immutable'
 
 import useRouterStuff from '@/lib/hooks/use-router-stuff'
-import { useAuthenticatedApi } from '@/lib/tabby/auth'
-import fetcher, { tokenTextFetcher as textFetcher } from '@/lib/tabby/fetcher'
+import fetcher from '@/lib/tabby/fetcher'
 import { cn } from '@/lib/utils'
 import {
   ResizableHandle,
@@ -103,20 +102,16 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
   const { activePath, setActivePath, codeMap, setCodeMap, setFileMetaMap } =
     React.useContext(SourceCodeBrowserContext)
   const { data: fileContent } = useSWRImmutable(
-    useAuthenticatedApi(
-      fileResolver && repositoryName
-        ? `/repositories/${repositoryName}/resolve/${fileResolver}`
-        : null
-    ),
-    textFetcher
+    fileResolver && repositoryName
+      ? `/repositories/${repositoryName}/resolve/${fileResolver}`
+      : null,
+    (url: string) => fetcher(url, { format: 'text' })
   )
 
   const { data: fileMeta } = useSWRImmutable(
-    useAuthenticatedApi(
-      fileContent && fileResolver && repositoryName
-        ? `/repositories/${repositoryName}/meta/${fileResolver}`
-        : null
-    ),
+    fileContent && fileResolver && repositoryName
+      ? `/repositories/${repositoryName}/meta/${fileResolver}`
+      : null,
     fetcher
   )
 

diff --git a/ee/tabby-ui/components/prompt-form.tsx b/ee/tabby-ui/components/prompt-form.tsx
@@ -4,7 +4,6 @@ import { debounce, has } from 'lodash-es'
 import useSWR from 'swr'
 
 import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
-import { useAuthenticatedApi } from '@/lib/tabby/auth'
 import fetcher from '@/lib/tabby/fetcher'
 import type { ISearchHit, SearchReponse } from '@/lib/types'
 import { cn } from '@/lib/utils'
@@ -57,7 +56,7 @@ function PromptFormRenderer(
   >({})
 
   const { data: completionData } = useSWR<SearchReponse>(
-    useAuthenticatedApi(queryCompletionUrl),
+    queryCompletionUrl,
     fetcher,
     {
       revalidateOnFocus: false,

diff --git a/ee/tabby-ui/components/providers.tsx b/ee/tabby-ui/components/providers.tsx
@@ -3,19 +3,23 @@
 import * as React from 'react'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
+import { Provider as UrqlProvider } from 'urql'
 
 import { AuthProvider, useAuthenticatedSession } from '@/lib/tabby/auth'
+import { client } from '@/lib/tabby/gql'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider {...props}>
-      <TooltipProvider>
-        <AuthProvider>
-          <EnsureSignin />
-          {children}
-        </AuthProvider>
-      </TooltipProvider>
+      <UrqlProvider value={client}>
+        <TooltipProvider>
+          <AuthProvider>
+            <EnsureSignin />
+            {children}
+          </AuthProvider>
+        </TooltipProvider>
+      </UrqlProvider>
     </NextThemesProvider>
   )
 }

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -782,8 +782,8 @@ function IconChat({ className, ...props }: React.ComponentProps<'svg'>) {
       <path
         d="M12.5 3L2.5 3.00002C1.67157 3.00002 1 3.6716 1 4.50002V9.50003C1 10.3285 1.67157 11 2.5 11H7.50003C7.63264 11 7.75982 11.0527 7.85358 11.1465L10 13.2929V11.5C10 11.2239 10.2239 11 10.5 11H12.5C13.3284 11 14 10.3285 14 9.50003V4.5C14 3.67157 13.3284 3 12.5 3ZM2.49999 2.00002L12.5 2C13.8807 2 15 3.11929 15 4.5V9.50003C15 10.8807 13.8807 12 12.5 12H11V14.5C11 14.7022 10.8782 14.8845 10.6913 14.9619C10.5045 15.0393 10.2894 14.9965 10.1464 14.8536L7.29292 12H2.5C1.11929 12 0 10.8807 0 9.50003V4.50002C0 3.11931 1.11928 2.00003 2.49999 2.00002Z"
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
       ></path>
     </svg>
   )
@@ -800,8 +800,8 @@ function IconCode({ className, ...props }: React.ComponentProps<'svg'>) {
       <path
         d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z"
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
       ></path>
     </svg>
   )
@@ -818,8 +818,8 @@ function IconBackpack({ className, ...props }: React.ComponentProps<'svg'>) {
       <path
         d="M5 1C5 0.447715 5.44772 0 6 0H9C9.55228 0 10 0.447715 10 1V2H14C14.5523 2 15 2.44772 15 3V6C15 6.8888 14.6131 7.68734 14 8.23608V11.5C14 12.3284 13.3284 13 12.5 13H2.5C1.67157 13 1 12.3284 1 11.5V8.2359C0.38697 7.68721 0 6.88883 0 6V3C0 2.44772 0.447716 2 1 2H5V1ZM9 1V2H6V1H9ZM1 3H5H5.5H9.5H10H14V6C14 6.654 13.6866 7.23467 13.1997 7.6004C12.8655 7.85144 12.4508 8 12 8H8V7.5C8 7.22386 7.77614 7 7.5 7C7.22386 7 7 7.22386 7 7.5V8H3C2.5493 8 2.1346 7.85133 1.80029 7.60022C1.31335 7.23446 1 6.65396 1 6V3ZM7 9H3C2.64961 9 2.31292 8.93972 2 8.82905V11.5C2 11.7761 2.22386 12 2.5 12H12.5C12.7761 12 13 11.7761 13 11.5V8.82915C12.6871 8.93978 12.3504 9 12 9H8V9.5C8 9.77614 7.77614 10 7.5 10C7.22386 10 7 9.77614 7 9.5V9Z"
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
       ></path>
     </svg>
   )

diff --git a/ee/tabby-ui/lib/hooks/use-health.tsx b/ee/tabby-ui/lib/hooks/use-health.tsx
@@ -4,8 +4,6 @@ import useSWR, { SWRResponse } from 'swr'
 
 import fetcher from '@/lib/tabby/fetcher'
 
-import { useAuthenticatedApi } from '../tabby/auth'
-
 export interface HealthInfo {
   device: 'metal' | 'cpu' | 'cuda'
   model?: string
@@ -20,5 +18,5 @@ export interface HealthInfo {
 }
 
 export function useHealth(): SWRResponse<HealthInfo> {
-  return useSWR(useAuthenticatedApi('/v1/health'), fetcher)
+  return useSWR('/v1/health', fetcher)
 }
diff --git 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 { findIndex, groupBy, slice } from 'lodash-es'
+import { useQuery } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
 import { Worker, WorkerKind } from '@/lib/gql/generates/graphql'
-import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
 
 import { useHealth, type HealthInfo } from './use-health'
 
@@ -45,7 +45,7 @@ export const getAllWorkersDocument = graphql(/* GraphQL */ `
 
 function useWorkers() {
   const { data: healthInfo } = useHealth()
-  const { data } = useAuthenticatedGraphQLQuery(getAllWorkersDocument)
+  const [{ data }] = useQuery({ query: getAllWorkersDocument })
   let workers = data?.workers
 
   const groupedWorkers = React.useMemo(() => {