Как закинуть id в запрос react-query?

Question

[deantek]

Здравствуйте, использую библиотеку react-query, но никак не могу понять как закинуть id в запрос

у меня есть массив с id-шками и запрос вида:

const fetchPartners = async (id: number) => {
  const { data } = await axios.get(`/api/v1/shop/partner/${id}`)

  return data
}

и сам компонент :

const PartnersPageMobile = () => {
  const history = useHistory()
  const { data: partnerData } = useShop() // здесь  я достаю id

  const part = useMemo(() => (partnerData && partnerData.partners ? partnerData.partners : []), [
    partnerData,
  ])
   
  const {data: fetchPartners, isLoading} = useQuery(['partner'], fetchPartners)  
 // тут мне нужно как-то передать id, чтобы получить массив с товарами,
 но я не понимаю как это сделать

  const Header = () => {
    return (
      <div className={s.header_container}>
        <div className={s.left}>
          <div onClick={() => history.goBack()} className={s.img_block}>
            <img loading="lazy" src="/images/icons/back-icon.svg" alt="" />
          </div>
        </div>
        <div className={s.center}>ПАРТНЕРЫ</div>
        <div className={s.right} />
      </div>
    )
  }

  return (
    <div>
      {Header()}
      <div className={s.container}>
        {part.map((partner: any) => {
          return <div className={s.partner}>ds</div>
        })}
      </div>
    </div>
  )
}

export default PartnersPageMobile

Подскажите, пожалуйста, желательно с примером

Answer 1

[Alexandroppolus]

В fetchPartners будет передано то самое значение, которое идет первым параметром в useQuery.

потому делаешь так

const fetchPartners = async (params) => {
  const id = params.queryKey[1]
  const { data } = await axios.get(`/api/v1/shop/partner/${id}`)

  return data
}

...

const {data: fetchPartners, isLoading} = useQuery(['partner', id], fetchPartners)

Comments

[deantek]

это я понимаю, но вот у меня 30+ id-шников, таким образом будет 1 запрос, я не понимаю как мне проитерировать все id-шники, чтобы было все 30 запросов, не могу же я 30 раз продублировать

const fetchPartners1 = async (params) => {
const id = params.queryKey[1]
const { data } = await axios.get(`/api/v1/shop/partner/${id}`)

return data
}

const fetchPartners2 = async (params) => {
const id = params.queryKey[1]
const { data } = await axios.get(`/api/v1/shop/partner/${id}`)

return data
}

и т.д

[Alexandroppolus]

https://react-query.tanstack.com/reference/useQueries

[deantek]

Alexandroppolus, это не то

[deantek]

я тупил, вы были правы

Answer 2

[deantek]

решил через навигацию, при клике на карточку партенра в NavLink закидывал id партнера, а в самом компоненте PartnersPageMobile доставал id через
const params = useRouteMatch()
а дальше id уже передавалось в fetchPartners

с массивами id ничего мутить не надо было