Como gerenciar estados de paginação usando o useQuery
HTML-код
- Опубликовано: 7 фев 2025
- Assista todo o evento React na Prática na plataforma da Rocketseat: app.rocketseat...
Vamos ver na prática como implementar paginação em aplicações React utilizando a biblioteca React Query. Aprenda a gerenciar estados de página, navegar entre páginas, e otimizar o desempenho da sua aplicação com exemplos práticos e dicas úteis.
[00:42]( • Como gerenciar estados... ) 📜 O JSON Server suporta paginação, permitindo especificar página e quantidade de itens por página na URL da requisição.
[01:39]( • Como gerenciar estados... ) 📦 O React Query simplifica o gerenciamento de estados de carregamento e dados de API, oferecendo um Query Client Provider para envolver a aplicação.
[03:01]( • Como gerenciar estados... ) 🔄 A função `useQuery` do React Query facilita requisições HTTP, permitindo configurar o endpoint e parâmetros como página e quantidade de itens por página.
[04:29]( • Como gerenciar estados... ) ⏳ O React Query retorna um objeto com `data` (dados da API), `isLoading` (estado de carregamento) e pode ser tipado usando ferramentas como JSON to TypeScript para melhorar a integração com TypeScript.
[08:11]( • Como gerenciar estados... ) 📄 Utilizar React Router permite criar uma aplicação com várias rotas, facilitando a gestão de estado da aplicação através de parâmetros de URL como search parameters.
[12:36]( • Como gerenciar estados... ) 📝 Ao usar `setSearchParams` com `react-query`, você pode controlar a paginação e redirecionar o usuário para páginas específicas.
[13:46]( • Como gerenciar estados... ) 🔄 Implemente funções nos botões de paginação: first page, previous page, next page e last page para navegar entre as páginas de forma eficiente.
[14:41]( • Como gerenciar estados... ) 🖥️ Utilize `useSearchParams` do React para obter e atualizar parâmetros de URL, facilitando a manipulação de estados de página.
[16:05]( • Como gerenciar estados... ) 🔄 Ao usar `queryKey` no React Query, cada página deve ter uma chave de consulta única para evitar o cache incorreto dos dados.
[17:58]( • Como gerenciar estados... ) 🚫 Para evitar piscadas na tela ao trocar de página, utilize `keepPreviousData` no React Query para manter o conteúdo anterior visível até o novo conteúdo ser carregado completamente.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Eu aprendo demais com seus vídeos, Diego. Muito obrigado!
O melhor instrutor/professor e conhecedor de React/JS que a gente tem, se não for no mundo, na américa latina com certeza é ! Parabéns Diego.
bom, temos o @devjunioralves que vai bem mais a fundo ;)
@@jsdev5362não tente. Apague esse comentário! Não compre essa briga! Deus > Diego > All
topzera!!!, utilizo bastante ja no meu dia, inclusive tem auto refresh e outras gamas que da de utilizar, realmente a adoção do useQuery faz uma diferença no controle de estado, antes eu usavamos muito Redux,hooks hoje em dia com a adação do useQuery o redux no projeto quase não é mais utilizado e quando eu preciso controlar algo criamos um hook para controlar estados e contextos.
Diego é meu ídolo, e não é de hoje!
Diegão, seria massa trazer um vídeo mostrando pra galera o hook useInfiniteQuery do React Query
Muito toppp
Utilizo muito, cache for the Win
This blows my mind ❤️❤️
Como vocês fazem o server search? Ou por outras, no input de pesquisa fazer com que os dados sejam retornados do servidor.
Exatamente como foi passado o número da página, e a quantidade de registros por página, você passa outras coisas, como por exemplo, o termo da busca, e filtra no servidor, retornando os itens certos filtrados.
Massa ho, to pensando em usar o react query
por favor USE. facilita muito a vida e deixa o código umas 40x mais limpo pra data fetching de verdade. não me arrependo de adotar
Quando vai ter curso de Rust na Rocketset?
Ótimo vídeo. Em que plataforma você faz as transmissões?
Ele faz as lives na Twitch. Canal dele: dieegosf
Tem esse código completo na plataforma da rocket ?
Uma extensão muito boa tambem para fazer de JSON para TS no vscode: "JSON to TS"
gente, onde tem essas aulas completas?
No site da RocketSeat.
@@Matheus_1582 ah tá, é que sou assinante do one, sabe dizer em qual módulo encontro?
@@Matheus_1582 TEM O LINK ?
app.rocketseat.com.br/classroom/react-01
@@rocketseat muitíssimo obrigado🤩
seria muito interessante vocês colocarem onde ver completo o vídeo, eu sou aluno da plataforma e tem vários vídeos q vcs postam aqui, q estão lá, só que não consigo achar :|
Isso, pelo menos indicar na descrição onde pode achar o conteúdo completo na plataforma. Já assisti um monte de conteúdos aqui no youtube que me despertou interesse, mas que é quase impossível localizar no app onde que isso está.
Esse corte é da twitch do Diego. Não é na plataforma.
app.rocketseat.com.br/classroom/react-01
Fiquei em dúvida se esse cache poderia ser acessado de outras páginas da aplicação, pq aí substituiria redux e context.
Exatamente. Você pode acessar o cache em outras Pages/Components. De uma olhada no queryClient.getQueryData()
Pode sim! Você pode usar aquele QueryClient que é passado para o Provider para poder acessar o cache de qualquer query, basta passar a query key que ele retorna o cache.
Isso substitui muito bem o redux. Pois você pode por exemplo ter uma requisição que busca o usuário e depois ler essas informações na aplicação toda. Só precisa tomar cuidado para invalidar ou atualizar o cache quando fizer algum update dos dados
Onde consigo ver toda essa aula ?
app.rocketseat.com.br/classroom/react-01
nao daria pra usar o swr pra fazer isso tbm?
Uso swr no meu blog mas prefiro react query em muitos pontos. Facilita demais cache e tratamento de erro. Acabei usando no meu curso de react crazystack
@@DevDoido verdade, eu acabei refazendo usando o useQuery, muito mais simples
e como funciona se a pagina que voce já consultou no passado , mudar os dados ele vai entender e vai fazer a requisição novamente ?
Da forma que ele fez, quando volta pra uma página em cache ele mostra de imediato o que tá no cache, só que ao mesmo tempo ele refaz essa requisição, e quando essa requisição dá uma resposta, ela atualiza esse cache, então em caso de alteração dos dados que estavam no cache, ele vai exibir de imediato o valor antigo (que está em cache), e solicita novamente a mesma requisição e quando tiver o resultado, ele atualiza em tela e o cache, então sempre você tem o dado atualizado
Hoje em dia o next.js esta tendo tantos problemas que são difíceis ou impossível de concertar ou inviável que esta sendo muito mais viável voltar para o vite.js! Alguém tem esta perspectiva também?
poderia citar alguns problemas?
@@yuri4dev O principal e que me deixa puto! E o SWC, não e compatível nem com 40% das libs ainda e o compilador não funciona como deveria tendo que fazer gambiarras para funcionar! Estou me referindo as versões atuais! E outra eu sou uma pessoa que hoje tem 90% dos projetos com estrutura Monorepo e e impossível usar o next 13+(com SWC) usando o react-native, react-native-web, expo e por ai vai! Cara eu passei sem brincadeira mais de uma semana tentando fazer o projeto funcionar com next porque eu queria colocar ele para o código de um projeto meu que vai ser grande ficar 100% atualizado des da raiz! Mas cara mesmo usando as versões atuais eu tive que usar o babel para fazer algumas coisas funcionar e desabilitar o SWC e mesmo assim sem sucesso pois chega uma hora que o next não consegue compilar as bibliotecas do react-native/web e coisas do expo deixando inutilizável na estrutura Monorepo com workspace, cara o Vite foi a solução de todos os problemas relacionado a Monorepo, o next so pode ser usado em versões antigas tipo a 12 se não me engano e a base de muitas gambiarras e eu prefiro meio que fazer este row-back do que deixar o código entupidos de gambiarras.
@@yuri4dev Estes que eu citei são os que mais complica, fora outros que nem me vem em mente agora mas te dou certeza que tem! E não eu não sou um programador casual e sei o que estou falando pois ja perdi muitas noites resolvendo problemas que nem deveriam existir usando o next.
Onde e quando rolam essas lives?
também queria saber
twitch.tv/dieegosf
O fetch nativo do next não faz tudo isso? 😅
Alguém da Rocket já usou o Editor Theia.
Só vim aqui dizer que o Vue é muito melhor, pronto, vazei...
Coitado.
Ainda bem que no Vue o Pinia é leve e poderoso e foi classificado como projeto padrão pelo vue. No React poderias usar o Zustand como alternativa, porém como é uma lib fora da arquitetura, vejo que muita gente prefere usar uma solução para cada caso entre useQuery, ContextApi, Redux, etc...
@@pormenonbr
pois é, o Pínia é uma delicinha, eu vejo esses tutorial de react é uma bagunça só, cada um usa uma caralhada de coisa, eu só assisto pra amar mais o vue kkkkk
@@EduardoSecondo 30 libs por arquivo pra fazer uma coisa simples kakakakaka