React Query skip query when parameter is empty

Question

I am dealing with react query problem, I have separate file with all the queries:

const useFetchApTableQuery = (date: string): UseQueryResult => {
  const axiosClient = axios.create()

  const fetchApTableQuery = async (): Promise<AxiosResponse> => {
    const res = await axiosClient.get(`${API_ROUTES.apTable}?date=${date}`)
    return res.data.data.map((record: any) => APParser(record))
  }

  return useQuery([date], fetchApTableQuery, {

  })
}

and then iam calling my query in component like this

const APTablePage = (): JSX.Element => {
  const [selectedPeriod, setSelectedPeriod] = useState<string>('')
  const { data: tableData } = useFetchApTableQuery(selectedPeriod)

   ....
}

The problem is need useQuery to omit fetching data when selectedPeriod param is empty (selected period is also being fetched from api when component mounts so I don't have any default value to set for selected period). is there any possibility to make useQuery pass for example null to {data:tabledata} variable when selectedPeriod is empty string ?

Thank you :-)

I have tried dealing with this via useEffect but unfortunately I cannot call hooks in useffect

Asplund · Accepted Answer · 2023-01-13 11:37:49Z

8

You can set the enabled property to be true when date is not empty

const useFetchApTableQuery = (date: string): UseQueryResult => {
  const axiosClient = axios.create()

  const fetchApTableQuery = async (): Promise<AxiosResponse> => {
    const res = await axiosClient.get(`${API_ROUTES.apTable}?date=${date}`)
    return res.data.data.map((record: any) => APParser(record))
  }

  return useQuery([date], fetchApTableQuery, {
    enabled: date.length > 0
  })
}

answered Jan 13, 2023 at 11:37

Asplund

2,5261 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahdi-Soultana · Accepted Answer · 2023-01-13 11:53:51Z

2

i'm not sure about my answer but we can disable a query from automatically running, you can use the

{ enabled: false } the optional object argument that you pass to customize all behaviors of react-query read more at the end ,

useQuery([date], fetchApTableQuery, { enabled : false}) // this will always disabled .
useQuery([date], fetchApTableQuery, { enabled :  pram.length > 0}) // with condition enabled or disabled

the enable key is in scope whenever the function Component run you can pass to it any value outside the scope that control your fetching requests

i really encourage you to read the docs it's very simple to master ReacQuery ,have fun ✋😊 !

https://react-query-v3.tanstack.com/guides/disabling-queries

https://react-query-v3.tanstack.com/guides/dependent-queries

edited Jan 13, 2023 at 11:53

answered Jan 13, 2023 at 11:42

Mahdi-Soultana

1641 silver badge9 bronze badges

2 Comments

HelloThere Over a year ago

Thank you :-) ! ive been trying skip option but unsucessfully, but this works

Mahdi-Soultana Over a year ago

alright congratulation 🎉 , Mark ✅ if whatever answer helps you to resolve the problem for other people like us to know and learn more !

Collectives™ on Stack Overflow

React Query skip query when parameter is empty

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related