React Query: Talvez você não precise de estados globais no React (HTTP State)

00:00:00 🧩 Introdução ao HTTP State
Explicação sobre atualização de estado HTTP sem novas requisições,
Criação inicial de arquivo e simulação de dados com uso do ChatGPT.

00:02:13 🔄 Simulação de API com Delay
Simulação de chamada HTTP com função assíncrona e delay,
Configuração inicial do ambiente do React Query.

00:05:02 ⚙ Utilização do React Query
Uso do hook useQuery para busca de dados e atualização da interface,
Implementação de delay e renderização condicional de dados carregados.

00:06:31 ➕ Adição de Novo Produto
Criação de função assíncrona para simulação de criação de produto,
Uso do useMutation para gerenciar operações de escrita e mutações de estado.

00:09:32 🔄 Atualização de Estado no HTTP com Cache
Manipulação do cache após uma mutação bem-sucedida com onSuccess,
Uso do useQueryClient para acessar e atualizar dados em cache.

00:12:15 🚀 Finalização e Exemplo Completo
Demonstrado o resultado final com a adição dinâmica do produto à lista,
Importância de não refazer requisições ao atualizar o cache localmente.

Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[felipecouto]

Só um comentário adicional caso alguém tenha ficado na dúvida... Ele não faz requisição pra atualizar a listagem toda, isso é via cache, mas é feita a requisição pra enviar o post do novo produto pra API

[wollyverkk]

Bacana, eu geralmente usava a função refetch que vem de dentro do useQuery, e então refazia a requisição. Vou começar tentar essa nova abordagem

[josephkaltenecker]

Muito interessante esse update do cache. Trabalhei numa fintech e usávamos React Query.

No caso de uma mutation, eu fazia um invalidateQuery no cache key (que eram armazenadas num outro arquivo) e rolava um refetch, atualizando em todos os lugares que usavam essa cache key.

Acho que por ser um app de investimentos, fazer um invalidate é mais interessante dado que outros usuários influenciam nos dados em tela

React Query é incrível pois nos possibilitou abandonar de vez o Redux (pessimamente configurado)

Parabéns Diego pelo ótimo conteúdo

[mcel]

esse vídeo me convenceu a começar a usar react query pra todos os meus apps.
melhor. decisão. da minha vida.

[isareginabs]

Conteúdo incrível !! 💜 Parabéns Diego, tava procurando sobre o assunto e esse video foi bem didático

[mateusjsouza]

Tava procurando conteúdo sobre isso e aparece isso no meu yt. Bom demais, mano. Vou começar a usar react-query nos meus projetos pra solidificar o conhecimento.

[Gabriel-zmtq]

Lib show! So cuidar pra nao arrebentar com a memoria do client

[diasneto]

É útil em alguns casos, mas o problema que sempre tenho com essa abordagem, é no caso de a lista ser paginada, ordenada e filtrada, esse novo item incluso precisa ser paginado, ordenado e filtrado de acordo com os dados que estão no banco para mostrar (ou não) em tela. E ai eu sempre sou obrigado a retornar da API.

[icarobteles]

Normalmente, quando eu ainda utilizava um state normal do React para lidar com requisições à API, normalmente também não fazia uma nova requisição GET para atualizar todos os dados. Se fosse um create, por exemplo, faria a requisição create e com o retorno desta sendo o novo dado criado, eu acrescentaria isso ao state, o que já seria refletido em tela, sem necessidade do refetch.

[StephaniLacerda]

Agora com revalidate do nextjs, nem precisa mais pois uma round trip já atualiza o componente atrás do modal, usando as server actions

[gsr]

Qual extensão é essa, que mostra o console-log ?

[lucass.p]

O Next.js com o app router trouxe essa funcionalidade com o uso de revalidate, server actions, server components e etc... mas eu pessoalmente prefiro muito mais essa solução utilizando o React Query no pages router. A sintaxe é infinitamente melhor, mais simples, intuitiva e ta bem mais estavel tambem. O site roda liso demais e sem sofrimento nenhum pra fazer.

[fabioribeirodecarvalho]

Mas digamos que mais de um usuário atualizou a lista. A lista iria ficar desatualizada justamente porque não foi feita a requisição. Sei que nesse caso iria abrir espaço para uma discussão de websocket e etc. Porém se a lista tiver muitas atualizações a conexão não for "socket" não vale a pena carregar de novo a lista, visto que os dados seriam mais confiáveis...meio q um trade-off

[dev.caixeiroviajante]

Maneiro ! Optimistic Updates, certo ? Mas após adicionar utilizando o "variables"e preenchendo com dados "temporários" em que momento eu posso atualizar esses dados para os dados reais da api ?

[mauricioporfirio]

Eu só fiquei confuso em relação as variáveis (isPending, isFetching, isLoading) qual a diferença entre elas? É uma diferença notória ou não?

[santanap]

Isso é exatamente o que eu estou precisando fazer na minha aplicação, porém não estou usando tanstack. Como estou usando NextJS 14 com server components, meus componentes são assíncronos e eu faço a requisição com Axios. No caso de alterar em tempo real o meu componente de carrinho ao adicionar um item, a requisição é feita com sucesso, mas o novo item só era mostrado como adicionado ao carrinho ao recarregar a página. Pra solucionar isso, somente no meu componente de carrinho não estou usando o Axios, estou usando o fetch nativo com um objeto de configuração { next: { tags: ['...'] } } pra fazer o revalidateTag('...'). Problema é que em produção minha aplicação quebra sempre ao abrir o carrinho (mesmo sem adicionar nenhum item), sendo que em development funciona perfeitamente. O que pode ser, alguém pra me ajudar?

[sdhugoleo]

começando a estudar react me indicaram CRA, mas qual framework recomenda?

[joaogustavoferreira]

Fala Diego blz? Pode explicar a fundo por que você nomeeia de HTTP state, esta biblioteca me parece seguir a arquitetura FLUX adicionando um JS global state e manipulando isto a cada requisição.

[carlosamorim]

Diegão, num cenário Next, utilizar o SWR em vez do React Query seria uma alternativa "melhor"? Pois é desenvolvido pela própria Vercel...

[leonardoreis]

Este metodo com filtros implementados nao funciona bem, se tiver usando por algum acaso um searchParams, e o query estive por volta de duas paginas que tem filtros utilizando o searchParams, os dados de ambas irao ser atualizados o que pode causar em algum momento um problema se estiver usando os dados para algo, como me ocorreu essa semana