Por que eu NÃO utilizo React Query com Next.js

Рет қаралды 1,457

3 ай бұрын

Hoje vou falar com vocês sobre o React Query com Next.js. Estamos tão acostumados com a biblioteca que queremos utilizar em todos os lugares, mas não é bem assim.
Espero que o conteúdo enriqueça seu conhecimento!
📢 Discord do canal: / discord

Пікірлер: 17

@TutoDS2014 3 ай бұрын

Pode partilhar o repositório?

@emersontrindade299 3 ай бұрын

@Huriel 3 ай бұрын

Opa! Claro: github.com/huri3l/pokelist-nextjs

@daniellimae 3 ай бұрын

Ah, e concordo com os pontos! Porém a facilidade de lidar com o status da requisicao, assim como saber quando ele ta refetchin ( isRefetching ) é uma facilidade muito grande do tanstack ainda pra mim. Acredito que num futuro o next ja venha com essa forma de lidar ainda mais concreditazada e mastigadinha pra nós.

@Huriel 3 ай бұрын

Seria sensacional se o Next ao invés de tentar implementar cache do 0, integrasse o React Query assim como fez com o Tailwind... É um sonho pessoal hahahh

@PedroHenriqueTSI Ай бұрын

ótimo conteudo man, hoje utilizo bastate o reat-query pois trabalho em uma plataforma de pagamentos, e preciso refazer algumas requisições a depender de ações do usuário, se não fosse por isso, acredto que não utilizaria o react-query em conjunto com o next, mas são casos e casos

@amorimcode 3 ай бұрын

eu acho ruim tbm, prefiro manter as requisições com axios e gerenciar estados mais complexos com zustand

@Huriel 3 ай бұрын

É uma ótima ideia! Sem contar que os estados do Zustand podem ser consumidos tanto Server Side quanto Client Side

@daniellimae 3 ай бұрын

Muito bom o video e a forma que explica!!! Talvez se vc usar de cortes ( nao cortes secos ) fique mais didadico e doce de assistir ainda. Recomendo que use um capcut da vida, vai simplificar bastante

@Huriel 3 ай бұрын

Obrigado pela sugestão!! Voltei há pouco tempo para produzir conteúdo e ainda to me acostumando com a edição hehe

@TrendTokSuper 2 ай бұрын

Cara tenho uma pagina cliente que no post ela chama um método do tipo server componente, o qual não faz requisição pra uma api, ele já comunica com o banco direto através do prisma. fazendo inserta, update e delete conforme os registro é enviado. porem não consigo fazer a atualização, e nem usar o bloco de transação do prisma. Eu ate tentei usar Action no form do nextjs, mas estou usando o onsubmit no form.

@mauricioroberto5623 3 ай бұрын

ué server actions tem cache ?

@Huriel 3 ай бұрын

Não, server actions não. Elas tem a configuração no-store de cache por padrão, pois as requisições feitas através dela são do tipo POST

@orevogabe 3 ай бұрын

Então acho que essa comparação foi sem sentido, pois você ta comparando as coisas mais superficiais do Next e do React Query, sim Next faz o cache mas você nao mostrou nem um terço do que o React Query pode fazer, o DX e o controle que o React Query dá são muito melhores que apenas o cache do next, vou te dar um exemplo básico mas talvez voce possa se aprofundar ainda mais. Vamos supor que voce esta fazendo um chat de mensagens e voce esta cacheando elas: No React Query: Assim que voce enviasse uma mensagem voce poderia pegar a Query Key, puxar o cache, selecionar os dados antigos e inserir a sua mensagem nova direto no cache sem precisar refazer a querie novamente, apenas refazer quando atualizar a pagina No Next: Voce necessariamente precisaria revalidar a querie inteira e ele fazer uma nova Fetch. Fora a DEVTOOLS Isso é apenas um exemplo de milhares que temos no React Query, o Next ainda esta iniciando na DX para Cache deles, recentemente foi implementado o uso de Keys para revalidar queries pois antigamente nao tinha isso. Sugiro voce testar mais coisas do React Query para entender melhor a complexidade dele.

@Huriel 3 ай бұрын

Opa! Realmente, o React Query tem uma DX indiscutivelmente superior ao Next no momento. Mencionei no vídeo também cenários onde acredito que o React Query seja uma boa escolha, mas não comentei sobre o próprio debugging dele que é sensacional! Acontece que a maioria dos projetos que desenvolvi desde o lançamento do Next 14 não precisavam da complexidade que o React Query envolve, mas atualmente estou trabalhando em um onde o React Query é utilizado por ter bastante componentes Client Side, e o controle das queries funciona muito bem.

@orevogabe 3 ай бұрын

@@Huriel Acho que seu ponto é valido para quando vamos fazer projetos muito pequenos, porém assim que vamos aumentando o escopo do projeto é impossivel usar apenas o Next, e mesmo sendo Serve Side o Prefetch do react query funciona super bem. E parabéns pelo video apesar de eu descordar lenimente desejo sucesso. abraço!

@Huriel 3 ай бұрын

@@orevogabe que isso meu querido, agradeço a você pela opinião!! Realmente, eu deveria ter mencionado que é necessário tomar cuidado com essa decisão. Acredito que o React Query não deve ser utilizado em um projeto pequeno, mas que o dev saiba que vai ser pequeno, porque se escalar... Aí pode ter problemas de não usar ele hauhuahuahua Abraço!