useForm

call a get api using useForm

16 Replies

kapa.ai•17mo ago

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:

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<https://api.example.com/data">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<https://api.example.com/data">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

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: ----------------------

kapa.ai•17mo ago

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

passive-yellowOP•17mo 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, });

kapa.ai•17mo ago

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:

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,
    };
  },
});

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,
    };
  },
});

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: ----------------------

kapa.ai•17mo ago

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

passive-yellowOP•17mo ago

@kapa.ai useForm with get api

kapa.ai•17mo ago

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:

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<https://api.example.com/data">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<https://api.example.com/data">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

kapa.ai•17mo ago

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

passive-yellowOP•17mo 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, }; }, });

kapa.ai•17mo ago

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:

import { useTable } from "@refinedev/core";

const {
  tableProps,
  loading,
  error,
  data: bankStatementEntryList,
  refetch, // This function can be used to manually refetch data
} = useTable<BankStatementEntryListResponse, ApiErrorResponse>({
  resource: apiPaths.bankStatement.entries,
  onError: (error: ApiErrorResponse | undefined) => {
    return {
      message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
      type: 'error',
      description: error?.detailedMessage,
    };
  },
});

// Call this function to manually refetch data
const fetchData = () => {
  refetch();
};

import { useTable } from "@refinedev/core";

const {
  tableProps,
  loading,
  error,
  data: bankStatementEntryList,
  refetch, // This function can be used to manually refetch data
} = useTable<BankStatementEntryListResponse, ApiErrorResponse>({
  resource: apiPaths.bankStatement.entries,
  onError: (error: ApiErrorResponse | undefined) => {
    return {
      message: t('pages.bankStatement.entriesList.errorNotificationMessage'),
      type: 'error',
      description: error?.detailedMessage,
    };
  },
});

// Call this function to manually refetch data
const fetchData = () => {
  refetch();
};

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: ----------------------

kapa.ai•17mo ago

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

passive-yellowOP•17mo 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, });

kapa.ai•17mo ago

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:

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  
import { useCustom } from "@refinedev/core";

export const MyForm: React.FC = () => {  
 const { handleSubmit } = useForm();  
 const { isLoading, data, refetch } = 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,
  });

 const onSubmit = (values) => {  
   refetch(); // Refetch data when form is submitted
 };  
  
 return (  
   <form onSubmit={handleSubmit(onSubmit)}>  
     {/* Your form fields here */}
   </form>  
 );  
};

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  
import { useCustom } from "@refinedev/core";

export const MyForm: React.FC = () => {  
 const { handleSubmit } = useForm();  
 const { isLoading, data, refetch } = 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,
  });

 const onSubmit = (values) => {  
   refetch(); // Refetch data when form is submitted
 };  
  
 return (  
   <form onSubmit={handleSubmit(onSubmit)}>  
     {/* Your form fields here */}
   </form>  
 );  
};

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: ----------------------

kapa.ai•17mo ago

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

passive-yellowOP•17mo 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

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: @parothia That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

useForm

Did you find this page helpful?