Então olha só eu venho cadastro um produto novo adiciono aqui o preço ele aparece na lista veja tá aqui e em nenhum momento eu faço uma requisição nova mas em nenhum momento Essa query aqui ó na minha lista de produtos ela é refeita eu só atualizo o cash ou seja eu atualizo uma informação que já foi carregada anteriormente isso é http state e agora que que eu vou fazer eu vou criar uma pastinha chamada data com um arquivo chamado products PTS e aqui dentro Eu quero basicamente criar uma Ari com muitos produtos vamos ver se eu consigo usar o chat GPT para isso então Create JavaScript Array products including Random ID unque 80 vamos ver se el me retorna um beleza ele foi mais esperto né Ele criou um for mas pode ser mas eu posso fazer theun vamos ver se ele consegue retornar o ar inteiro beleza e agora a gente vai mostrar isso aqui em tela então agora ao invés de usar esse Array from eu vou pegar products na aqui eu vou usar product. id aqui também no nome do produto productname e no preço eu vou usar product Price Só que eu não quero eu quero que ele esteja formatado Então vou usar loc string PTBR Style currency currency BRL salvo beleza e agora que que eu vou fazer eu quero simular que isso aqui vende uma API e que não é um arrei simplesmente de um produto quero simular Como se eu tivesse fazendo uma chamada http então eu vou na verd exportada aqui de dentro uma função chamada get products vou fazer ela uma função assíncrona que vai retornar isso aqui no final das contas mas ela vai levar um tempinho então aqui ó await set time out Opa await New Promise eu vou fazer essa requisição demorar 1 segundo para responder então eu adicionei aqui um delay de 1 segundo para que quando essa função seja chamada ela demore um segundo para retornar e aqui o meu App vai bugar Claro porque a gente não não tá chamando essa função né eu tô importando direto products e aí a gente vai começar a entender como é que funciona a questão de http state né para isso eu vou começar instalando a biblioteca ttech react query E aí lá no meu App Ah vou botar aqui no meu Main mesmo Por volta do meu App eu vou botar algo que vem de dentro ali do T stack react query que é o query client ah Opa é o provider Como é que é o nome cre client provider ele é um context provider então ele precisa por volta de toda a minha aplicação E aí aqui em Lib eu vou criar um arquivo chamado react quy que ele vai importar de Dentro de 10 react query a classe query client e ele vai simplesmente exportar Uma Nova Instância dessa classe e aqui eu passo client Cent que importa ali do meu Lib [Música] vamos ver se tá tudo funcionando não porque ainda tá dando erro aqui embaixo né mas se eu tirar isso aqui ó já vai funcionando e aí agora eu vou usar o react query para fazer a minha query como é que funciona Olha só galera que fácil eu vou criar aqui uma con vou fazer uma desestruturação eu vou usar use quy que deveria fazer importação automaticamente mas não fez então a gente faz a importação na mão use query e aqui a gente passa a query function que é qual função que vai ser chamada então é a nossa get products deixa eu importar ela aqui e eu passo para ela também uma curry Key que é uma maneira de eu identificar essa requisição globalmente na minha aplicação então eu vou chamar ela de products agora isso aqui me retorna data que são os produtos em si e me retorna por exemplo outras informações caso eu queira é se deu erro é se tá carregando se não tá E aí eu vou fazer o seguinte eu tenho os products aqui dentro enquanto eles não foram carregados ele vai est comando defined depois de carregar ele vai ter uma lista de produtos veja que já tá até tipado aqui bem certinho porque essa função aqui retorna nesse formato então venho aqui embaixo na minha lista de produtos e faço algo simples assim ó products e products. map ou dessa forma também vai resolver Pronto já tá todos os produtos como eu coloquei um delay de 1 segundo veja que ela demora 1 segundo para carregar certo só que agora que que a gente quer fazer se eu vier aqui deixa eu diminuir um pouco essa lista que ela tá um pouco grande show se eu vi aqui adicionar um novo produto eu quero fazer o seguinte esse no produto que eu adicionar eu quero que ele seja adicionado na pi porém eu quero que ele apareça aqui na tabela automaticamente Então olha só vamos lá aqui dentro de data products eu vou criar uma função chamada Create product ela vai ser uma função assíncrona também essa função aqui ela é só para simular que o produto tá sendo criado tá então que que o que acontece eu vou vir aqui nela vou falar que para criar um produto eu preciso enviar o nome e o preço do [Música] produto deixa eu mover isso aqui para baixo aqui dentro eu vou botar um delay também tá E no final eu não vou fazer nada vou só retornar vazio aqui não preciso fazer nada tá porque isso aqui é como é é para simular como se fosse a minha chamada http pr pra minha api mas eu não tenho api então vou deixar uma função assíncrona só para que seria o o real né que a gente tivesse E agora o que que eu vou fazer eu vou lá na minha no meu dialog que é onde eu tenho a parte de criação e aqui dentro agora ao invés de use curry eu vou usar o use mutation que vem de dentro do T stack react query mutation é tudo aquilo que a gente cria altera ou deleta query é tudo o que que a gente busca sempre que eu for fazer uma busca de informações use query sempre que eu for fazer uma mutação que é criação alteração da le eu uso use mutation E aí mutation a mutation também precisa de uma função ou seja qual função que ela vai executar é a nossa Create product Opa a meu Deus do céu Create product aqui que vem lá do meu data products e ela me retorna mutate ayc que é a função que eu tenho que executar para que a minha mutation Execute né para que a mutação aconteça E aí aqui dentro do meu handle Create product eu vou basicamente chamar essa função aqui product function passando os meus dados nome que vem de data pname e Price que vende de data.
on Price isso aqui é assíncrono então posso usar uma SN await aqui dentro e aí eu posso fazer por exemplo um try catch aqui dentro fechou a gente tá cadastrando então venho aqui ó em novo produto boto produto boto o preço clica em salvar Aguarda um pouquinho produto cadastrado com sucesso só que se eu volto pra minha listagem o produto que eu acabei de cadastrar Ele não tá aqui e aí que entra a questão de http state o que muitas vezes as pessoas fazem para resolver esse tipo de situação que é eu tenho um modal eu cadastro alguma coisa e tem uma outra informação na tela que no caso é minha listagem de produtos que precisa ser atualizada por causa desse cadastro e não é só cadastro às vezes às vezes é uma uma alteração uma remoção alguma coisa parecida com isso E aí que que a gente pode fazer nesses casos aqui dentro do use mutation eu tenho uma função chamada on success que é uma função que vai ser disparada quando essa mutation tiver sucesso beleza e aí que que eu vou fazer aqui dentro eu vou usar um Hook chamado use curry client ah que ele vem do do tack react query e aqui dentro do on success eu vou fazer o seguinte eu vou buscar os dados que estão armazenados na minha listagem usando o Cury client. get Cury datata E aí eu passo a chave da minha query Então se a gente voltar lá na listagem de produtos lembra que quando eu fiz o fetch da minha lista de produtos Eu dei um ID para ela que é esse query Key eu vou usar este carinha aqui dentro ó e aí agora olha só se eu dou um console log nesse cachet aqui quando eu cadastro um produto depois de um segundo veja que ele me traz aqui no console log a minha lista de produtos e o mais legal disso é que eu não preciso só pegar do cche eu posso atualizar o cche então eu posso fazer um cur client pset cur inteira e aqui eu passo o nome da query que eu quero atualizar o ID né que é o products e os novos dados que eu quero colocar dentro dessa query só que precisa ser um updater então eu vou ter os dados ã E aí eu retorno uma nova lista ah copiando os dados que eu tenho ali dentro aqui ele vai tá com unk no Por isso tá dando erro [Música] ã e eu adiciono o meu novo o item no final então que tá vindo aqui do formulário então basicamente isto aqui ó só que isso não vende data data é o retorno vende variables e aqui eu não preciso do contexto Olha o que que vai acontecer agora galera quando eu vier aqui na minha listagem ccar em novo adicionar um produto por exemplo produto botar teste e o preço 1 2 3 1 2 3 quando eu clico em salvar Olha o que que aconteceu a gente tem um novo produto aqui dentro ele só tá sem o ID porque a gente não colocou um ID nele né aqui a gente poderia botar um ID é Random crypto.
