En ReactQuery, el useQuery(..) toma una clave que puede contener dependencias complejas (en una matriz). O incluso solo un int , como todoId que puede cambiar (consulte la documentación ).
O un objeto de filters como el siguiente:
function Component() { const [filters, setFilters] = React.useState() const { data } = useQuery(['todos', filters], () => fetchTodos(filters)) // ✅ set local state and let it "drive" the query return <Filters onApply={setFilters} /> }No puedo encontrar una explicación sobre cómo monitorea los cambios debajo del capó.
Si el hash de la clave está bien explicado en el código fuente y en esta publicación de blog, el manejo/control de eventos del cambio de valor es un misterio para mí.
Entonces, la pregunta es: ¿cómo realiza un seguimiento de los cambios, incluso dentro del tipo complejo pasado en la matriz de claves de consulta? ¿Se está produciendo alguna introspección conectando los eventos con los cambios de valor y/o referencia?
PD: Es una pregunta también aplicable a las dependencias en el gancho useEffect(..). Hay una perplejidad general en mí, viniendo de lenguajes no interpretados.
Las claves de consulta se codifican de forma determinista. Básicamente, JSON.stringificamos la clave, pero ordenamos las claves de los objetos dentro de ella para que sean estables. Después de eso, solo tenemos cadenas (también puedes verlas en las herramientas de desarrollo), y las cadenas son fáciles de comparar para ver si algo cambió (solo === ).
¿Cómo sabe el sistema que debe volver a calcular y comparar el Hashkey?
simplemente hacemos esto en cada render.
Ok, dado que mi comentario fue robado como respuesta incluso sin una mención, simplemente lo vuelvo a publicar como respuesta yo mismo:
La consulta se reinicia cuando cambia el hash de la clave.
¿Cómo sabe el sistema que debe volver a calcular y comparar el Hashkey? ¿Cómo "responde" a un cambio?
Vuelve a calcular el hash en cada renderizado, básicamente, no hay magia aquí.
El algoritmo hash es un detalle de implementación, pero por defecto usa JSON.stringify (el único detalle es que las claves de objeto están ordenadas).
Por el contrario, useEffect hook compara las deps solo por referencia (si puede decirlo, técnicamente probablemente use tc39.es/ecma262/#sec-isstrictlyequal, por ejemplo === ).