Utilize as Query Keys da biblioteca TanStack Query da forma correta
A biblioteca TanStack Query é uma poderosa ferramenta para gerenciar o cache de consultas em aplicações React. Uma das características fundamentais dessa biblioteca são as "Query Keys", que são chaves usadas para identificar e gerenciar o cache das consultas de forma eficiente. Neste artigo, vamos explorar o uso adequado das Query Keys e como tirar o máximo proveito dessa funcionalidade.
O que são Query Keys?
Em essência, TanStack Query gerencia o cache de consultas com base em Query Keys. As Query Keys precisam ser um Array no nível superior e podem ser tão simples como um Array com uma única string ou tão complexas quanto um Array contendo várias strings e objetos aninhados. Enquanto a Query Key for serializável e única para os dados da consulta, ela pode ser utilizada.
Query Keys Simples
A forma mais simples de uma chave é um Array com valores constantes. Esse formato é útil para recursos genéricos de lista/índice e recursos não hierárquicos. Imagine a seguinte situação: sua aplicação possui uma lista de usuários e você deseja criar um cache específico para essa lista. Com a TanStack Query e suas Query Keys, isso se torna uma tarefa simples e eficiente! Veja exemplo:
1// Uma lista de usuários
2useQuery({ queryKey: ['users'], ... })Na imagem ilustrativa, podemos ver o cache sendo criado e identificado de forma clara.
Query Keys em Arrays com variáveis
A versatilidade das Query Keys não para por aí! Elas também permitem que você descreva consultas mais complexas, como recursos hierárquicos ou aninhados. Dessa forma, você pode passar informações adicionais para identificar de forma única os dados da sua consulta. Seja um ID, um índice ou até mesmo um objeto com parâmetros extras, as Query Keys têm a flexibilidade necessária para ajustar a consulta conforme suas necessidades. Veja exemplos:
1// Uma usuário individual
2useQuery({ queryKey: ['users', 1]})
3
4// Paginação de uma listagem de usuários baseado em uma consulta
5useQuery({ queryKey: ['users', page, query]})Query Keys são determinísticos!
E tem mais uma vantagem que merece destaque: as Query Keys são determinísticas! Isso significa que não importa a ordem das chaves nos objetos, o cache funcionará perfeitamente, garantindo eficiência e precisão nas consultas. As consultas a seguir são consideradas iguais:
1useQuery({ queryKey: ['users', { status, page }], ... })
2useQuery({ queryKey: ['users', { page, status }], ... })
3useQuery({ queryKey: ['users', { page, status, other: undefined }], ... })Entretanto, as seguintes Query Keys não são iguais. A ordem dos itens no Array importa!
1useQuery({ queryKey: ['users', status, page], ... })
2useQuery({ queryKey: ['users', page, status], ... })
3useQuery({ queryKey: ['users', undefined, page, status], ... })Inclua variáveis importantes nas Query Keys
As Query Keys descrevem unicamente os dados que estão sendo buscados, portanto, devem incluir todas as variáveis utilizadas nas funções de consulta que podem ser alteradas. Por exemplo:
1export function useUser(id: number) {
2 return useQuery({
3 queryKey: ['user', id],
4 queryFn: () => getUser(id),
5 })
6}A função useUser é uma forma de utilizar a biblioteca TanStack Query para obter informações de um usuário específico de forma eficiente, aproveitando o recurso de cache inteligente oferecido pela biblioteca. Sempre que a função useUser é chamada com um novo ID, a consulta é realizada e os resultados são armazenados em cache, proporcionando uma melhor experiência de uso para os usuários da aplicação.
Conslusão
É importante ressaltar que as Query Keys agem como dependências para suas funções de consulta. Incluir variáveis dependentes na Query Key garantirá que as consultas sejam armazenadas em cache independentemente, e sempre que uma variável mudar, as consultas serão refeitas automaticamente (dependendo das configurações de "staleTime").
Referência
https://tanstack.com/query/latest/docs/react/guides/query-keys