POC React SDK with speakeasy client api layer

package.json

@@ -87,6 +87,7 @@
     "typescript": "^5.6.3"
   },
   "dependencies": {
+    "@gusto/embedded-api": "^0.1.5",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.9.0",
     "@internationalized/date": "^3.5.6",

src/api/context.tsx

@@ -1,50 +1,36 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { GustoEmbedded } from '@gusto/embedded-api'
+import { GustoEmbeddedProvider } from '@gusto/embedded-api/react-query'
 import { createContext, useContext } from 'react'
 import { GustoClient } from './client'
-import { ApiError } from './queries/helpers'
-
-const defaultQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: (failureCount, error) => {
-        const apiError = error as ApiError
-        if (failureCount >= 3) return false
-        // 4xx errors (excecpt for 429) are unlikely to be fixed by retrying
-        if (
-          apiError.statusCode &&
-          400 <= apiError.statusCode &&
-          apiError.statusCode <= 499 &&
-          apiError.statusCode !== 429
-        ) {
-          return false
-        } else {
-          return true
-        }
-      },
-    },
-  },
-})
 
 type GustoApiContextType = {
   GustoClient: GustoClient
 }
 
+const defaultGustoClient = new GustoEmbedded()
 const GustoApiContext = createContext<GustoApiContextType | null>(null)
 
+const queryClient = new QueryClient()
+queryClient.setQueryDefaults(['@gusto/embedded-api'], { retry: false })
+queryClient.setMutationDefaults(['@gusto/embedded-api'], { retry: false })
+
 export function GustoApiContextProvider({
   children,
   context,
-  queryClient = defaultQueryClient,
+  gustoClient = defaultGustoClient,
 }: {
   context: { GustoClient: GustoClient }
-  queryClient?: QueryClient
+  gustoClient?: GustoEmbedded
   children: React.ReactNode
 }) {
   return (
     <GustoApiContext.Provider value={context}>
       <QueryClientProvider client={queryClient}>
-        {children} <ReactQueryDevtools initialIsOpen={false} />
+        <GustoEmbeddedProvider client={gustoClient}>
+          {children} <ReactQueryDevtools initialIsOpen={false} />
+        </GustoEmbeddedProvider>
       </QueryClientProvider>
     </GustoApiContext.Provider>
   )
@@ -55,5 +41,3 @@ export const useGustoApi = () => {
   if (!context) throw Error('useGustoApi can only be used inside GustoApiProvider.')
   return context
 }
-
-export { defaultQueryClient as queryClient }

src/components/Employee/EmployeeList/EmployeeList.tsx

@@ -11,6 +11,7 @@ import { useI18n } from '@/i18n'
 import { componentEvents, EmployeeOnboardingStatus } from '@/shared/constants'
 import { Schemas } from '@/types/schema'
 import { useDeleteEmployee, useGetEmployeesByCompany } from '@/api/queries/company'
+import { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query'
 import { Head } from '@/components/Employee/EmployeeList/Head'
 import { List } from '@/components/Employee/EmployeeList/List'
 import { useUpdateEmployeeOnboardingStatus } from '@/api/queries'
@@ -57,15 +58,16 @@ function Root({ companyId, className, children }: EmployeeListProps) {
   const [currentPage, setCurrentPage] = useState(1)
   const [itemsPerPage, setItemsPerPage] = useState(5)
 
-  const { data } = useGetEmployeesByCompany({
-    company_id: companyId,
+  const { data: employees } = useEmployeesGetSuspense({
+    companyId,
     page: currentPage,
     per: itemsPerPage,
   })
   const deleteEmployeeMutation = useDeleteEmployee(companyId)
   const updateEmployeeOnboardingStatusMutation = useUpdateEmployeeOnboardingStatus(companyId)
 
-  const { items: employees, pagination } = data
+  // TODO: Get this from response headers
+  const pagination = { totalPages: 1 }
   const totalPages = Number(pagination.totalPages) || 1
 
   const handleItemsPerPageChange = (newCount: number) => {

src/components/Employee/EmployeeList/List.tsx

@@ -45,7 +45,7 @@ export const List = () => {
         key: 'name',
         title: t('nameLabel'),
         render: employee => {
-          return firstLastName(employee)
+          return firstLastName({ first_name: employee.firstName, last_name: employee.lastName })
         },
       },
       {