sensitive-blue•8mo ago

Stop the api from calling multiple times

const { data: customerDetails, error } = useCustom< CustomerSearchResponse, ApiErrorResponse >({ method: 'get', url: ${apiUrl}/${apiPaths.customer.searchCustomer(searchDetail)}, errorNotification: (error: ApiErrorResponse | undefined) => { return { message: error?.detailedMessage || '', type: 'error', }; },

queryOptions: { enabled: isApiEnabled }, });

5 Replies

kapa.ai•8mo ago

Hi @amala. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your useCustom hook, you have used the queryOptions: { enabled: isApiEnabled } option. This option is used to enable or disable the API call. If isApiEnabled is false, the API call will not be made. If it's true, the API call will be made. However, if your API is being called multiple times, it might be due to changes in the properties you're passing to useCustom. To ensure that the API is called only once when the component renders, you need to make sure that the properties you're passing to useCustom are not changing after the initial render. This includes the url, method, and config properties. Here's an example of how to use the useCustom hook:

const { data, isLoading } = useCustom<PostUniqueCheckResponse>({
  url: `${apiUrl}/posts-unique-check`,
  method: "get",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      title: "Foo bar",
    },
  },
});

const { data, isLoading } = useCustom<PostUniqueCheckResponse>({
  url: `${apiUrl}/posts-unique-check`,
  method: "get",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      title: "Foo bar",
    },
  },
});

In this example, the useCustom hook will only trigger a new request if apiUrl, method, or config changes. If these values remain constant across renders, the API will only be called once. If you're passing dynamic values to useCustom and you want to prevent unnecessary API calls, you might need to implement some form of state management or memoization to ensure that these values don't change unnecessarily. [^source^] [^source^]: (https://discord.com/channels/837692625737613362/1135927012528230440) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

sensitive-blue•8mo ago

@kapa.ai overtime options to not call the api.

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to prevent the API from being called in certain situations, you can use the enabled option in the queryOptions of your hook. This option allows you to control when the API call should be made. If enabled is false, the API call will not be made. If it's true, the API call will be made. Here's an example of how to use the enabled option in the useForm hook:

useForm({  
 queryOptions: {  
   enabled: false,  
 },  
});

useForm({  
 queryOptions: {  
   enabled: false,  
 },  
});

In this example, the useOne hook, which is used by refine to fetch data in edit or clone mode, will not make the API call because enabled is set to false. Please note that this works only in the action: "edit" and the action: "clone" mode. [^source^] [^source^]: (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#queryoptions) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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