16 Replies
Hi @parothia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useForm
hook in Refine is primarily used for handling form data and submissions. It doesn't directly fetch data from an API. However, it can be used in conjunction with other hooks like useEffect
and fetch
API to retrieve data.
Here's an example of how you can use useForm
in a component that fetches data from an API using the fetch
API:
In this example, useForm
is used to handle form data, while useEffect
and fetch
are used to retrieve data from an API. The fetched data is stored in the data
state variable using the setData
function. The useEffect
hook with an empty dependency array []
ensures the data fetching only occurs once when the component mounts.
Please note that the useForm
hook is part of the Refine library, which is a framework for building data-intensive applications in React. It provides a lot of out-of-the-box functionality for rapid development, including form handling with useForm
.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
noble-gold•12mo ago
@kapa.ai
convert this to get api
const {
formProps,
onFinish,
formLoading,
mutationResult: bankStatementEntryList,
} = useForm<
BankStatementEntryListResponse,
ApiErrorResponse,
BankStatementEntrySearchRequest
>({
resource: apiPaths.bankStatement.entries,
errorNotification: (error: ApiErrorResponse | undefined) => {
return {
message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
type: 'error',
description: error?.detailedMessage,
};
},
successNotification: false,
});
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useForm
hook you're using is designed for handling form submissions, not for fetching data from an API. If you want to fetch data from an API, you should use a different hook or method.
In Refine, you can use the useTable
hook to fetch data from an API. Here's an example based on your code:
In this example, useTable
is used to fetch data from the apiPaths.bankStatement.entries
endpoint. The onError
function is used to handle any errors that occur during the fetch.
Please note that the actual implementation may vary depending on the specifics of your application and API.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useTable/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
noble-gold•12mo ago
@kapa.ai
useForm with get api
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useForm
hook in Refine is primarily used for handling form data and submissions. It doesn't directly fetch data from an API. However, it can be used in conjunction with other hooks like useEffect
and fetch
API to retrieve data.
Here's an example of how you can use useForm
in a component that fetches data from an API using the fetch
API:
In this example, useForm
is used to handle form data, while useEffect
and fetch
are used to retrieve data from an API. The fetched data is stored in the data
state variable using the setData
function. The useEffect
hook with an empty dependency array []
ensures the data fetching only occurs once when the component mounts.
Please note that the useForm
hook is part of the Refine library, which is a framework for building data-intensive applications in React. It provides a lot of out-of-the-box functionality for rapid development, including form handling with useForm
.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
noble-gold•12mo ago
@kapa.ai
add method for calling get api
import { useTable } from "@refinedev/core";
const {
tableProps,
loading,
error,
data: bankStatementEntryList,
} = useTable<BankStatementEntryListResponse, ApiErrorResponse>({
resource: apiPaths.bankStatement.entries,
onError: (error: ApiErrorResponse | undefined) => {
return {
message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
type: 'error',
description: error?.detailedMessage,
};
},
});
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useTable
hook you're using is already designed to fetch data from an API. It uses the resource
prop to determine the API endpoint to fetch data from. In your case, it's fetching data from apiPaths.bankStatement.entries
.
If you want to add a method to manually trigger the API call, you can use the refetch
function returned by useTable
. Here's how you can do it:
In this example, fetchData
is a function that calls refetch
to manually fetch data from the API. You can call fetchData
whenever you want to trigger the API call.
Please note that the actual implementation may vary depending on the specifics of your application and API.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useTable/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
noble-gold•12mo ago
@kapa.ai
call this on submit
const { isLoading, data, } = useCustom<
BankStatementEntryListResponse,
ApiErrorResponse,
BankStatementEntrySearchRequest
>({
url:
${apiUrl}/${apiPaths.bankStatement.entries}
,
method: 'get',
queryOptions: {
enabled: false,
},
config: {
query: {
page_size: searchRequest.page_size,
page_number: searchRequest.page_number,
search_text: searchRequest.search_text,
status: searchRequest.status,
from_date: searchRequest.from_date,
to_date: searchRequest.to_date,
bank_uuid: searchRequest.bank_uuid,
entry_type: searchRequest.entry_type,
},
},
errorNotification: (error: ApiErrorResponse | undefined) => {
return {
message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
type: 'error',
description: error?.detailedMessage,
};
},
successNotification: false,
});Let me check the knowledge base for you. One moment! :books:
----------------------
To call the
useCustom
hook on form submit, you can use the useForm
hook from @refinedev/react-hook-form
. Here's an example:
In this example, useForm
is used to handle form submissions. When the form is submitted, the onSubmit
function is called, which in turn calls refetch
to fetch data from the API.
Please note that the actual implementation may vary depending on the specifics of your application and API.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
noble-gold•12mo ago
@kapa.ai
const {
isLoading,
data,
refetch,
} = useCustom<
BankStatementEntryListResponse,
ApiErrorResponse,
BankStatementEntrySearchRequest
>({
url:
${apiUrl}/${apiPaths.bankStatement.entries}
,
method: 'get',
queryOptions: {
enabled: false,
},
config: {
query: {
pageSize: searchRequest.pageSize,
pageNumber: searchRequest.pageNumber,
searchText: searchRequest.searchText,
status: searchRequest.status,
fromDate: searchRequest.fromDate,
toDate: searchRequest.toDate,
bankUuid: searchRequest.bankUuid,
entryType: searchRequest.entryType,
},
},
errorNotification: (error: ApiErrorResponse | undefined) => {
return {
message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
type: 'error',
description: error?.detailedMessage,
};
},
successNotification: false,
});
how to call this manually