create-ej-app 26.0.0 → 27.0.0

package/template/saas-starter/src/components/data-table/index.tsx

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Generic, feature-rich DataTable component built on TanStack Table.
+ * @fileoverview Generic DataTable built on TanStack Table.
  *
  * Supports:
  * - Server-side (manual) or client-side pagination & sorting
@@ -14,13 +14,10 @@
 'use client'
 
 import {
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
+  type ColumnVisibilityState,
+  type RowData,
+  type SortingState,
+  useTable
 } from '@tanstack/react-table'
 import {
   ArrowDown,
@@ -93,6 +90,7 @@ import { cn } from '~/lib/cn'
 import { useSafeActionQuery } from '~/lib/safe-action-client'
 import { Skeleton } from '../ui/skeleton'
 import { SortOrderEnum } from './enum'
+import { dataTableFeatures } from './features'
 import { DataTableFilter, DataTableProps } from './types'
 
 /**
@@ -161,7 +159,7 @@ const StaticFilterSubContent = memo(function StaticFilterSubContent({
                 {isTruncated ? (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <span>{option.label.slice(0, 18) + '...'}</span>
+                      <span>{option.label.slice(0, 18) + '…'}</span>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="max-w-75 break-all">{option.label}</p>
@@ -284,7 +282,7 @@ const AsyncFilterSubContent = memo(function AsyncFilterSubContent({
                 {isTruncated ? (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <span>{label.slice(0, 18) + '...'}</span>
+                      <span>{label.slice(0, 18) + '…'}</span>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="max-w-75 break-all">{label}</p>
@@ -306,14 +304,13 @@ const AsyncFilterSubContent = memo(function AsyncFilterSubContent({
  * Generic DataTable component with toolbar, filters, sorting and pagination.
  *
  * @template TData  Row data shape
- * @template TValue Cell value shape
  */
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData>({
   columns,
   data = [],
   isLoading = false,
   enableSearch = false,
-  searchPlaceholder = 'Search...',
+  searchPlaceholder = 'Search…',
   initialSearch = '',
   totalCount,
   onParamsChange,
@@ -324,9 +321,10 @@ export function DataTable<TData, TValue>({
   initialSorting = [],
   filters = [],
   activeFilters = {}
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>(initialSorting)
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [columnVisibility, setColumnVisibility] =
+    useState<ColumnVisibilityState>({})
   const [searchValue, setSearchValue] = useState(initialSearch)
   const [pagination, setPagination] = useState({
     pageIndex: controlledPageIndex,
@@ -335,12 +333,41 @@ export function DataTable<TData, TValue>({
   /** Cache for async filter labels so pills display correctly after data refetch. */
   const [labelCache, setLabelCache] = useState<Record<string, string>>({})
   const searchInputId = useId()
-  const lastTotalCountRef = useRef<number | undefined>(totalCount)
-  /** Ref to always read the latest activeFilters inside async callbacks (avoids stale closures). */
+  /**
+   * Last positive totalCount. Used while loading so a transient 0 does not
+   * collapse the pagination footer (e.g. "Page 1 of 1" mid-refetch).
+   * Adjusted during render when the prop changes (React-approved pattern).
+   */
+  const [lastPositiveTotalCount, setLastPositiveTotalCount] = useState<
+    number | undefined
+  >(totalCount !== undefined && totalCount > 0 ? totalCount : undefined)
+  if (
+    totalCount !== undefined &&
+    totalCount > 0 &&
+    totalCount !== lastPositiveTotalCount
+  ) {
+    setLastPositiveTotalCount(totalCount)
+  }
+  const stableTotalCount =
+    isLoading && totalCount === 0 && lastPositiveTotalCount !== undefined
+      ? lastPositiveTotalCount
+      : totalCount
+
+  /** Latest values for debounced/async callbacks without putting them in effect deps. */
   const activeFiltersRef = useRef(activeFilters)
-  activeFiltersRef.current = activeFilters
+  const onParamsChangeRef = useRef(onParamsChange)
   /** Set by the prop-sync effect so the debounced effect can skip redundant fires. */
   const isExternalPaginationSync = useRef(false)
+  /** Skip the initial render to avoid firing onParamsChange on mount. */
+  const isFirstRender = useRef(true)
+
+  useEffect(() => {
+    activeFiltersRef.current = activeFilters
+  }, [activeFilters])
+
+  useEffect(() => {
+    onParamsChangeRef.current = onParamsChange
+  }, [onParamsChange])
 
   // Keep internal pagination in sync with controlled props from parent.
   // Without this, external resets (e.g. filter change → page 1) are ignored.
@@ -350,7 +377,7 @@ export function DataTable<TData, TValue>({
         prev.pageIndex !== controlledPageIndex ||
         prev.pageSize !== controlledPageSize
       ) {
-        // Flag so the debounced effect skips its next fire – the filter/clear
+        // Flag so the debounced effect skips its next fire: the filter/clear
         // handler that triggered this prop change already called onParamsChange.
         isExternalPaginationSync.current = true
         return {
@@ -362,30 +389,13 @@ export function DataTable<TData, TValue>({
     })
   }, [controlledPageIndex, controlledPageSize])
 
-  // Preserve totalCount during loading to avoid pagination flicker (e.g. "Page 1 of 1" when switching pages).
-  // Updating a ref synchronously during render is a safe, idempotent pattern documented by React
-  // because refs are not reactive and this does not trigger a re-render.
-  if (totalCount !== undefined && totalCount > 0) {
-    lastTotalCountRef.current = totalCount
-  }
-  const stableTotalCount = useMemo(
-    () =>
-      isLoading && totalCount === 0 && lastTotalCountRef.current !== undefined
-        ? lastTotalCountRef.current
-        : totalCount,
-    // lastTotalCountRef is a ref - intentionally omitted from deps
-    [isLoading, totalCount]
-  )
-
-  // Initialise TanStack Table with manual pagination/sorting when enabled
-  const table = useReactTable({
+  // TanStack Table v9: features (and row models) live on `dataTableFeatures`.
+  // Core row model is always included; sorted/paginated models only run when
+  // manual* is false.
+  const table = useTable({
+    features: dataTableFeatures,
     data,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    ...(!manualPagination && {
-      getPaginationRowModel: getPaginationRowModel()
-    }),
-    ...(!manualSorting && { getSortedRowModel: getSortedRowModel() }),
     manualPagination,
     manualSorting,
     ...(manualPagination && {
@@ -402,16 +412,11 @@ export function DataTable<TData, TValue>({
     }
   })
 
-  /** Skip the initial render to avoid firing onParamsChange on mount. */
-  const isFirstRender = useRef(true)
-
-  // Stable reference for onParamsChange to avoid unnecessary effect re-runs
-  const onParamsChangeRef = useRef(onParamsChange)
-  onParamsChangeRef.current = onParamsChange
-
   /**
    * Build the params object sent to onParamsChange.
-   * Uses `activeFiltersRef` so async callbacks always read the latest value.
+   * Uses `activeFiltersRef` so debounced callbacks always read the latest filters
+   * without putting `activeFilters` in the debounce effect deps (filter handlers
+   * already call onParamsChange themselves).
    * Pass `overrides` to set page or filters explicitly (e.g. on filter change).
    */
   const buildParams = useCallback(
@@ -446,7 +451,7 @@ export function DataTable<TData, TValue>({
   )
 
   // Debounce param changes (300ms) to batch rapid user interactions.
-  // Only watches pagination, sorting, and searchValue – NOT activeFilters,
+  // Only watches pagination, sorting, and searchValue, NOT activeFilters,
   // because filter handlers already call onParamsChange directly.
   useEffect(() => {
     if (isFirstRender.current) {
@@ -604,7 +609,7 @@ export function DataTable<TData, TValue>({
                       }}
                       className="justify-center text-center"
                     >
-                      Clear filters
+                      Clear Filters
                     </DropdownMenuItem>
                   </>
                 )}
@@ -681,7 +686,7 @@ export function DataTable<TData, TValue>({
                               variant="secondary"
                               className="px-1 font-normal"
                             >
-                              {displayLabel.slice(0, 18) + '...'}
+                              {displayLabel.slice(0, 18) + '…'}
                             </Badge>
                           </TooltipTrigger>
                           <TooltipContent>
@@ -792,10 +797,7 @@ export function DataTable<TData, TValue>({
                               : undefined
                           }
                         >
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                          <table.FlexRender header={header} />
                           {isSortable && (
                             <div className="flex w-4 items-center justify-center">
                               {sortStatus === 'asc' ? (
@@ -827,16 +829,10 @@ export function DataTable<TData, TValue>({
           <TableBody>
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map(row => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() ? 'selected' : undefined}
-                >
+                <TableRow key={row.id}>
                   {row.getVisibleCells().map(cell => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      <table.FlexRender cell={cell} />
                     </TableCell>
                   ))}
                 </TableRow>
@@ -958,3 +954,8 @@ export function DataTable<TData, TValue>({
     </div>
   )
 }
+
+export { SortOrderEnum } from './enum'
+export { dataTableFeatures } from './features'
+export type { DataTableColumnDef } from './features'
+export type { DataTableFilter, DataTableProps } from './types'

package/template/saas-starter/src/components/data-table/types.ts

@@ -1,5 +1,6 @@
-import { ColumnDef, SortingState } from '@tanstack/react-table'
+import type { RowData, SortingState } from '@tanstack/react-table'
 import { SortOrderEnum } from './enum'
+import type { DataTableColumnDef } from './features'
 
 /** A single selectable option inside a filter dropdown. */
 interface DataTableFilterOption {
@@ -34,9 +35,9 @@ export interface DataTableFilter {
  * When `manualPagination` / `manualSorting` are enabled the parent is
  * responsible for fetching data and passing results back via `data` & `totalCount`.
  */
-export interface DataTableProps<TData, TValue> {
-  /** Column definitions (TanStack Table). */
-  columns: ColumnDef<TData, TValue>[]
+export interface DataTableProps<TData extends RowData> {
+  /** Column definitions (TanStack Table v9, typed to DataTable features). */
+  columns: DataTableColumnDef<TData, any>[]
   /** Row data to display. */
   data?: TData[]
   /** Show skeleton loading rows while data is being fetched. */

package/template/saas-starter/src/components/error.tsx

@@ -1,8 +1,53 @@
+/**
+ * @fileoverview Reusable Error Display Component
+ *
+ * Generic error/empty state component for displaying user-friendly
+ * error messages with optional icon and action button.
+ *
+ * **Use Cases:**
+ * - Empty search results
+ * - Data fetch failures
+ * - Access denied states
+ * - 404-like content not found
+ *
+ * @module components/error
+ */
+
 import { type LucideIcon, AlertTriangle } from 'lucide-react'
 import Link from 'next/link'
 import { FC } from 'react'
 import { Button } from '~/components/ui/button'
 
+/**
+ * Error Display Component
+ *
+ * Renders a centered error state with icon, message, and action.
+ *
+ * **Layout:**
+ * - Large icon (customizable)
+ * - Bold title
+ * - Descriptive message
+ * - Action button (customizable link)
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.title - Error heading text
+ * @param {string} props.message - Descriptive error message
+ * @param {LucideIcon} [props.icon] - Custom icon (defaults to AlertTriangle)
+ * @param {Object} [props.link] - Optional action button configuration
+ * @param {string} [props.link.href] - Button link destination (defaults to '/')
+ * @param {string} [props.link.text] - Button text (defaults to 'Browse Products')
+ * @returns {JSX.Element} Centered error display
+ *
+ * @example
+ * ```tsx
+ * <ErrorDisplay
+ *   title="No Results Found"
+ *   message="Try adjusting your search or filters"
+ *   icon={Search}
+ *   link={{ href: '/search', text: 'Clear Filters' }}
+ * />
+ * ```
+ */
 export const ErrorDisplay: FC<{
   title: string
   message: string

package/template/saas-starter/src/components/file-upload.tsx

@@ -3,12 +3,40 @@
 import { File, FileText, Loader2, Music, Upload, Video, X } from 'lucide-react'
 import Image from 'next/image'
 import { useRef, useState } from 'react'
-import { toast } from 'sonner'
-import { generateUploadUrlAction } from '~/actions/uploads'
+import { generateUploadUrlAction } from '~/app/actions/uploads'
 import { Button } from '~/components/ui/button'
 import { cn } from '~/lib/cn'
-import { MAX_FILE_SIZE_BYTES, MAX_FILE_SIZE_MB } from '~/lib/constants'
+import {
+  MAX_FILE_SIZE_BYTES,
+  MAX_FILE_SIZE_MB,
+  R2_UPLOAD_EXTENSION_BY_MIME_TYPE,
+  type R2UploadMimeType
+} from '~/lib/constants'
+import { toastErrorMessage, toastIfActionFailed } from '~/lib/toast-message'
+
+function isAllowedMimeType(type: string): type is R2UploadMimeType {
+  return type in R2_UPLOAD_EXTENSION_BY_MIME_TYPE
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result)
+        return
+      }
+      reject(new Error('Failed to read file'))
+    }
+    reader.onerror = () => {
+      reject(reader.error ?? new Error('Failed to read file'))
+    }
+    reader.readAsDataURL(file)
+  })
+}
 
+// Discriminated union so the preview renderer knows exactly what to show
+// without guessing from a raw URL string.
 type PreviewState =
   | { kind: 'image'; url: string }
   | { kind: 'file'; name: string; mimeType: string }
@@ -16,6 +44,7 @@ type PreviewState =
 
 function getInitialPreview(currentUrl?: string | null): PreviewState {
   if (!currentUrl) return null
+  // base64 data URLs and image paths/URLs both render as images
   return { kind: 'image', url: currentUrl }
 }
 
@@ -32,7 +61,7 @@ function FileTypeIcon({ mimeType }: { mimeType: string }) {
 type Props = {
   /** MIME type filter passed to the file input, e.g. `"image/*"` or `"image/*,application/pdf"`. */
   accept: string
-  /** Scopes the upload to a organization for cleanup tracking. */
+  /** Organization that owns the upload; the server checks you manage it. */
   organizationId: string
   /**
    * Called with the R2 object key (prod) or base64 data URL (dev mode) once
@@ -40,13 +69,13 @@ type Props = {
    */
   onClientUploadFinish: (key: string | null) => void
   /**
-   * Pre-resolved URL for the current value - pass the output of
+   * Pre-resolved URL for the current value. Pass the output of
    * `resolveImageUrl` from the parent server component so the preview renders
    * correctly for existing R2 keys.
    */
   currentUrl?: string | null
   className?: string
-  /** Passed to next/image `sizes` - should match the rendered widget width. */
+  /** Passed to next/image `sizes`. It should match the rendered widget width. */
   sizes?: string
 }
 
@@ -66,12 +95,18 @@ export function FileUpload({
 
   const handleFile = async (file: File) => {
     if (file.size > MAX_FILE_SIZE_BYTES) {
-      toast.error(`File must be under ${MAX_FILE_SIZE_MB}MB`)
+      toastErrorMessage(`Choose a file under ${MAX_FILE_SIZE_MB} MB.`)
+      return
+    }
+
+    if (!isAllowedMimeType(file.type)) {
+      toastErrorMessage('Choose a JPEG, PNG, WebP, or GIF image.')
       return
     }
 
     setIsUploading(true)
 
+    // Set the preview from the file type without a network round trip.
     if (file.type.startsWith('image/')) {
       setPreview({ kind: 'image', url: URL.createObjectURL(file) })
     } else {
@@ -85,8 +120,13 @@ export function FileUpload({
       organizationId
     })
 
+    if (toastIfActionFailed(result)) {
+      setPreview(getInitialPreview(currentUrl))
+      setIsUploading(false)
+      return
+    }
     if (!result?.data) {
-      toast.error('Failed to prepare upload. Please try again.')
+      toastErrorMessage('The upload could not start. Try again.')
       setPreview(getInitialPreview(currentUrl))
       setIsUploading(false)
       return
@@ -94,8 +134,8 @@ export function FileUpload({
 
     const { data } = result
 
-    if (data.mode === 'r2') {
-      try {
+    try {
+      if (data.mode === 'r2') {
         const res = await fetch(data.uploadUrl, {
           method: 'PUT',
           body: file,
@@ -103,27 +143,25 @@ export function FileUpload({
         })
         if (!res.ok) throw new Error(`R2 upload failed: ${res.status}`)
         onClientUploadFinish(data.key)
-      } catch {
-        toast.error('Upload failed. Please try again.')
-        setPreview(getInitialPreview(currentUrl))
-      }
-    } else {
-      const reader = new FileReader()
-      reader.onload = e => {
-        const base64 = e.target?.result as string
+      } else {
+        // Development mode has no R2 credentials, so store base64 data directly.
+        // Await the read so isUploading stays true until onClientUploadFinish runs.
+        const base64 = await readFileAsDataUrl(file)
         if (file.type.startsWith('image/')) {
           setPreview({ kind: 'image', url: base64 })
         }
         onClientUploadFinish(base64)
       }
-      reader.onerror = () => {
-        toast.error('Failed to read file. Please try again.')
-        setPreview(getInitialPreview(currentUrl))
-      }
-      reader.readAsDataURL(file)
+    } catch {
+      toastErrorMessage(
+        data.mode === 'r2'
+          ? 'The upload failed. Check your connection and try again.'
+          : 'The file could not be read. Choose it again.'
+      )
+      setPreview(getInitialPreview(currentUrl))
+    } finally {
+      setIsUploading(false)
     }
-
-    setIsUploading(false)
   }
 
   const handleClear = (e: React.MouseEvent) => {
@@ -187,7 +225,7 @@ export function FileUpload({
               Click to upload
             </span>
             <span className="text-muted-foreground/60 text-[11px]">
-              Max {MAX_FILE_SIZE_MB}MB
+              Max {MAX_FILE_SIZE_MB} MB
             </span>
           </div>
         )}
@@ -206,6 +244,7 @@ export function FileUpload({
           size="icon"
           className="absolute -top-2 -right-2 h-6 w-6 rounded-full shadow-sm"
           onClick={handleClear}
+          aria-label="Remove file"
         >
           <X className="h-3 w-3" />
         </Button>

package/template/saas-starter/src/components/loader.tsx

@@ -1,13 +1,29 @@
+/**
+ * @fileoverview Page Transition Loader Component
+ *
+ * Top progress bar shown during navigation, using the theme primary color.
+ *
+ * @module components/loader
+ */
+
 'use client'
 
 import NextTopLoader from 'nextjs-toploader'
 
 import { FC } from 'react'
 
+/**
+ * Page Loader Component
+ *
+ * Renders the NextTopLoader with preset configuration.
+ * Should be included once near the root layout.
+ *
+ * @returns {JSX.Element} Top loading bar component
+ */
 export const Loader: FC = () => {
   return (
     <NextTopLoader
-      color="#777777"
+      color="var(--primary)"
       initialPosition={0.08}
       crawlSpeed={200}
       height={3}
@@ -15,7 +31,7 @@ export const Loader: FC = () => {
       showSpinner={true}
       easing="ease"
       speed={200}
-      shadow={`0 0 10px '#777777',0 0 5px '#777777'`}
+      shadow="0 0 10px var(--primary), 0 0 5px var(--primary)"
       template='<div class="bar" role="bar"><div class="peg"></div></div> 
   <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
       zIndex={10000}

package/template/saas-starter/src/components/logo.tsx

@@ -0,0 +1,49 @@
+import Image from 'next/image'
+import { cn } from '~/lib/cn'
+import { siteConfig } from '~/lib/siteConfig'
+
+/**
+ * Brand mark, with the wordmark beside it unless `showName` is false.
+ *
+ * Two SVG files rather than one: the mark uses two colors, so `currentColor`
+ * cannot recolor it for both themes.
+ */
+export function Logo({
+  className,
+  size = 36,
+  showName = true,
+  priority = false
+}: {
+  className?: string
+  size?: number
+  showName?: boolean
+  priority?: boolean
+}) {
+  const dimensions = { width: size, height: size }
+
+  return (
+    <span className={cn('flex items-center gap-2.5', className)}>
+      <Image
+        src={siteConfig.logo}
+        alt=""
+        aria-hidden
+        {...dimensions}
+        style={dimensions}
+        className="shrink-0 dark:hidden"
+        priority={priority}
+      />
+      <Image
+        src={siteConfig.logoDark}
+        alt=""
+        aria-hidden
+        {...dimensions}
+        style={dimensions}
+        className="hidden shrink-0 dark:block"
+        priority={priority}
+      />
+      <span className={cn('font-bold tracking-tight', !showName && 'sr-only')}>
+        {siteConfig.name}
+      </span>
+    </span>
+  )
+}

package/template/saas-starter/src/components/navigation-search.tsx

@@ -32,7 +32,7 @@ export function NavigationSearch({
   groups,
   dialogDescription,
   emptyMessage = 'No results found.',
-  buttonLabel = 'Search...',
+  buttonLabel = 'Search…',
   buttonClassName = 'text-muted-foreground relative h-9 w-36 justify-start rounded-md text-sm sm:w-64 sm:pr-12'
 }: NavigationSearchProps) {
   const router = useRouter()
@@ -111,7 +111,7 @@ export function NavigationSearch({
         description={dialogDescription}
       >
         <Command>
-          <CommandInput placeholder="Type to search..." />
+          <CommandInput placeholder="Type to search…" />
           <CommandList>
             <CommandEmpty>{emptyMessage}</CommandEmpty>
 

package/template/saas-starter/src/components/page-heading.tsx

@@ -1,3 +1,9 @@
+/**
+ * Reusable page heading component for admin panel pages.
+ * Renders a consistent icon, title and description layout at the top of each page.
+ * The `icon` prop is optional; when omitted only the text block is rendered.
+ * The `children` prop allows for additional elements (e.g. action buttons) to be placed on the right side of the heading.
+ */
 import { FC, ReactNode } from 'react'
 
 export const PageHeading = ({

package/template/saas-starter/src/components/react-query-provider.tsx

@@ -1,12 +1,51 @@
+/**
+ * @fileoverview React Query Provider Component
+ *
+ * Wraps the application with TanStack Query's QueryClientProvider.
+ * Enables data fetching, caching, and server state management.
+ *
+ * **Features Enabled:**
+ * - Automatic background refetching
+ * - Request deduplication
+ * - Cache management
+ * - Optimistic updates
+ * - useSafeActionQuery/useSafeActionMutation hooks
+ *
+ * @module components/react-query-provider
+ * @see https://tanstack.com/query/latest
+ */
+
 'use client'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode, useState } from 'react'
+
+/** Default: treat list/admin data as fresh for 30s so focus does not re-hit every action. */
+const DEFAULT_STALE_TIME_MS = 30_000
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: DEFAULT_STALE_TIME_MS
+      }
+    }
+  })
+}
 
+/**
+ * React Query Provider Component
+ *
+ * Creates one QueryClient for the provider lifetime and wraps children.
+ * Place near the root of the client tree.
+ *
+ * Global `staleTime` is 30s. Live surfaces should pass `staleTime: 0`;
+ * heavy dashboards and static options can pass a longer value.
+ */
 export const ReactQueryProvider: FC<{
   children?: ReactNode
 }> = ({ children }) => {
-  const client = new QueryClient({})
+  const [client] = useState(createQueryClient)
 
   return <QueryClientProvider client={client}>{children}</QueryClientProvider>
 }