genetic-orange•8mo ago

why not useTable search after data update?

export default function PointList() {
  const { tableQueryResult, pageCount, pageSize, current, setCurrent } = useTable({
    resource: "points",
    pagination: {
        current: 1, 
        pageSize: 10,
    },
  });

const { register, handleSubmit, control, reset } = useForm<BaseRecord, HttpError, IPointsFilterVariables>({
  
    defaultValues: {
      q: getDefaultFilter('q', filters, 'eq'),
      points: getDefaultFilter('points', filters, 'eq'),
    },
  })

<CardContent sx={{ pt: 0 }}>
            <Box
              component="form"
              sx={{ display: 'flex', flexDirection: 'column' }}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <Box mb={2}>
                <TextField
                  {...register('q')}
                  label={'검색'}
                  placeholder={'주문번호, 주문상태, 주문자, 상품명 등'}
                  margin="normal"
                  fullWidth
                  autoFocus
                  size="small"
                  variant="outlined"
                />
              </Box>
             
              <Box display="flex" justifyContent="space-between" width="200px">
                <Button type="submit" variant="contained">
                  검색하기
                </Button>
                <Button type="button" variant="contained" color="secondary" onClick={() => resetForm()}>
                  초기화
                </Button>
              </Box>
            </Box>
          </CardContent>

export default function PointList() {
  const { tableQueryResult, pageCount, pageSize, current, setCurrent } = useTable({
    resource: "points",
    pagination: {
        current: 1, 
        pageSize: 10,
    },
  });

const { register, handleSubmit, control, reset } = useForm<BaseRecord, HttpError, IPointsFilterVariables>({
  
    defaultValues: {
      q: getDefaultFilter('q', filters, 'eq'),
      points: getDefaultFilter('points', filters, 'eq'),
    },
  })

<CardContent sx={{ pt: 0 }}>
            <Box
              component="form"
              sx={{ display: 'flex', flexDirection: 'column' }}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <Box mb={2}>
                <TextField
                  {...register('q')}
                  label={'검색'}
                  placeholder={'주문번호, 주문상태, 주문자, 상품명 등'}
                  margin="normal"
                  fullWidth
                  autoFocus
                  size="small"
                  variant="outlined"
                />
              </Box>
             
              <Box display="flex" justifyContent="space-between" width="200px">
                <Button type="submit" variant="contained">
                  검색하기
                </Button>
                <Button type="button" variant="contained" color="secondary" onClick={() => resetForm()}>
                  초기화
                </Button>
              </Box>
            </Box>
          </CardContent>

11 Replies

kapa.ai•8mo ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided extracts, it's not clear why the useTable search might not work after a data update. However, it's important to note that the useTable hook in refine provides functionalities for handling table states including search. The useTable hook returns searchFormProps which can be used to create a search form. When the form is submitted, searchFormProps.onFinish is called, which triggers the onSearch function. This function should return an array of search parameters that will be used to filter the table data. Here is an example of how to use searchFormProps and onSearch:

const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

In your code, it seems like you're using useForm from react-hook-form to handle your form state and submission. If you want to use refine's useTable for search, you should consider using searchFormProps from useTable instead of useForm. If you're still having issues, it might be due to how your data is updated or how your search parameters are set up. Without more context, it's hard to provide a more specific answer. For more information, you can refer to the refine documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#searchformprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•8mo ago

@kapa.ai however, Object literal may only specify known properties, and 'onSearch' does not exist in type 'useTableProps<IPointValues, HttpError, IPointValues>'.ts(2353) why this error message?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing typically occurs when you're trying to assign a property to an object that doesn't exist in the object's type definition. In this case, it seems like onSearch is not a property of the useTableProps type. The useTable hook in refine does accept an onSearch property in its configuration object. This property should be a function that returns an array of search parameters. Here's an example from the provided extracts:

const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
});

If you're seeing an error that onSearch does not exist in type useTableProps, it could be due to a few reasons: 1. There might be a mistake in your type definitions. Make sure that useTableProps is correctly typed and includes onSearch as a property. 2. You might be using an outdated version of refine. Make sure you're using the latest version of refine that includes onSearch as a property of useTable. 3. There might be a mistake in how you're using useTable. Make sure you're passing onSearch as a property of the configuration object to useTable, not as a property of useTableProps. For more information, you can refer to the refine documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#searchformprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•8mo ago

@kapa.ai yes I use onSearch is. useDataGrid

const { dataGridProps, search, filters } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
    pagination: {
      mode: 'server', // Client 기준 페이지네이션
    },
    initialPageSize: 10,
    onSearch: (params) => {
      const filters: CrudFilters = []
      const { q, points } = params

      filters.push({
        field: 'q',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push({
        field: 'points',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push(
        {
          field: 'order_date',
          operator: 'gte',
          value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
        },
        {
          field: 'order_date',
          operator: 'lte',
          value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
        },
      )

      return filters
    },
  })

const { dataGridProps, search, filters } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
    pagination: {
      mode: 'server', // Client 기준 페이지네이션
    },
    initialPageSize: 10,
    onSearch: (params) => {
      const filters: CrudFilters = []
      const { q, points } = params

      filters.push({
        field: 'q',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push({
        field: 'points',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push(
        {
          field: 'order_date',
          operator: 'gte',
          value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
        },
        {
          field: 'order_date',
          operator: 'lte',
          value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
        },
      )

      return filters
    },
  })

And when I onSubmit click button

              onSubmit={handleSubmit(search)}

              onSubmit={handleSubmit(search)}

api send and response data. But this data not update useTable.

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the provided information, it seems like you're using useDataGrid for handling search and pagination, and you're expecting the data to be updated in useTable. However, useDataGrid and useTable are separate hooks and they maintain their own states. Changes in useDataGrid won't automatically reflect in useTable. If you want to update the data in useTable after a search operation in useDataGrid, you might need to manually trigger a refetch in useTable. Unfortunately, the provided extracts do not contain information on how to do this. Alternatively, you might want to consider using only useDataGrid or useTable for both fetching the data and handling search and pagination. This way, the state is maintained in a single hook and updates should automatically reflect. For more information, you can refer to the refine documentation on useDataGrid (https://refine.dev/docs/api-reference/hooks/data/useDataGrid) and useTable (https://refine.dev/docs/api-reference/hooks/data/useTable). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•8mo ago

@kapa.ai ok, how to use single hook ?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use a single hook for both fetching data and handling search and pagination, you can use either useTable or useDataGrid. Here's an example of how you can use useDataGrid:

const { dataGridProps, search } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
    pagination: {
      mode: 'server',
    },
    initialPageSize: 10,
    onSearch: (params) => {
      const filters: CrudFilters = []
      const { q, points } = params

      filters.push({
        field: 'q',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push({
        field: 'points',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push(
        {
          field: 'order_date',
          operator: 'gte',
          value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
        },
        {
          field: 'order_date',
          operator: 'lte',
          value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
        },
      )

      return filters
    },
  })

const { dataGridProps, search } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
    pagination: {
      mode: 'server',
    },
    initialPageSize: 10,
    onSearch: (params) => {
      const filters: CrudFilters = []
      const { q, points } = params

      filters.push({
        field: 'q',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push({
        field: 'points',
        operator: 'eq',
        value: q !== '' ? q : undefined,
      })

      filters.push(
        {
          field: 'order_date',
          operator: 'gte',
          value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
        },
        {
          field: 'order_date',
          operator: 'lte',
          value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
        },
      )

      return filters
    },
  })

In your form submission handler, you can call the search function returned by useDataGrid:

onSubmit={handleSubmit(search)}

onSubmit={handleSubmit(search)}

This will trigger the onSearch function in useDataGrid with the form values as parameters, and the returned filters will be used to fetch the data. For more information, you can refer to the refine documentation on useDataGrid (https://refine.dev/docs/api-reference/hooks/data/useDataGrid). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below