Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

127
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda