Tanstack Query, também conhecido como React Query, é uma biblioteca popular para buscar dados em aplicativos React. O React Query simplifica o processo de busca, armazenamento em cache e atualização de dados em aplicativos da web. Este artigo discutirá o uso do React Query para lidar com a busca de dados em um aplicativo React.

Instalando e configurando o React Query

Você pode instalar o React Query usando npm ou yarn. Para instalá-lo usando npm, execute o seguinte comando em seu terminal:

npm i @tanstack/react-query

Para instalá-lo usando yarn, execute o seguinte comando no seu terminal:

yarn add @tanstack/react-query

Depois de instalar a biblioteca React Query, você envolve todo o aplicativo no QueryClientProvider componente. O QueryClientProvider O componente envolve todo o seu aplicativo e fornece uma instância do QueryClient a todos os seus componentes filhos.

O QueryClient

é a peça central do React Query. O QueryClient gerencia toda a lógica de busca e cache de dados. O QueryClientProvider componente leva o QueryClient como um suporte e o torna disponível para o resto do seu aplicativo.

Para fazer uso do QueryClientProvider e a QueryClient em seu aplicativo, você deve importá-los do @tanstack/react-query biblioteca:

importar Reagir de'reagir';
importar ReactDOM de'react-dom/client';
importar Aplicativo de'./Aplicativo';
importar { QueryClientProvider, QueryClient } de'@tanstack/react-query';
const consultaCliente = novo ConsultaCliente();
ReactDOM.createRoot(documento.getEementd('raiz')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Compreendendo o useQuery Hook

O useQuery hook é uma função fornecida pela biblioteca React Query, que busca dados de um servidor ou API. Aceita um objeto com as seguintes propriedades: queryKey (a chave da consulta) e queryFn (uma função que retorna uma promessa que resolve os dados que você deseja buscar).

O queryKey identifica a consulta; ele deve ser exclusivo para cada consulta em seu aplicativo. A chave pode ser qualquer valor, como uma string, um objeto ou uma matriz.

Para buscar dados usando o useQuery gancho, você precisa importá-lo do @tanstack/react-query biblioteca, passe um queryKey e usar o queryFn para buscar os dados de uma API.

Por exemplo:

importar Reagir de'reagir';
importar axios de'axios';
importar { useQuery } de'@tanstack/react-query';
funçãoLar() {
const postQuery = useQuery({
 queryKey: ['Postagens'],
 queryFn: assíncrono () => {
const resposta = aguardam axios.get(' https://jsonplaceholder.typicode.com/posts');
const dados = aguardam resposta.dados;
retornar dados;
 }
 })
se(postQuery.isLoading) retornar ( <h1>Carregando...h1>)
se(postQuery.isError) retornar (<h1>Erro ao carregar os dados!!!h1>)

retornar (



Home</h1>
 { postQuery.data.map( (item) => ( <pchave={item.id}>{título do item}p>)) }
 </div>
 )
}
exportarpadrão Lar;

O useQuery hook retorna um objeto que contém informações sobre a consulta. O postQuery objeto contém o está carregando, éErro, e é sucesso estados. O está carregando, éErro, e é sucesso estados gerenciam o ciclo de vida do processo de recuperação de dados. O postQuery.data A propriedade contém os dados obtidos da API.

O está carregando state é um valor booleano que indica se a consulta está carregando dados no momento. Quando o está carregando o estado é verdadeiro, a consulta está em andamento e os dados solicitados não estão disponíveis.

O éErro state também é um valor booleano que indica se ocorreu um erro durante a recuperação de dados. Quando éErro for verdadeiro, a consulta falhou ao recuperar dados.

O é sucesso state é um valor booleano que indica se a consulta recuperou dados com êxito. Quando é sucesso for true, você pode exibir os dados recuperados em seu aplicativo.

Observe que você pode acessar o queryKey usando o queryFn. O queryFn recebe um único argumento. Este argumento é um objeto que contém os parâmetros necessários para a solicitação da API. Um desses parâmetros é o queryKey.

Por exemplo:

useQuery({
 queryKey: ['Postagens'],
 queryFn: assíncrono (obj) => {
console.log( obj.queryKey );
 }
 })

Lidando com dados obsoletos

A consulta React fornece muitas maneiras de lidar com dados obsoletos. A biblioteca React Query garante fazer automaticamente uma nova solicitação de busca para sua API quando os dados buscados se tornam obsoletos. Isso garante que você esteja processando continuamente os dados mais atualizados.

Você pode controlar a rapidez com que seus dados se tornam obsoletos e o intervalo de tempo entre cada solicitação de busca automática, utilizando o staleTime e refetchInterval opções. O staleTime opção é uma propriedade que especifica o número de milissegundos em que os dados armazenados em cache são válidos antes de se tornarem obsoletos.

O refetchInterval opção é uma propriedade que especifica o número de milissegundos entre cada solicitação de busca automática da biblioteca React Query.

Por exemplo:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 staleTime: 1000;
})

Neste exemplo, o staleTime é de 1000 milissegundos (1 segundo). Os dados buscados ficarão obsoletos após 1 segundo e, em seguida, a biblioteca React Query fará outra solicitação de busca à API.

Aqui você usa o refetchInterval opção para controlar o intervalo de tempo entre cada solicitação de busca automática:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 refetchInterval: 6000;
})

O refetchInterval é de 6000 milissegundos (6 segundos). O React Query acionará automaticamente uma nova solicitação de busca para atualizar os dados em cache após 6 segundos.

Compreendendo o Gancho useMutation

O useMutation hook é uma ferramenta poderosa na biblioteca React Query. Isto executa operação assíncrona mutações, como criar ou atualizar dados em um servidor. Usando o useMutation gancho, você pode atualizar facilmente o estado do aplicativo e a interface do usuário com base na resposta da mutação.

Abaixo, criamos um AddPost componente que renderiza um formulário com um campo de entrada e um botão enviar. Este componente de formulário usará o gancho useMutation para atualizar o estado:

importar Reagir de'reagir'
funçãoAddPost() {
const[post, setPost] = React.useState({
 título: ""
 })
funçãolidar com mudança(evento) {
 setPost( (estado anterior) => ({
 ...prevEstado,
 [event.target.name]: event.target.value
 }) )
 }
retornar (



 tipo="texto"
 espaço reservado ='Adicionar título'
 nome='título'
 onChange={handleChange} 
 value={post.title}
 />
Adicionar postagem</button>
 </form>
 )
}
exportarpadrão AdicionarPost;

Dentro de AddPost componente é um estado publicar que serve como um objeto com uma propriedade, título.

O lidar com mudança função atualiza o estado publicar sempre que os usuários digitam nos campos de entrada. Depois de criar o AddPost componente, importamos o useMutation hook e use-o para atualizar a API.

Por exemplo:

importar {useMutation} de'@tanstack/react-query'
importar axios de'axios';
const newPostMutation = useMutation({
 mutaçãoFn: assíncrono () => {
const resposta = aguardam axios.post('', {
 título: post.title,
 });
const dados = resposta.dados;
retornar dados;
 }
 })

O useMutation hook lida com a solicitação HTTP para criar uma nova postagem. O newPostMutation A constante representa a função de mutação e suas opções de configuração.

O mutaçãoFn é uma função assíncrona que envia uma solicitação POST para o endpoint da API. A solicitação inclui um objeto contendo o título valor do publicar objeto.

Para executar o mutaçãoFn, você precisará ligar para o newPostMutation.mutate() método:

const handleEnviar = assíncrono (evento) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
retornar (


 tipo="texto"
 espaço reservado ='Adicionar título'
 nome='título'
 onChange={handleChange} 
 value={post.title}
 />
Adicionar postagem</button>
 </form>
 )
}

O envio do formulário executará o manipularEnviar função. O manipularEnviar function é uma função assíncrona que aciona a função de mutação newPostMutation.mutate().

Busca eficiente de dados com Tanstack Query

Este artigo explora como lidar com a busca de dados em um aplicativo React usando a biblioteca tanstack/react-query.

A biblioteca tanstack/react-query fornece uma ferramenta poderosa e flexível para buscar e armazenar dados em cache em aplicativos React. É fácil de usar e seus recursos de cache o tornam eficiente e responsivo.

Esteja você construindo um pequeno projeto pessoal ou um aplicativo corporativo extenso, a biblioteca tanstack/react-query pode ajudá-lo a gerenciar e exibir dados de maneira eficaz e eficiente. Juntamente com o React, o Next.js também fornece vários processos integrados e bibliotecas de terceiros para lidar com a busca de dados.