Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

130
Vistas
I am using react-query and I have 5 tabs I want to hit different url while navigating different tabs?

I used Tabs and each tab have different url to be hit so I created a different component and passed the value as props and in react-query I used it as query keys but it is no working please help me to debug this code as I am very new to react-query and http request is new to me as well.

<div className='card-body py-3'>
                <ul className='nav nav-tabs nav-line-tabs mb-5 fs-6'>
                  <li className='nav-item'>
                    <a className='nav-link active' data-bs-toggle='tab' href='#kt_tab_pane_1'>
                      Pending
                    </a>
                  </li>
                  <li className='nav-item'>
                    <a className='nav-link' data-bs-toggle='tab' href='#kt_tab_pane_2'>
                      Verified
                    </a>
                  <li className='nav-item'>
                    <a className='nav-link' data-bs-toggle='tab' href='#kt_tab_pane_3'>
                      Update_rejected
                    </a>
                  </li>
                </ul>
                <div className='tab-content' id='myTabContent'>
                  <div className='tab-pane fade active show' id='kt_tab_pane_1' role='tabpanel'>
                    <TravelItem name='pending' />
                  </div>
                  <div className='tab-pane fade' id='kt_tab_pane_6' role='tabpanel'>
                    <TravelItem name='Update_rejected' />
                  </div>
                </div>
              </div>

in Travel item Component I used the query key which passes my name in query Params to the function on api request 

      const {data, isLoading, isError, isSuccess, isFetching} = useQuery(
        ['Pending', name],
        travelVerified,
        {
          refetchOnMount: true,
        }
      )
This is my api request where I used dynamic key every time I fetch the data with different name 
    export const travelVerified = async ({queryKey}: any) => {
      const [_key, name] = queryKey
      const {data} = await axios.get(`${process.env.REACT_APP_API_URL}/${name}`)
      return data
    }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Your react-query code looks fine, I think the problem you are having is that your tabs are only "visually hidden", which means they are always mounted in the DOM. Since react-query relies on mounting components to perform background refetches, you won't get refetches when you change tabs.

To make this work, your tabs need to only mount the current tab via conditional rendering, and when you switch between tabs, the new tab has to be mounted.

A good example is the lazy tabs from Chakra UI: https://chakra-ui.com/docs/disclosure/tabs#lazily-mounting-tab-panels

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda