DEV Community: Luísa Corrêa

Mastering React Query: A Practical Guide to Essential Hooks

Luísa Corrêa — Fri, 14 Mar 2025 17:08:51 +0000

🇺🇸
Continuing my previous post about React Query, today I bring the two main hooks: useQuery and useMutation:

useQuery:

Used for data fetching.
Main configurations:
- queryKey: The information key, which uniquely identifies the data you are fetching.
- queryFn: The asynchronous function that makes the API request, returns the data, and populates the cache.
How it works:
- When we need to return data, useQuery checks for the existence of the data in the QueryCache using the queryKey.
- If the data exists: useQuery returns the data directly from the cache, avoiding unnecessary API requests.
- If the data does not exist: The queryFn is activated, making the API request, returning, and saving the data to the QueryCache.

useMutation:

Used for operations that modify data (POST, PUT, PATCH, DELETE).
Main configurations:
- mutationFn: Asynchronous function that sends the request to the API, performing the creation, update, or deletion operation on the server.
- onSuccess: Callback function that allows you to perform specific actions when the mutation is successful, such as updating the cache or displaying a confirmation message.
- onError: Callback function that allows you to handle errors in a personalized way, displaying error messages or performing other recovery actions.
- invalidateQueries: Function that makes the data obsolete within the cache, because we changed the data on the server.
How it works:
- The mutationFn function is executed, sending the request to the API.
- After the request is completed, the onSuccess and onError callbacks are called, depending on the result of the operation.
- If the mutation changes data that is already in the cache, invalidateQueries should be used within onSuccess to make the data obsolete and ensure that the cache is updated through useQuery

🇧🇷

Continuando meu post anterior sobre React Query, hoje trago os dois principais hooks: useQuery e useMutation:

useQuery:

Utilizado para buscas de dados
Configurações principais:
- queryKey: A chave da informação, que identifica de forma única os dados que você está buscando.
- queryFn: A função assíncrona que realiza a requisição à API e retorna os dados e alimenta o cache.
Funcionamento:
- Quando precisamos retornar um dado, o useQuery verifica a existência do dado no QueryCache por meio da queryKey.
- Caso o dado exista:
  - O useQuery retorna os dados diretamente do cache, evitando requisições desnecessárias à API.
- Caso o dado não exista:
  - A queryFn é ativada, fazendo a requisição à API, retornando e salvando o dado no QueryCache.

useMutation:

Utilizado em operações que modificam os dados (POST, PUT, PATCH, DELETE).
Configurações Principais:
- mutationFn: Função assíncrona que envia a requisição para a API, realizando a operação de criação, atualização ou exclusão no servidor.
- onSuccess: Função de callback que permite executar ações específicas quando a mutação é bem-sucedida, como atualizar o cache ou exibir uma mensagem de confirmação.
- onError: Função de callback que permite tratar erros de forma personalizada, exibindo mensagens de erro ou executando outras ações de recuperação.
- invalidateQueries: Função que torna os dados obsoletos dentro do cache, pois alteramos os dados no servidor
Funcionamento:
- A função mutationFn é executada, enviando a requisição para a API.
- Após a conclusão da requisição, os callbacks onSuccess, onError são chamados, dependendo do resultado da operação.
- Caso a mutação altere dados que já estão no cache, o invalidateQueries deve ser usado dentro do onSuccess para tornar o dado obsoleto garantir que o cache seja atualizado por meio do useQuery.

Boost your application's performance with React Query!

Luísa Corrêa — Thu, 13 Mar 2025 17:19:41 +0000

✨ What if you could eliminate the complexity of asynchronous data management in your React and React Native application? React Query can help you by simplifying and optimizing server state ✨

How the also known as TanStack Query works:

📦Cache(QueryCache):
- React Query stores data in the cache, avoiding repeated server requests.
Data Status:
- 👶Fresh → Like the data's validity, after a certain time the data becomes stale.
- 👴Stale → Obsolete data, meaning a new server request is needed to update it.
♻️ SWR (Stale-While-Revalidate):
- SWR ensures your data is always fresh.
- It displays cached data immediately (even if "stale" or obsolete) while fetching the latest version in the background. Thus, the user sees the content instantly, and the update is smooth.
𝗦𝗶𝗺𝗽𝗹𝗶𝗳𝗶𝗲𝗱 𝗗𝗮𝘁𝗮 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁
- React Query eliminates the need to write complex code to fetch, update, and manage server state. It takes care of:
  - ⚙️**Automatic cache: **No need to implement manual logic.
  - 🔁Revalidation: Automatic data update.
  - ⚠️Error handling: Handles request errors.
  - 🚀Optimistic updates: Improves perceived performance by updating the interface before server confirmation.

With React Query, you focus only on application logic!

Estrutura de um Projeto React

Luísa Corrêa — Fri, 15 Oct 2021 00:01:03 +0000

Quem nunca teve um pouco de dificuldade para entender cada pasta e arquivo de um projeto? Então, meu objetivo aqui é esclarecer um pouco qual a funcionalidade de alguns diretórios.

Package.json

É aqui onde encontramos as principais informações do projeto, como:

Nome
Versão
Arquivo de inicialização
Licença
Dependências

Node Modules

Assim como o package.json, está presente em todos os projetos javascript. É nessa pasta que fica armazenado todos os códigos das dependências que instalamos em nossa aplicação.

Inicialmente podemos estranhar o tamanho da pasta se comparado ao que está sendo declarado no package.json, mas isso ocorre pois as dependencias do nosso projeto também possuem dependencias e isso vai causando um efeito cascata, um depende de outro e assim por diante.

O comum é deixar o node_modules dentro do .gitignore, pois as dependencias já estão declaradas dentro do package.json, logo não é necessário que a pasta seja traqueada

SRC

Todo o código criado por nós deve ficar nessa pasta source
Onde encontramos o código bruto

Public

Aqui fica os aquivos públicos,arquivos que precisam ser acessados pelo meio externo, como os assets e o index.html

Babel

Ferramenta que converte o código para uma maneira que todos os browsers e todo ambiente da nossa aplicação consiga entender. Isso é necessário, pois o JS é uma linguagem que se atualiza muito e o React possui muitas funcionalidades que o navegadores ainda não consegue entender, então assim o babel compila para versão compatível com todos os navegadores.

Webpack

Na maioria das vezes é utilizado juntamente do babel

Estipula uma series se configurações(Loaders) que ensinam a aplicação a tratar cada tipo de arquivo(.png, .sass, .jpg, js) que pode ser importado e assim os converte para arquivos entendíveis pelo browser.

Source Maps

Forma de conseguir visualizar o código da aplicação mesmo quando o código está tofo bagunçando do bundle.js

Sass

Pré processador de css que nos permite ter mais funcionalidades, como:

Encadeamento
Clarear
Escurecer