Consumindo APIs no React com SWR | Code/Drops #38

[@Brunobach15]

O bom do Diego que não precisa assistir o vídeo em 2x, já é nativo dele.

[@CarlosHenrique-gc3wl]

kkkkk o pior é que é vdd

[@victornogueira6291]

entao eu assisto o diego em 4x

[@CarlosHenrique-gc3wl]

é humanamente impossível

[@gabrielcarmo2971]

é um plugin que veio default nele

[@mattfelix4990]

kkkk verdade!

[@altamirsantos6030]

Cara, o Diego passa uma energia, q na hora q o vídeo roda, já da vontade de abrir o vscode

[@guipo2581]

Total

[@vitorrocha9225]

Diegão, equipe Rocketseat, um codedrops sobre Imagens no react native seria legal, no sentindo de explicar responsividade com tamanhos de imagens em telas de diferentes tamanhos, uma boa pratica pra fazer isso sempre manter a posição dela no layout independente do tamanho da tela, manter uma dimensão certa, pra usar logo, montar cards com imagens e tal. Quem curtiu a ideia deixa like e up pra galera da Rocketseat vê.

[@rocketseat]

Valeeu pela sugestão, Vitor! 💜

[@andrecoelho2775]

Eu gosto muito desse formato de conteúdo da Rocketseat, pois eles sempre vão direto ao ponto, sem enrolação.

[@tapiocaferoz02]

Queria entender como a Rocket consegue trazer tanto conteúdo de qualidade tão rápido. Parabéns de mais, sou aluno GoStack com orgulho!

[@alexsandroveiga]

sou aluno também, fico até perdido de tanto conteúdo maravilhoso 🚀

[@emkisn]

nossa eu fico chocado com a qualidade do conteúdo de vocês, cada vez se superando maiss

[@rocketseat]

É só o começo, Nicolas! 💜💜💜

[@ocharlespereira]

O Futuro, do caralho esta video aula Diego Deshamps. Meus parabéns pelo excelente conteúdo.

[@rocketseat]

Fala Charles!!! Valeeu pelo feedback! 💜

[@Luccas_Alves]

Isso já faz dois anos e achei maravilhoso. Massa de maaaiiisss!!!!

[@euvictorguedes]

segui os vídeo sorrindo, essa biblioteca é incrível!

[@felipebatista7469]

''swr é uma ferramenta agnóstica de back-end' AUhauhUahu Maravilhoso diegão!!

[@MsDiogocouto]

Cinco graduandos em educação física deram deslike kkk ...Parabéns pelo excelente conteúdo , estou no caminho para conseguir obter 1/3 de todo esse conhecimento 🙏👏

[@rafael_1603]

Esses vídeos sempre ajudam, pois nem sempre a documentação esta bem clara.

[@rocketseat]

Faaaala, Rafael! Valeeu! 💜 Realmente, né!? Algumas documentações são um pouco confusas mesmo! 😥

[@BRENOG4MES]

Muito dahora o conteúdo, salvou algumas horas do meu dia para entender como funcionava a lib. Outro dev usou no projeto e eu precisava resolver um bug que incluía o uso da lib.

[@vilmarMartins]

Sensacional! Obrigado, Diego!

[@braddoidao8818]

Uma baita biblioteca, e uma baita explicação. Excelente vídeo, parabéns 👏💻

[@franciscojunior6425]

Show, caramba muito massa esse vídeo, eu adicionaria algumas opções no SWR, mas a idéia é muito top, quase perfeita, mas teu vídeo foi perfeito. Parabéns vc, é o cara.

[@lucassantos-sc5003]

Excelente vídeo em Diegão

[@ocharlespereira]

Antes de conhecer o diego eu achava q era estranho por assistir e falar tudo em 2x, mas depois que conheci o diego eu não me senti mais unico kkkkkkkkkkk

[@Delciney.]

Biblioteca muito boa não vejo a hora de começar a usar nos meus projetos

[@julianosbento]

Animal de mais a lib, e parabéns pela didática e modo de apresentação

[@LuizPauloCamargo]

Muito TOP essa biblioteca já vou implementar no meu projeto ! Vlw Diego

[@rocketseat]

É sensacional, né, Luiz? Depois conta pra gente o que achou! 💜 🚀

[@LuizPauloCamargo]

@@rocketseat te dou o feedback. E qual sua percepção a respeito do redux no meio de tanta coisa nova assim? Você considera o redux dispensável?

[@douglastesch8876]

Eu já havia lido sobre mas nunca testem na prática, isso é simplesmente lindo, sempre que puderem trazer as novas funcionalidades/ferramentas que estão utilizando nos projetos internos da rocketseat como no Skylab etc, PF gravem um vídeo.

[@rocketseat]

Valeeu pela sugestão, Douglas! 💜

[@robsonsilveira9469]

Excelente explicação, Diego Fernandes! 👏👏👏👏👏

[@rocketseat]

Valeeeu, Robson! Didática do Diego é sensacional, né!? 💜 😍

[@danvilela]

Na empresa que trabalho migramos do SWR para o react query. Tenho gostado muito! O melhor mesmo é parar de usar redux kkkkkk

[@felipemillhouse]

Rapaz... biblioteca top das galáxias

[@rocketseat]

Top né? 💜

[@felipemillhouse]

Rocketseat muito massa, BTW, vocês viram o novo sistema de autenticação do AdonisJS 5? Eles não usam mais o JWT, eh outro sistema que nos dá o poder de dar um revoke geral nos tokens ❤️ e também excluir um token específico, invalidando o excesso pra aquele token

[@felipezanetti1163]

Cara todo dia uma coisa nova fazendo boomm na minha cabeça, obrigado Rocketseat !!! 💥🚀💜

[@victorreinor]

Não tenho nada a acrescentar só queria deixar registrado que eu fraguei a risada maliciosa em 16:29. Ótimo vídeo!

[@Pedro-no7hd]

Diego é cabuloso demais, manja muito

[@mattfelix4990]

Muito bom, eu acho que a minha vida toda estive atrás de uma Lib assim, Rocketseat como sempre com um ótimo conteúdo, foda!!!

[@cesarsturmer8625]

como sempre SENSACIONAL

[@rocketseat]

Faaaaaala, Cesar! Muitíssimo obrigada, viu? 💜 🚀

[@marcelolupatini5553]

Eu achei essa biblioteca fantástica! Queria trabalhar usando isso pois resolve muitos problemas.

[@rocketseat]

Maaassa, Marcelo! 💜💜

[@tarciziobarbosa9532]

Já deixo fazer um code/drop sobre NextJs. Bela camisa Diego. sz

[@ofamigeradoudd]

Que conteúdo legal, Man! Parabéns! Essa ferramenta é d+

[@TheMatthewizee]

VC É UM DEUS CRIATURA!

[@vinicoder]

Tem um bug na sua camiseta hahaha. Muito bom o conteúdo! Obrigado mais uma vez!

[@DeyvsonAguiar]

nossa outro nível, e sem useState ou useEffect heheh da pra fazer isso também com next né... eu atualizei um código meu com NextJS através dessa explicação do Diegão! #Fodastico

[@SuperTgames]

Caraca a intro ficou massa eim, seloko. Otimo video como sempre, Diego Vampirão Drácula direto e claro. parabens rocketseat!

[@elvesw]

que Intro Code/Drops é essa, foda demais, parabéns para quem fez!

[@diegogaspar2850]

Sempre aprendendo com vcs!!! Vlw Rocketseat, conteúdo de primeira!

[@lgdias94]

Eu estava utilizando React Query pra um projeto pessoal, e comparado com o SWR é um pouco mais verboso, porque você precisa especificar as chaves de cache manualmente em alguns casos e os hooks são separados pra cada caso de uso (ex: paginação, infinite scroll, etc). Nunca tinha utilizado o SWR, mas vou considerar na próxima aplicação que criar! Conteúdo top!

[@rocketseat]

Vaaleu pelo feedback e por compartilhar sua opinião com a gente, Luis Gustavo! 💜

[@matheussunderhus]

Novamente, só conteúdo AAA. vlw rocket.

[@rocketseat]

Vaaaaleu, Matheus! 💜

[@tadeubdev]

Cara! Que fantástico! Parabéns pelo vídeo!

[@rocketseat]

Valeeu, Tadeu! 💜 (até rimou!)

[@tadeubdev]

@@rocketseat kkkk

[@gabuzin]

Boa cara! Eu estava utilizando tanto o react-query quanto o SWR em um projeto, para fins de testes, fazendo um benchmark para validar qual era melhor. Ambos são excelentes. Mas em termos de performance, o SWR me pareceu bem superior, enquanto o react-query parece ser uma lib mais madura, com alguns recursos a mais que o SWR - como os mutators, que parecem funcionar muito melhor. Mas acho que o SWR está recebendo um highlight agora, então ele tende a amadurecer exponencialmente a partir de agora! :)

[@rocketseat]

Faala, Gabriel! 💜💜 Valeeeu por compartilhar sua opinião com a gente! 💜💜

[@gabuzin]

​@@rocketseat 💜

[@fpol890]

I learned to understand Portuguese just to know what Diego is saying. 🙏

[@rocketseat]

That's so awesome, Fabricio!

[@patomarques2876]

muito massa, saca muito!

[@rocketseat]

Valeeeu, Pato! Diego é fera mesmo! 💜 😍

[@tiagocunhafernandes6607]

Muito bom o video Diego, eu já uso a alguns meses o SWR e gosto muito!.. Inclusive conheci ela no video que os meninos da rocket (Hugo Duarte) fizeram [GoStack] Shuttle: O novo back-office da Rocketseat com ReactJS. Ele apresentou a SWR e foi bem massa conhecer essa lib. Acho que tanto no blog da rocketseat, quanto dentro do skylab deveria ter uma session com a lista de libs (tipo aqueles awesome repositories), com a lista de libs / ferramentas que a rocket usa / recomenda. Quando conheci o Sentry.io mesmo foi um excelente achado (e se não me engano você comentou sobre em um video que criou aquele electron que era so um system tray de abrir projetos favoritos no vscode)..

[@rocketseat]

Faala, Tiago! 💜💜 Vaaaleu por compartilhar sua experiência com a gente! 💜

[@andreluiz85]

Biblioteca muito top. Pensando em colocar em produção pra simplificar o código

[@andre_zagatti]

SWR é sensacional, que vídeo bom! 🚀

[@rocketseat]

💜💜💜 Vaaaleu, Zagatti! 💜

[@iorrancastro]

MEU DEUS Minha empresa usa uns eventos unidirecionais do backend para o front com o protocolo SSE, uma gabiarra sem fim... isso resolve tudo

[@felipeo.ribeiro4891]

na minha empresa não desenvolvemos soluções, desenvolvemos GAMBIARRA kkkkkkkkkkkkkkk. triste

[@kaique19-n4h]

Nosso ramo de gambiarras LTDA.

[@pperdona]

Muito massa. Boa Diego!

[@rbltv]

Esse cara é muuuuuuitooo fodaa.... a ansiedade dele me mata de rir uHAUAHAU

[@skiffer5]

Camiseta bonita Diegão!

[@rocketseat]

💜💜💜

[@marcosrene4301]

S E N S A C I O N A L !!! ótimo conteúdo, que library eein...

[@rocketseat]

Valeeeu pelo feedback, Marcos! 💜

[@adrianomachado1871]

Que isso! Bizarramente simples e absurdamente foda.

[@pedrooliveira001]

Top demais, parabens pelo conteudo

[@lucasviga12]

Muito bom o conteúdo!

[@principe.borodin]

Muito top, merece uma parte 2

[@andrehenriqueus]

Que conteúdo toooop

[@wizzy7449]

Camisa top hein, Diego

[@edy.rodrigues]

Eu consegui fazer estás mesma estratégias apenas utilizando o Redux, armazenando todos os dados da requisição na store, assim quando o usuário entra no component pela segunda vez, este dado já estaria na minha store, então eu apenas as exibiria-las e também fazendo a requisição para deixar a store atualizada, trazendo o mesmo resultado desta library e como os dados consumidos são todos através do Redux, todos os components que estão renderizando em tela recebe a atualização dos dados.

[@heitorpacheco6913]

Mas como tu faria naquele exemplo que ele deu de guardar a posição da página onde o usuário está quando volta na tela ? Eu tenho esse problema hoje.

[@joaocardoso7643]

Eu usava o axios-hooks para coisas semelhantes. Mas essa lib aí é mais Top!

[@plimo13]

Top demais

[@mateusvahl5072]

Adoro o SWR, eu estava utilizando com Next.js, porém, como API é em hooks e roda apenas no front, você não tem SSR por padrão...tem como fornecer fornecer os dados iniciais, mas acaba que você tem que lidar com a requisições duas vezes, no front e no back.

[@miguelhouse4820]

Muito legal. Não me considero aluno. Sou "forever assinante" da Rocketseat. Comprarei o segundo bootcamp.

[@luancampos5186]

Mano ano que vem tenho que investir nos cursos da rocketseat, ou esse ano ainda. Rocketseat é a melhor que ja vih só falta ter curso de inglês

[@marcelorafael23]

Muito bom!!

[@rocketseat]

Faaaala, Marcelo! Valeeu! 💜 😍

[@marcelorafael23]

@@rocketseat 😍😍😍😍😍

[@uemersonpinheirojunior1267]

Que lib fodaaaaaaaaaaa!!!

[@rocketseat]

Né!?? É maravilhosa mesmo, Uemerson! 💜 😍

[@Elizeuth]

Será que o Diegão entende de memes ? Deu uma risadinha na hora de falar Mary kakaksksks

[@dieegosf]

Água coca latão!

[@Joe-zw1qt]

Fala isso não Diegão, degrinindo a imagem

[@lukasfrc]

Caracaaaaa que lib surreal

[@rocketseat]

Demais né? hahaha 💜💜

[@augustomarcelo]

Diegão sem eslint é cada ponto e vírgula deixado pra trás rsrs

[@rocketseat]

👀😅💜

[@francyleomatos7104]

KKKKKKKKK muito bom assistir em 2x (como aprender morrendo de rir)

[@felipehuggler9557]

Diegao, codigo massa! Mas se tivesse algum outro componente na pagina que afetasse o state, nao ficaria fazendo a chamada pra essa URL novamente?

[@michaelpacheco7421]

Diegão e os podcasts? To aguardando o proximo ha um tempão hehe

[@ocharlespereira]

Good, good, good!!!

[@felipeborbaBR]

Muito top!

[@rocketseat]

Valeeeu, Felipe! 💜

[@michaelpacheco7421]

Se o diego usa o edge é pq deve ser bom kkk

[@berlino5563]

How ca be handle a error with swr & ottimistic interface, e.g rollback?

[@ebnermatias7979]

Muito top. Minha dúvida é em 34:00 não seria somente utilizar o mutateGlobal para também atualizar o componente de listagem sem ter que usar a função mutate() ?

[@SirCristianoLopes]

Conteúdo top. Camisa pica

[@rocketseat]

Valeeu, Cristiano! 💜

[@gabrielrufino9041]

Tô impressionado. O focus também funciona pra rotas em apps react native que usam react navigation ou seria no foco do app como um todo? Eu tenho um app que em cada rota, no foco, eu preciso recarregar os dados, e implemento isso na mão usando um hook do próprio react navigation.

[@mechanized8]

Cara, tenho essa duvida tb, já que não da pra chamar o hook dentro de uma função

[@jmcauhy]

16:28 o Diego deu uma risadinha pq foi dentro da Mary...

[@fab_mont]

😂

[@dieegosf]

Por causa do meme da água coca latão né hahahaha

[@brunoscardoso]

@@dieegosf Eu pensei a mesma coisa na hora! kkk

[@vinigamerbr7423]

Uma unica duvida que fiquei, sou obrigado a colocar todos os elementos que estão na minha tabela no banco no interface pra que seja reconhecido os tipos de dados que o useFetch vai receber?

[@danilokovarike6330]

#PR Fala Diego, eu to iniciando no typescript vc diz que muitas coisas do JS são aproveitadas dentro do Typescript mas aminha dulvida é usando o typescript no Node seria "a mesma coisa ou parecida com o JS " ou algo bem proximo disso mas com algumas funcionalidades propias do typescript ?

[@melissaalves5809]

E tem como monitorar somente uma parte dos dados? Tipo eu tenho {title, body, likes}, e queria que se eu saísse e voltasse para a pagina ele só fosse buscar e atualizasse o numero de likes, sem precisar mandar novamente o body e title na resposta.

[@AlissonNunes]

Não necessariamente acho interessante atualizar os dados da tela quando o usuário volta... No caso de listas, como você mesmo disse no começo do vídeo, é muito frustrante a lista de twits mudar quando você volta de uma outra página. Acho que funciona bem para outros tipos de componentes, como por exemplo foto de perfil e configurações do site/app que o usuário pode modificar pelo celular, notificações ou coisas assim

[@antonioraimundocanal]

IRADO, muito bom

[@rocketseat]

Vaaaaleu, Antonio! 💜

[@souzaroberto]

Bom demais! Se com RN for a mesma coisa vai me resolver uns quantos probleminhas. Valeuuuu!!

[@rocketseat]

Valeeeu pelo feedback, Roberto! 💜

[@Zorn-d4b]

sou novato em programação e queria saber se os mesmos dados em dois componentes na tela, ele vai enviar duas requisições. queria saber se esse é o jeito certo ou se isso é um excesso de requisição

[@phenvrc]

Diego, primeiramente parabéns pelo conteúdo, gostaria de saber, em um cenário em que o usuário precisa estar autenticado e ele acaba fazendo uma requisição para deletar um usuário do banco de dados e essa requisição acaba falhando e retornando 401, como você lida com isso? no caso do swr, o fetcher ia tentar buscar os usuários mas acabaria dando erro de token expirado.

[@spiguelpaulo5885]

Por que do uso do useCallback na função?

[@paulospiguel]

Por que usa-se useCallback na funçao?

[@Zangeronimo]

Opa massa, posso ter deixado passar, mas isso não será um problema caso a API retorne um erro? Abraço

[@zeluizr]

Fala ai Diego, cara pergunta principal: Porque você migrou para o Microsoft Edge, está melhor que o Chrome? Eu sou apaixonado por Firefox, porém vi uma migração muito grande ao Chrome, e agora uma migração grande ao Edge, conta ai pra gente como está sendo seu dia de trabalho com essa ferramenta Microsoft. Abraços!

[@brunolombardi1512]

E aí amigo, tbm estou nesse processo de migração. Estou usando o Edge com tudo importado do Chrome, incluindo extensões. Na prática não vi diferença, é praticamente o Chrome com uma cara diferente. Acho que é parte da natureza de alguns devs testar coisas novas, ainda mais se forem promissoras. E nessa questão, o Edge realmente não deixa a desejar. Em algumas situações parece ser mais "leve" que o Chrome. Tem muita gente fazendo testes e benchmark, mas no fim das contas, uma diferença de 5% a 10% é imperceptível pro usuário. A verdade é que o Edge usa a engine do Chrome, então é só cara nova mesmo.

[@otavio.bambans]

Mano, quero uma camisa dessa! kkk

[@PauloRicardo-dk6yf]

Tentei seguir o exemplo no React Native e tive um problema, ele disse: invalid hook call. hooks can only be called... Descobri o erro. O meu erro era que eu estava achando que o swr era uma alternativa ao Axios, porém depois compreendi que na verdade o SWR só é responsável por controlar um fetcher. Na verdade, eu não prestei atenção no início.

[@xantanfasteros]

Como utilizar o useFetch (que é um custom hook) dentro de um useEffect, se isto viola a regra dos hooks de nao permitir chamar hooks dentro de hooks?

[@rocketseat]

Faala, Leonardo! 💜💜 Você conhece nossa comunidade aberta? 💜 Por lá você pode tirar essa e outras dúvidas que tiver! 💜 Segue o link: www.rocketseat.com.br/comunidade 💜

[@xantanfasteros]

@@rocketseat Opa! Muito obrigado pela dica. Entrei no Discord.

[@diegogoulart159]

Adorei! Sério mesmo XD

[@rocketseat]

💜💜💜💜 que bom!!

[@AssisDuarte]

Alguém já teve a curiosidade de deixar os vídeos do Diego em velocidade de 0.75x, só para ver como seria ele falando se fosse humano?

[@rocketseat]

😂😂💜

[@gabrieltana]

Faz conteúdo sobre adônis v5

[@chlima88]

Pergunta de iniciante. Que lance é esse de auto import? Como configura isso ?

[@chlima88]

Seria isso? kzbin.info/www/bejne/r16mpXtqodpnq6s

[@Joe-zw1qt]

Não necessariamente, se bem me recordo isso é uma configuração no settings.json, dá uma olhada no vídeo do Diego da configuração do vscode pra stack js, na descrição vai ter uma gist com o settings.json dele aí vc dá uma olhada lá