Consumindo APIs no React com SWR | Code/Drops #38
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Desde que comecei a utilizar o React o consumo de API é sempre muito semelhante, nós utilizamos de um useEffect e um useState para armazenar os dados da API em um componente, mas será que dessa forma conseguimos oferecer a melhor experiência pro usuário?
Nesse vídeo, utilizamos uma ferramenta desenvolvida pela mesma empresa que criou o Next.js e o serviço de deploy mundialmente conhecido como Now.sh (que agora virou apenas Vercel), para implementar uma técnica de invalidação de cache conhecida como `state-while-revalidate` que consiste em armazenar uma versão provisória de todas requisições HTTP para ter sempre os dados o mais rápido possível enquanto buscamos os dados atualizados em segundo plano.
Repositório no Github: github.com/Roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
O bom do Diego que não precisa assistir o vídeo em 2x, já é nativo dele.
kkkkk o pior é que é vdd
entao eu assisto o diego em 4x
é humanamente impossível
é um plugin que veio default nele
kkkk verdade!
Cara, o Diego passa uma energia, q na hora q o vídeo roda, já da vontade de abrir o vscode
Total
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ê.
Valeeu pela sugestão, Vitor! 💜
Eu gosto muito desse formato de conteúdo da Rocketseat, pois eles sempre vão direto ao ponto, sem enrolação.
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!
sou aluno também, fico até perdido de tanto conteúdo maravilhoso 🚀
nossa eu fico chocado com a qualidade do conteúdo de vocês, cada vez se superando maiss
É só o começo, Nicolas! 💜💜💜
MEU DEUS
Minha empresa usa uns eventos unidirecionais do backend para o front com o protocolo SSE, uma gabiarra sem fim... isso resolve tudo
na minha empresa não desenvolvemos soluções, desenvolvemos GAMBIARRA kkkkkkkkkkkkkkk. triste
Nosso ramo de gambiarras LTDA.
Isso já faz dois anos e achei maravilhoso. Massa de maaaiiisss!!!!
O Futuro, do caralho esta video aula Diego Deshamps. Meus parabéns pelo excelente conteúdo.
Fala Charles!!! Valeeu pelo feedback! 💜
Esses vídeos sempre ajudam, pois nem sempre a documentação esta bem clara.
Faaaala, Rafael! Valeeu! 💜
Realmente, né!? Algumas documentações são um pouco confusas mesmo! 😥
segui os vídeo sorrindo, essa biblioteca é incrível!
Sensacional! Obrigado, Diego!
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.
Valeeu pela sugestão, Douglas! 💜
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.
Uma baita biblioteca, e uma baita explicação. Excelente vídeo, parabéns 👏💻
Achei muito bacana essa lib. Trazendo uma coisa que o Apollo server já faz para graphql. O próprio Apollo tem o usequery e usemutate que funcionamento muito próximos disso, porém, o cache do graphql é feito no ID e type dos dados, o que acaba dando ainda mais flexibilidade ao fazer as mutações. Mesmo assim facilita demais essa lib
Excelente vídeo em Diegão
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.
Biblioteca muito boa não vejo a hora de começar a usar nos meus projetos
Muito foda!!! Bela abordagem
''swr é uma ferramenta agnóstica de back-end' AUhauhUahu Maravilhoso diegão!!
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
Animal de mais a lib, e parabéns pela didática e modo de apresentação
Já deixo fazer um code/drop sobre NextJs. Bela camisa Diego. sz
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!!!
Cara todo dia uma coisa nova fazendo boomm na minha cabeça, obrigado Rocketseat !!! 💥🚀💜
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 🙏👏
Excelente explicação, Diego Fernandes! 👏👏👏👏👏
Valeeeu, Robson! Didática do Diego é sensacional, né!? 💜 😍
Tem um bug na sua camiseta hahaha. Muito bom o conteúdo! Obrigado mais uma vez!
I learned to understand Portuguese just to know what Diego is saying. 🙏
That's so awesome, Fabricio!
Muito TOP essa biblioteca já vou implementar no meu projeto ! Vlw Diego
É sensacional, né, Luiz? Depois conta pra gente o que achou! 💜 🚀
@@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?
como sempre SENSACIONAL
Faaaaaala, Cesar! Muitíssimo obrigada, viu? 💜 🚀
VC É UM DEUS CRIATURA!
Caraca a intro ficou massa eim, seloko. Otimo video como sempre, Diego Vampirão Drácula direto e claro. parabens rocketseat!
que Intro Code/Drops é essa, foda demais, parabéns para quem fez!
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!
Vaaleu pelo feedback e por compartilhar sua opinião com a gente, Luis Gustavo! 💜
Diego é cabuloso demais, manja muito
Sempre aprendendo com vcs!!! Vlw Rocketseat, conteúdo de primeira!
Que conteúdo legal, Man! Parabéns! Essa ferramenta é d+
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
Na empresa que trabalho migramos do SWR para o react query. Tenho gostado muito! O melhor mesmo é parar de usar redux kkkkkk
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! :)
Faala, Gabriel! 💜💜 Valeeeu por compartilhar sua opinião com a gente! 💜💜
@@rocketseat 💜
Rapaz... biblioteca top das galáxias
Top né? 💜
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
Cara! Que fantástico! Parabéns pelo vídeo!
Valeeu, Tadeu! 💜 (até rimou!)
@@rocketseat kkkk
muito massa, saca muito!
Valeeeu, Pato! Diego é fera mesmo! 💜 😍
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)..
Faala, Tiago! 💜💜 Vaaaleu por compartilhar sua experiência com a gente! 💜
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.
Eu achei essa biblioteca fantástica! Queria trabalhar usando isso pois resolve muitos problemas.
Maaassa, Marcelo! 💜💜
Não tenho nada a acrescentar só queria deixar registrado que eu fraguei a risada maliciosa em 16:29. Ótimo vídeo!
SWR é sensacional, que vídeo bom! 🚀
💜💜💜 Vaaaleu, Zagatti! 💜
Que isso!
Bizarramente simples e absurdamente foda.
Que conteúdo toooop
Novamente, só conteúdo AAA. vlw rocket.
Vaaaaleu, Matheus! 💜
Top demais
Caracaaaaa que lib surreal
Demais né? hahaha 💜💜
Muito top, merece uma parte 2
Biblioteca muito top. Pensando em colocar em produção pra simplificar o código
Diegao, codigo massa! Mas se tivesse algum outro componente na pagina que afetasse o state, nao ficaria fazendo a chamada pra essa URL novamente?
Esse cara é muuuuuuitooo fodaa.... a ansiedade dele me mata de rir uHAUAHAU
Muito massa. Boa Diego!
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
S E N S A C I O N A L !!! ótimo conteúdo, que library eein...
Valeeeu pelo feedback, Marcos! 💜
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
16:28 o Diego deu uma risadinha pq foi dentro da Mary...
😂
Por causa do meme da água coca latão né hahahaha
@@dieegosf Eu pensei a mesma coisa na hora! kkk
Camisa top hein, Diego
Camiseta bonita Diegão!
💜💜💜
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!
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.
Good, good, good!!!
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.
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.
Top demais, parabens pelo conteudo
Muito bom!!
Faaaala, Marcelo! Valeeu! 💜 😍
@@rocketseat 😍😍😍😍😍
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() ?
Que lib fodaaaaaaaaaaa!!!
Né!?? É maravilhosa mesmo, Uemerson! 💜 😍
Qual a necessidade do redux tendo o SWR? Não consigo ver, por que esse cache acaba funcionando como um Store, e como é imutável você pode acessar do resto da sua aplicação qualquer informação em tempo real sem a necessidade do boiler plate do redux...
bingo, eu estou tirando o redux completamente de uma aplicação da minha empresa, ficou com bem menos código pra manter e para os iniciantes entenderem
Eu usava o axios-hooks para coisas semelhantes. Mas essa lib aí é mais Top!
Opa massa, posso ter deixado passar, mas isso não será um problema caso a API retorne um erro? Abraço
Diegão e os podcasts? To aguardando o proximo ha um tempão hehe
Será que o Diegão entende de memes ? Deu uma risadinha na hora de falar Mary kakaksksks
Água coca latão!
Fala isso não Diegão, degrinindo a imagem
Diegão sem eslint é cada ponto e vírgula deixado pra trás rsrs
👀😅💜
KKKKKKKKK muito bom assistir em 2x (como aprender morrendo de rir)
Muito top!
Valeeeu, Felipe! 💜
👌
💜
@@rocketseat eu recebi um desconto de 2 mil reais num curso que era mil reais, quando entrei eles me deram mil reais de comissão pra financiar os estudos. Por que não fazem o mesmo comigo? Tô precisando encontrar novos cursos, sabe, a vida tá muito chata, e está oportunidade é unica, kkkkkkk
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.
Se o diego usa o edge é pq deve ser bom kkk
IRADO, muito bom
Vaaaaleu, Antonio! 💜
Conteúdo top. Camisa pica
Valeeu, Cristiano! 💜
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?
#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 ?
Sensacional!!
Diego, mas ainda não entendi ao certo:
Qual é a diferença entre usar SWR ou websocket? O SWR carrega dados apenas on focus, ou também carrega nos casos em que o usuário não tirou foco da tela?
What a video!! Obrigado pelo conteúdo de sempre🚀
O SWR apenas faz revalidação no focus, ou seja, não é real time como sockets.
Você até pode definir um intervalo no SWR para ele atualizar os dados sem ser via foco, mas ai ele vai fazer uma nova requisição para a api e vai fechar essa conexão cada vez que ele for atualizar a tela, ou seja, não é informação em tempo real, e sim buscada a cada X segundos (definidos pelo intervalo).
Já o protocolo de websockets é um conceito bem diferente, quando você acessa a pagina ele abre uma conexão com a api e mantém ela aberta, quando algo acontece na sua api ela notifica sua aplicação que os dados mudaram e você altera de acordo.
Que incrível! Pode ser usado no react native?
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.
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?
😂😂💜
Adorei! Sério mesmo XD
💜💜💜💜 que bom!!
Ta, e oq acontece se tu faz a mutação e da um erro no put/delete ? kk' Vlw pelo video
Pergunta de iniciante. Que lance é esse de auto import? Como configura isso ?
Seria isso? th-cam.com/video/y-CtH4lu4uI/w-d-xo.html
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á
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.
Cara, tenho essa duvida tb, já que não da pra chamar o hook dentro de uma função
Muito bom o conteúdo. Dúvida: estou tentando usá-lo pra fazer multiplos requests em uma página da seguinte forma:
```
export default () => {
const { data: telemetryList, error: errorTelemetry } = useFetch('telemetryList')
const { data: telemetryHistory, error: errorHistory } = useFetch('telemetryHistory')
const { data: notifications, error: errorNotifications } = useFetch('notifications')
if(!telemetryList || !telemetryHistory || !notifications) {
return Loading...
}
```
O problema é que o loading aparece por um tempo curto. Qual a melhor solução? unir requisições em uma única key (por página) e um Promise.All no fetcher? O problema é que teria de unir erros e tudo mais... Essa solução acima nao deveria funcionar?
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
Vale apena introduzir uma coisa assim no conceito de redux/redux-saga, ou será que já vale a pena partir pro paradigma de suspense com hooks?
Também tenho essa dúvida.
Fiz a mesma pergunta lá em cima. Talvez o redux possa servir somente para coisas mais simples ou utilizar localStorage mesmo .. mas tenho a mesma duvida
Primeiro a assistir