feat: separate autofield select query into hooks for reuse

Author: PondC

packages/react/src/react/components/compound/auto-field/index.tsx

@@ -4,7 +4,6 @@ import { type ReactNode, startTransition, useMemo } from 'react'
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'
 
 import { EnvelopeIcon } from '@phosphor-icons/react'
-import { useQuery } from '@tanstack/react-query'
 
 import {
   BaseIcon,
@@ -34,8 +33,9 @@ import {
   useFormItemController,
 } from '@genseki/react'
 
+import { useOptionsHelperQuery } from './query-options-helper'
+
 import type {
-  FieldOptionsCallbackReturn,
   FieldRelationShapeClient,
   FieldsClient,
   FieldShapeClient,
@@ -208,18 +208,10 @@ export function AutoSelectField(props: AutoSelectField) {
     control: form.control,
   })
 
-  const query = useQuery<{ status: 200; body: FieldOptionsCallbackReturn }>({
-    queryKey: ['POST', props.optionsFetchPath, { pathParams: { name: props.optionsName } }],
-    queryFn: async () => {
-      const response = await fetch(`/api${props.optionsFetchPath}?name=${props.optionsName}`, {
-        method: 'POST',
-        body: JSON.stringify(value),
-        headers: { 'Content-Type': 'application/json' },
-      })
-      if (!response.ok) throw new Error('Failed to fetch options')
-      return response.json()
-    },
-    enabled: false,
+  const { query } = useOptionsHelperQuery({
+    optionsFetchPath: props.optionsFetchPath,
+    optionsName: props.optionsName,
+    queryFnBodyValue: value,
   })
 
   useDebounce(value, () => query.refetch(), 500)

packages/react/src/react/components/compound/auto-field/query-options-helper.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { FieldOptionsCallbackReturn } from '../../../../core/field'
+
+export function useOptionsHelperQuery(props: {
+  optionsFetchPath: string
+  optionsName: string
+  queryFnBodyValue?: any
+  retryCount?: number
+}) {
+  const query = useQuery<{ status: 200; body: FieldOptionsCallbackReturn }>({
+    queryKey: ['POST', props.optionsFetchPath, { pathParams: { name: props.optionsName } }],
+    queryFn: async () => {
+      const response = await fetch(`/api${props.optionsFetchPath}?name=${props.optionsName}`, {
+        method: 'POST',
+        body: props.queryFnBodyValue ? JSON.stringify(props.queryFnBodyValue) : undefined,
+        headers: { 'Content-Type': 'application/json' },
+      })
+      if (!response.ok) throw new Error('Failed to fetch options')
+      return response.json()
+    },
+    enabled: false,
+    retry: props.retryCount, // defaults is 3
+  })
+  return { query }
+}

packages/react/src/react/views/collections/list/toolbar/components/filter/components/filter-options.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react'
 
-import { useQuery } from '@tanstack/react-query'
-
 import { BaseFilterBox, type BaseFilterBoxInterface } from './base'
 
-import type { FieldOptionsCallbackReturn } from '../../../../../../../../core/field'
 import {
   Label,
   Select,
@@ -13,6 +10,7 @@ import {
   SelectOption,
   SelectTrigger,
 } from '../../../../../../../components'
+import { useOptionsHelperQuery } from '../../../../../../../components/compound/auto-field/query-options-helper'
 import { useDebounce } from '../../../../../../../hooks/use-debounce'
 
 interface FilterOptionsInterface extends BaseFilterBoxInterface {
@@ -29,19 +27,10 @@ export function FilterOptions(props: FilterOptionsInterface) {
 
   const optionKey = `${optionsFetchPath} - ${optionsName}`
 
-  const query = useQuery<{ status: 200; body: FieldOptionsCallbackReturn }>({
-    queryKey: ['POST', optionsFetchPath, { pathParams: { name: optionsName } }],
-    queryFn: async () => {
-      const response = await fetch(`/api/${optionsFetchPath}?name=${optionsName}`, {
-        method: 'POST',
-        // body: JSON.stringify(value),
-        headers: { 'Content-Type': 'application/json' },
-      })
-      if (!response.ok) throw new Error('Failed to fetch options')
-      return response.json()
-    },
-    enabled: false,
-    retry: 2,
+  const { query } = useOptionsHelperQuery({
+    optionsFetchPath: optionsFetchPath,
+    optionsName: optionsName,
+    retryCount: 2,
   })
 
   useDebounce(

packages/react/src/react/views/collections/list/toolbar/components/filter/panel-content.tsx

@@ -215,7 +215,7 @@ export function CollectionListFilterPanel(props: CollectionListFilterPanelProps)
                         handleRemoveChosenFilter(filterField.fieldShape)
                       }}
                       label={fieldLabel}
-                      optionsFetchPath={`${props.slug}/create/options`}
+                      optionsFetchPath={`/${props.slug}/create/options`}
                       optionsName={filterField.options}
                     />
                   )