How to refetch useQuery with different params without using state?

[shubhamak2]

Hi Guys,

I have one issue with fetching the data using the useQuery. Please have a look at the code below:

FetchUser hook:

const useFetchUsers = ({ selectedSchool, selectedYear }) => {
  return useQuery(['Users', selectedSchool, selectedYear], async () => {
    const URL = getSchoolURL({ selectedSchool, selectedYear })
    const response = await fetch(URL)
    const data = await response.json()

    return {
      count: data.count,
      users: data.users
    }
  }, {
    enabled: !!(selectedSchool && selectedYear),
    onSuccess: () => {
      console.log('success')
    },
    onError: () => {
      console.log('errors')
    }
  })
}

Users component:

const Users = () => {

  const { 
    isLoading, 
    data, 
    isError
  } = useFetchUsers({ selectedSchool: '', selectedYear: '' })

  const updateUsersData = ({ selectedSchool, selectedYear }) => {
    // Here, I have to write logic to fetch Users data as per 
    // selected organization and selectedYear
  }

  return (
    <div className='app'>
      <Schools updateUsersData={updateUsersData}/>
      {
        /** 
         * Rendering components
         * <Component-1/>
         * <Component-2/>
         * <Component-3/>
         * <Component-4/>
         * <Component-5/>
         * 
        */
      }
    </div>
  )
}

School component:

const Schools = () => {
  const [school, setSchool] = useState('')

  const handleChange = (e) => {
    const selectedSchool = e.target.value
    setSchool(selectedSchool)
    if (selectedSchool) {
      // we have other logic to select selected Year
      // but here sake for the example, I'm using this value 
      // hardcoded
      updateUsersData({ selectedSchool, selectedYear: '2021' })
    }
  }

  return (
    <select 
      value={school} 
      onChange={handleChange}
      name='school' 
      id='school'>
      <option 
        value={''} 
        key={'Select School'}>
        Select School
      </option>  
      <option value={'school-1'}>school-1</option>  
      <option value={'school-2'}>school-2</option>  
      <option value={'school-3'}>school-3</option>  
      <option value={'school-4'}>school-4</option>  
      <option value={'school-5'}>school-5</option>  
    </select>
  )
}

Some notes:

• School component: Here, we are rendering the school names and when the user selects any school data, we are calling updateUsersData method and from this method, we have to call again the useFetchUsers hook with updated params but it is not working.

• I don't want to take additional states i.e selectedSchool and selectedYear on Users component because of unnecessary component rendering.

Problem: How to again call useFetchUsers hook with updated params from updateUsersData method?

[TkDodo]

please see my stackoverflow comment: https://stackoverflow.com/questions/73473495/react-query-how-to-refetch-usequery-with-different-params-without-using-state