flat-fuchsia•11mo ago

how to pass params to useCustom when queryoptions.enabled is false

const {refetch, isFetching} = useCustom({
        url: `/api/products/push/${id}`,
        method: 'get',
        queryOptions: {
            enabled: false
        }
    })

<Button variant={'text'} onClick={()=>refetch(id)}>推送</Button>

const {refetch, isFetching} = useCustom({
        url: `/api/products/push/${id}`,
        method: 'get',
        queryOptions: {
            enabled: false
        }
    })

<Button variant={'text'} onClick={()=>refetch(id)}>推送</Button>

hi,when i click the button i want pass dynamic id to useCustom,how to make it? thanks

3 Replies

kapa.ai•11mo ago

Hi @langziyang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass dynamic parameters to useCustom when queryOptions.enabled is set to false, you can use the config property of useCustom along with the refetch function. Here's how you can modify your code to achieve this:

const { refetch, isFetching } = useCustom({
  url: `/api/products/push`,
  method: 'get',
  config: {
    query: {
      id: null // Initialize with null or any default value
    }
  },
  queryOptions: {
    enabled: false
  }
});

<Button 
  variant={'text'} 
  onClick={() => refetch({ config: { query: { id } } })}
>
  推送
</Button>

const { refetch, isFetching } = useCustom({
  url: `/api/products/push`,
  method: 'get',
  config: {
    query: {
      id: null // Initialize with null or any default value
    }
  },
  queryOptions: {
    enabled: false
  }
});

<Button 
  variant={'text'} 
  onClick={() => refetch({ config: { query: { id } } })}
>
  推送
</Button>

In this approach: 1. We move the id parameter from the URL to the config.query object in useCustom. 2. When calling refetch, we pass the dynamic id value in the config.query object. This way, you can dynamically update the id parameter when refetching the data. For more information on using useCustom and its properties, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/#properties). Remember that when queryOptions.enabled is set to false, the query will not automatically run on component mount. It will only run when you manually trigger it using the refetch function. useCustom API Reference (https://refine.dev/docs/data/hooks/use-custom/#api-reference) provides more details on the available properties and usage of the useCustom hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@546172394226581514> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rival-black•11mo ago

Hello @langziyang, Refine uses TanStack Query under the hood and it's not possible to refecth with new params. this blog covers your use case. https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch You need to change id state and useCustom will be triggered on new render with new id

React Query FAQs

Answering the most frequently asked React Query questions

how to pass params to useCustom when queryoptions.enabled is false

Did you find this page helpful?