* Fornece ferramentas para melhorar a confiabilidade dos dados do servidor — Tnvalida e marca os dados como obsoletos. + Fornece ferramentas para melhorar a experiéncia do usuario — pré-busca, rebusca, armazenamento em cache e muito mais. * Otimizacdes de desempenho — Paginagio e carregamento lento. + Solicitar novas tentativas — Capacidade de repetir em caso de erros. * Rebusca de foco de janela — Rebusca com base na atividade da guia do aplicativo. O React Query substitui o Redux, o MobX ou outras bil gerenciamento de estado? Redux, MobX e as outras bibliotecas populares sio timas para o gerenciamento do estado do cliente, O React Query complementa essas bibliotecas e ajuda a criar uma iotecas globais de separagio de preocupagées. Na maioria dos aplicativos do lado do cliente, eles lidam com 0 estado do servidor. Eles normalmente executam estas etapa: * Buscar dados do servidor * Armazenar os dados do servidor no repositério do cliente + Forneca uma midia para que os componentes se comuniquem e acessem os dados do armazenamento. O React Query ajuda vocé a abstrair as fungées acima. Portanto, deixando apenas 0 estado real do cliente para ser armazenado usando bibliotecas de gerenciamento de estado do cliente. E por isso que vocé fica com 0 pouco estado a ser mantido ao migrar para o React Query. Armadilhas ao trabalhar com o React Query 1. Tamanho de pacote grande O React Query tem um impacto no tamanho do aplicativo. £ por causa de todos os recursos que vem com ele. 0 tamanho do pacote grande pode afetar seu desempenho. Isso pode causar atrasos durante o carregamento, renderizacao e interacao do usuario. Para dar mais contexto, de acordo com o BundlePhobia o React Query é cerca de 3 vezes maior que um de seus concorrentes SWR. A ideia aqui no é assusté-lo pelo tamanho do pacote, em vez disso, ajudé-lo a verificar se ele é perfeito para sua aplicacao.react-queryé3.39.2 Q 55.38 13kB 259ms = 15ms i ised i ; ‘Tamanho do pacote React Query, conforme relatado pela fobia do pacote. wre .3.0 Q mictnotmalatl Salsa aunoie size 9.918 4.218 DOWNLOAD TIME NANI 83ms 5ms gLiiaiiiiiiiig Tamanho do feixe SWR conforme relatado pela fobia do feixe. 2, Identificando chaves de consulta para invalidar © React Query fornece um gancho useMutation para atualizar dados em seu servidor. Se a atualizagao para o servidor passar, Ele fornece a funcao de retorno de chamada onSuccess e onMutate para atualizar 0 cache no repositério de consulta react. A armadilha aqui é que, para cada atualizacao feita no servidor, uma etapa manual é necessdria para identificar e invalidar as chaves de consulta. Vamos entender por que isso fica complicado:* Identificar todas as chaves de consulta no repositério do React Query relacionadas a atualizagdo que passou é dificil. Ha um alto potencial de que vocé pode perder na identificacdo dessas chaves em grandes aplicativos. E propenso a erros e uma boa compreensio da plataforma é necesséria para evitar essa armadilha. * As chaves de consulta geralmente sao invalidadas com a ajuda da chamada invalidateQueries, As chaves de consulta que vocé passa para a chamada invalidateQueries devem corresponder & chave de consulta que foi definida inicialmente. Se a chave de consulta for uma matriz de Strings, a ordem em que os parametros sao passados na chave de consulta também deverd ser a mesma. 3. Identificagio de chaves de consulta para cache O React Query requer chaves de consulta apropriadas para que o cache funcione conforme o esperado. Defini-los pode ficar complicado as vezes. Para entender melhor, vamos considerar um exemplo. Digamos que vocé precise buscar a contagem de todos os usudrios que chegaram 4 sua plataforma desde o inicio do ano. A consulta para buscar a contagem de usudrios depende da data de inicio e da data de término. Esses parametros devem fazer parte da chave de consulta, conforme mostrado abaixo *usersCount' , { startDate: '2022-01-01+00:00:00', end_date: '2622-12-08+00:53:56' } Digamos que eu vim depois de um minuto e solicitei para a contagem de usudrios desde 0 inicio do ano, ele nado armazena em cache. Em vez disso, ele solicita diretamente do servidor. Este nao deve ser 0 comportamento esperado. Idealmente, com tudo o que aprendemos, ele deveria ter retornado do cache enquanto buscava as atualizagdes mais recentes em segundo plano. Para entender isso, vamos estruturar a chave de consulta para a solicitacao que foi feita aps um minuto. *usersCount' ,{ startDate: '2022-01-01+90:00:00', end_date: '2022-12-08+00: Vocé notaria que a data de término foi alterada. Essa chave nao esta correspondendo com a antiga que esta presente no cache. Entao ele busca diretamente do servidor. Para corrigir esse problema, os parametros definidos na chave de consulta precisam ser modificados. Em vez de considerar todo 0 carimbo de data/hora, e se considerarmos apenas a data na chave de consulta. £ importante observar que os parametros que sao passados para a chamada de API ainda permanecem inalterados. Ainda enviamos todo o carimbo de data/hora. E somente na chave de consulta que a modificacao é feita, conforme mostrado abaixo. *usersCount' { startDate: '2022-01-01', end_date: ‘2022-12-08' } Se vocé voltasse depois de um minuto e fizesse uma solicitagao, ela seria buscada instantaneamente no cache. Isso ocorre porque sua chave de consulta permanece inalterada e corresponde a do cache. Mas 0 que ¢ interessante aqui é que a busca em segundo plano é para os carimbos de data/hora solicitados do servidor. Uma vez que as atualizagdes mais recentes esto disponiveis, ele as pinta na secao de contagem de usuarios. Busca de dados no React Query A busca de dados é um efeito colateral muito comum que geralmente é gerenciado com useEffect. Tornou-se muito mais simples com o React Query. Para entender melhor, vamos comparar como a busca de dados é implementada no useEffect e no React Query. Usaremos axios e a API JSONPlaceHolder para buscar as postagens. // Fetch all posts const fetchPosts = async () =