React Query Tutorial em TypeScript - Queries, Mutations e Query Invalidation

React Query é uma biblioteca utilizada para fazer fetch, cache e update de dados em aplicações React e React Native, sem a necessidade de um estado global (Redux ou Context API).

Nesse vídeo você aprenderá na prática os principais conceitos do React Query:

- Queries: busca de dados através do hook useQuery.
- Mutations: atualização de dados através do hook useMutation.

Projeto feito todo em TypeScript e utilizando uma API real com dados mockados.

Siga a gente em nossas redes sociais:

Music from Uppbeat (free for Creators!):
License code: LHWJFHQ0OP4AANOG

00:00 - O que é o React Query?
01:56 - Apresentação do Projeto
04:00 - Axios x React Query
04:53 - Busca de dados SEM o React Query
10:28 - Configurando React Query no projeto
12:21 - useQuery (Busca de dados COM o React Query)
16:35 - Devtools (debug no React Query)
17:58 - Preparando a UI para as Mutations
20:21 - Modificação de dados SEM o React Query
22:58 - useMutation (Modificação de dados COM o React Query)
26:00 - Query Invalidation (useQueryClient)
30:39 - Conclusão

#reactquery #typescript #reactjs #reactnative #javascript #usemutation #usequery #usequeryclient #javascript

[LosangeloPacifico]

Apresentação excelente, estarei lhe seguindo e vou dar um like para o seu vídeo, traga sempre bons conteúdos, ok! E boa jornada!

[brunno_gonzalez_dev]

🔥🔥🔥🔥 Saiuuuu bora estudar! valeu mestre pela aula!!!

[vitorac]

Melhor video em portugues de ReactQuery. Muito obrigado pelo conteúdo.

[tiagovieira]

Realmente o React Query é um game changer pra quem trabalha com react e RN. Ótimo conteúdo!

[WilsonStosGoncalves]

Sensacional! Ajudou muito. Fantástico.

[nataliaaraujo]

Parabéns pela didática mano, comecei no React query agora e já deu uma boa luz com teu vídeo. ;)

[Acacio]

Mandou muito bem na explicação, meu mano

[SidneiMV]

cara esse canal Coffstack é profissa! congrats man

[alexm]

Ganhou +1 inscrito.... Vlw pelas dicas.

[shakilhossain]

i don't know your language, but this video is awasome for understanding react query.

[paulocbbf]

Usamos essa lib em produção em alguns apps corporativos, mas não entendia com profundidade o porquê de algumas coisas. O vídeo deixou tudo bem mais claro! 🙏

[gabrielsantos]

muito bom, poderia fazer um vídeo falando sobre queries key

[andresdosantos]

Outra coisa, a partir da versão 4 o React Query no "useQuery" precisa ter a queryKey dentro de um array, assim, "useQuery( [ "users-list" ], ... )"

[versaleyoutubevanced]

faz um vídeo de manipulação do cache, pra mudar os dados sem necessariamente fazer outra chamada

[jamesw]

Essa biblioteca já está madura o suficiente para usar em grandes projetos?

obrigado por compartilhar esse conteúdo, você é fera

[Rian-penl]

No meu senário não compensaria o mutation, pós ele faz uma nova chamada a API e não estou falando em casos que teria que fazer várias chamadas e trazer uma grande quantidade de dados, isso custaria muito fazer tudo de novo... No meu caso eu dispenso o mutation pra filtrar ou editar o próprio estado da aplicação caso a chamada der certo.

Acho que o fetch do NextJs e um contexto, seria uma solução melhor para quem quer economizar no servidor.. bom isso é uma análise pessoa😅

[SidneiMV]

ficou muito bonito o frontend hein! nota mil! me diz uma coisa.. pra implementar uma exclusão e um botão "Criar" pra essa API, seria muito trabalhoso, muito complicado, diferente do "editar"?

[alveselivelton]

Vídeo muito bom, só gostaria de saber como usar o useQuery após o usuário preencher um campo de um form e não quando a página carregar. Exemplo, eu uso uma api do GitHub pra buscar os dados de um usuário, mas eu só posso fazer a busca, depois que o usuário digitar o seu nome lá no form.

[marcosschmidt]

mano aula show, existe algum modo de passar mais de um parâmetro em uma useQuery como id, um token de validação, algo do tipo?

[paulocbbf]

Lucas, uma pergunta. Eu vi que tu separou no arquivo api.ts por funções que tratam os dados provenientes do axios.
Se eu quisesse, por exemplo, fazer vários tratamentos nesses dados, eu separaria em outros arquivos?
Se houvesse duas etapas de tratamento: uma dos dados, e outra para encaixar na UI, eu teria dois arquivos, um para tratar os dados e outro para adequar a UI? Onde você colocaria esses arquivos, na mesma pasta da api/* ou em algum arquivo dentro da pasta do componente/tela?

Estou refatorando muita coisa e senti a necessidade desses dois tipos de tratamentos: o formato dos dados e a exibição em tela.

Vlws!