TanStack Query: 3 funções que você ignora | guia prático
Mais de 30% dos apps React usam TanStack Query — mas poucos exploram recursos novos. Três funções (stable + experimentais) para extrair mais da lib
Resposta direta
Ter a lib instalada ≠ usar bem; funções novas mudam cache, UX de loading e DX se você sair do default. Então o que vamos fazer é que vamos chamar aquela API Stream Query com uma simples fecha, nós recebemos um leitor neste caso, isso é o que você faz com stream e então nós circulamos ao redor daquele leitor lendo o input que volta como um array de 8 Uint, então precisamos decodá-lo em texto,.
A estatística de adoção e o gap de uso
Diz-se que mais de 30% de todas as aplicações do React tem o TAN Stack Query instalado neles, mas você está conseguindo o mais da sua instalação do TAN Stack Query? Uma delas está no brancho principal, duas mais são experimentais e vou dar um pouco de bonus no final. No branch main do TanStack, então você terá acesso a isso agora em qualquer aplicativo que está atualizado com a query do TanStack. Bem, o tipo de query que simplesmente continua adicionando mais dados como o usuário quer ver mais na página e, normalmente, o sinal de adicionar novos conteúdos à página é que o usuário scrollou até o final da página e eles querem ver mais itens, então vamos dar uma olhada em nosso exemplo.
Claro, todo esse código é disponível para você gratuito em um link do GitHub na descrição abaixo, como todos os links a esses recursos. E agora estamos começando com a demo mais bonita aqui, essa é a demo dos nossos cachorros, então vamos abrir a tabela de rede e ver o que estou falando. Então, quando eu clico em Refresh aqui, podemos ver que temos um call para essa Routes Infinite, vamos dar uma olhada nisso em um segundo, e esse resultado tem todos esses cachorros. Agora, quando descolamos, temos um botão de mais, clicar nisso e obtemos outra invocação, e obtemos mais cachorros e mais resultados.
Mas o que gostamos de fazer é ter isso para que quando descolamos para o fundo aqui, olhemos para ver como interseccionamos com o fundo da página. Então vamos usar um observador de interseção e para isso vamos trazer um hook do React. Então a rota que estamos procurando é infinita, agora direto para cima aqui temos uma constante que diz que queremos 10 cachorros por página e temos uma função de server que vai nos dar esses 10 cachorros e vamos conseguir um parâmetro de página como parte da invocação dessa função de server. Então o handler vai retornar esse formato de JSON blob que tem o próximo cursor, como os cachorros que vamos criar.
Função estável que já vale adotar
E leva as coisas que sabemos quando se trata de query, como a key de query e a funcionalidade de query. Você pode chamar um endpoint API, isso é sua decisão. E temos alguns parâmetros específicos para o Infinite, que seriam o parâmetro inicial de página e o parâmetro GetNext, que nos daria o que queremos para a próxima página. Voltando, vamos ter páginas dentro de dados e dentro disso, dados dentro de cada página.
Agora temos este botão aqui e isso é o que chama esta página FetchNext, que recebemos de UseInfiniteQuery, que nos dá a próxima página. Então, ao invés disso, o que queremos fazer é colocar um div lá e ter ele. Usar um observador de intersecção para dizer que quando aparecer no escritório, queremos chamar o NextPage. Um é um boolean, se estamos intersecando ou não, e o outro é um ref que vamos conectar a um div que está localizado no final da página.
E nesse ponto vamos chamar essa página próxima de pegada, então vamos criar nossa div eu vou apenas mudar esse botão porque não vamos mais precisar dele com a div que nos dá um pouco de feedback de intersecção e não de intersecção você pode fazer isso o que quiser você pode deixar ele vazio se você realmente quiser e então precisamos usar o efeito para monitorar aquele booleano, então vamos trazer isso e vamos dizer que quando intersecção é verdade, então vamos pegar a próxima página, então vai ser verdadeiro como é visto e então vai ser falso como não visto e nesse ponto nós somos bons, não queremos pegar a próxima página, então quando o usuário scrolls up, vamos chegar em verdade novamente e então pegar a próxima página, tudo bem, vamos tentar, tudo bem, vamos começar no topo agora, na caixa, ele realmente estava se intersecando, então é por isso que temos dois pedidos para os dados, você pode obviamente limpar isso se quiser, então temos 20 cachorros aqui atualmente, vamos continuar scrollando todos esses cachorros fofos e então, boom, chegamos no o fundo e nós carregamos mais cachorros, boom, nós chegamos no fundo e carregamos mais cachorros, incrível Tudo bem, essas foram as queries infinitas. Vamos falar agora sobre minha preferida em esse par de três e é a stream query. Você recebe um stream de tokens e você quer mostrar eles o mais rápido que você conseguir. Então, nós queremos ter uma capacidade de streaming dentro de um query de 10 stack e agora nós temos.
Leitura útil
Ter a lib instalada ≠ usar bem; funções novas mudam cache, UX de loading e DX se você sair do default. Use o trecho acima como restrição, não como citação ornamental.
Duas experimentais: o que observar
Que temos queries streamadas saindo de um API e então queries streamadas saindo de uma funcionalidade de server. Então vamos dar uma olhada primeiro em que as queries streamadas saem de um API. Certo, então recebemos esse status de processo e então a cada segundo recebemos novas status updates from some process that we've got. So we've got an API endpoint called slash API stream query and in response to a get it returns a new readable stream.
Now Tudo que você precisa fazer com o Start é só nos dar um stream e nós vamos streamar dados de volta. Então, o que quer que você queira através deste stream de qualquer forma que você queira. Então, agora que sabemos como funciona esta API, vamos falar sobre como isso é usado na TANZAC Query. Então, aqui está a rota correspondente que traz esta Query stream experimentada e a mapeia para a Query stream.
Agora, a Query stream toma uma função de query, talvez confusamente um pouco, que é dado um gerador, então neste caso é um gerador async e a ideia de um gerador é que cada vez que você conseguir algo novo, você pode expor. Então o que vamos fazer é que vamos chamar aquela API Stream Query com uma simples fecha, nós recebemos um leitor neste caso, isso é o que você faz com stream e então nós circulamos ao redor daquele leitor lendo o input que volta como um array de 8 Uint, então precisamos decodá-lo em texto, mas se estivermos prontos, queremos um par. Mas, mais importante, nós reúnemos esse texto e isso se torna parte de um array que é o data. No código, simplesmente vamos iterar através desse array e mostrá-lo.
Bônus e cuidados de API instável
E se olharmos para o código e vamos reparar aquela bug novamente, aqui vamos nós temos uma nova funcionalidade de server chamada get stream data que usa um get como aquele endpoints da API e tem o mesmo mecanismo de resposta como aquele endpoints da API, a única coisa que você tem que fazer aqui é que você tem que usar resposta raw para dizer que queremos ir e enviar, neste caso, um stream legível, não enviar um bloco de json, então essa é a única coisa que você precisa fazer aqui que é um pouco diferente quando você faz sua função de server criativa. Então, o cliente de Query Broadcast é outra ferramenta experimentada. Bem, os canais de transmissão te permitem enviar dados entre diferentes janelas dentro do mesmo browser com facilidade. Então, imagine se a cache de Query Tansac fosse na verdade compartilhada entre todas as janelas de sua aplicação.
Então você tem um cliente que está olhando para a mesma aplicação em vários windows simultaneamente, você quer poder fazer uma caixa em uma e então apenas teleportar o dados para o outro e não realmente ter que ir e recarregá-lo lá, embora possa estar no cache, ou seja, vamos dizer que você quer ir e conseguir essa otimização. Então a maneira que você pode fazer isso é que você pode usar um desses canais de transmissão. E para fazer isso, nós provavelmente usamos a query usada como você talvez nunca tenha visto. Tudo que estamos fazendo é dar uma chave de query, neste caso, texto, que é a chave de query que queremos ir e colocar esse texto.
Então, o estado atual do texto vai voltar como dados da query usada, mas para mudá-lo, vamos pegar o cliente de query diretamente usando cliente de query e então enquanto nós clicarmos nele, vamos então ir diretamente e setar o data de query naquele cliente de query dito que a chave de texto com o novo valor de objetivo e porque temos aquela coisa de canal de transmissão acontecendo, isso vai ser enviado imediatamente para o outro instante do browser que vai setá-lo nesse lado e é assim que conseguimos que está aparecendo em ambos os lados simultaneamente, bem legal, certo bem, tudo vem neste caso para as chaves e essa é a última coisa que quero mostrar para você é esta biblioteca externa que cria um sistema de arquivos nomeado type safe para a query tan stack é chamado de reac query key manager eu acho que talvez seja tansec query key manager mas isso é bom e o que faz é administrar essas chaves você as cria e então de uma forma muito type safe você pode chamar os métodos que você retira como neste caso user keys profile com a id do usuário e ele te retira a chave certa para isso. É muito legal porque temos dois instantes diferentes de Query usados que usam a mesma chave em dois lugares diferentes, o que não é ótimo. Você provavelmente deveria compartilhar isso como um fio, mas se você fizer isso, então esta é uma boa maneira de ter em mente que todos estes estão em sincronização entre cada invocação. Bem, espero que você tenha gostado deste look no Query de Tensec e três novas funções incríveis dele.
Como introduzir no app sem big bang
Diz-se que mais de 30% de todas as aplicações do React tem o TAN Stack Query instalado neles, mas você está conseguindo o mais da sua instalação do TAN Stack Query? Vamos dar uma olhada em três novas funções do TAN Stack Query. Uma delas está no brancho principal, duas mais são experimentais e vou dar um pouco de bonus no final. Bem, a primeira coisa que vamos olhar é o Infinite Queries.
No branch main do TanStack, então você terá acesso a isso agora em qualquer aplicativo que está atualizado com a query do TanStack. Bem, o tipo de query que simplesmente continua adicionando mais dados como o usuário quer ver mais na página e, normalmente, o sinal de adicionar novos conteúdos à página é que o usuário scrollou até o final da página e eles querem ver mais itens, então vamos dar uma olhada em nosso exemplo. Claro, todo esse código é disponível para você gratuito em um link do GitHub na descrição abaixo, como todos os links a esses recursos. Vamos dar uma olhada aqui na Routes Infinitas, e podemos ver.
E agora estamos começando com a demo mais bonita aqui, essa é a demo dos nossos cachorros, então vamos abrir a tabela de rede e ver o que estou falando. Então, quando eu clico em Refresh aqui, podemos ver que temos um call para essa Routes Infinite, vamos dar uma olhada nisso em um segundo, e esse resultado tem todos esses cachorros. Agora, quando descolamos, temos um botão de mais, clicar nisso e obtemos outra invocação, e obtemos mais cachorros e mais resultados. Mas o que gostamos de fazer é ter isso para que quando descolamos para o fundo aqui, olhemos para ver como interseccionamos com o fundo da página.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.