#APRENDE React Query DESDE CERO: Paginaci...
wheat rapids
En palabras simples alguien sabe como mutar los estados para que se haga el renderizado 😦
wheat rapids
dejare el github con el error: https://github.com/FrancoEspinozaV/ReactProject/blob/error-delete-data/09-Prueba-Tecnica-Country/src/hooks/useUsers.tsx
por si quieren analizar mejor :c
frail mist
Hola
revisando el repo a ver...
pregunta, si simplemente dejas el onSettled, y comentas el onMutate
se actualiza tu listado?
frail mist
@wheat rapids
wheat rapids
hu perdoname ahora si
wheat rapids
pregunta, si simplemente dejas el onSettled, y comentas el onMutate
en el onmutate es donde se produce la mutación no?
frail mist
no
wheat rapids
el onsettled es como el finally de las promesas que se ejecuta siempre
frail mist
la mutacion en la bd, se produce con el mutationFn
onMutate es solo para hacer cosas adicionales al iniciar una mutación
wheat rapids
entonces tu dices hacer la eliminación en el onSttled?
frail mist
solo digo que comentes un momento onMutate a ver que pasa
ya que como se está haciendo el invalidateQueries
debería refrescarse el listado
wheat rapids
Como comento en bloque?
wheat rapids
Pero para quitar el elemento de la lista deberia pasarle el email y hacer el .filter de users
osea ten en cuenta que "deleteUsers" solo simula la eliminación de la base de datos estoy utilizando una API
frail mist
vale, esa parte si no lo había tenido en cuenta
de todas formas, pregunto, cuando "eliminas" el user, lanza de nuevo una petición consultando los usuarios?
wheat rapids
Es mas facil de entender lo que hago es un rollback creo que se llama mutación optimista le muestro al usuario que se agrego de inmediato mientras simulo la peticion a la base de datos con la API con la peticion "DELETE"
frail mist
es decir, el invalidate si funciona?
Si, tengo claro a lo que quieres llegar, pero como no funciona, la idea es partir de lo básico
wheat rapids
Si, tengo claro a lo que quieres llegar, pero como no funciona, la idea es parti...
entiendo :c pero recien ando tocando react-query me podrias explicar que deberia pasar
frail mist
vale, dame un segundo que salgo de una reu
wheat rapids
si obvio no te preocupes etiquetame y asi vere que tengo un mensaje estare averiguando por todas partes del internet (gpt no me ayudo 😦 )
frail mist
@wheat rapids bueno lo primero es que el hecho de que uses useInfiniteQuery complica un poco las cosas
ya que la data que maneja este hook está particionada
lo ideal es que al modificarla, lo hagas sobre la particion correcta
wheat rapids
agrege esta linea me da false
wheat rapids
<@232214233683591168> bueno lo primero es que el hecho de que uses useInfiniteQu...
hu solo estaba siguiendo el video de midu :c
frail mist
Si es que no está mal usarlo, digo que hacer los optimistic updates se hacen más complejos con ese approach
wheat rapids
hu entiendo, estaba pensando que tal vez deberia modificar la key de forma ["users", pagaParam] indicando la pagina pero.. no tiene sentido ya que estoy haciendo un "infinite scroll" y los paso todo a un arreglo de 1 dimension
wheat rapids
lo leere no se mucho ingles si que lo voy traduciendo de apoco jaja
(para aprender)
frail mist
si va
wheat rapids
pero tengo la consulta lo que hicieron fue :
const newPages = oldData.pages.map(
(page: { results: Message[] }) => ({
...page,
results: page.results.map((oldMessage) =>
message.id === id ? newMessage : oldMessage
),
})
);
para recorrer las distintas paginas
yo en si "no tengo paginas" con el infinite scroll las paso a 1 sola dimension
aqui recorren la matriz hasta encontrar el id
frail mist
tu las pasas a una dimencion, pero internamente la data del query esta en varias, y debe mantenerse asi
porque internamente el tiene un contador de paginas pageParam, y no se si cuando actualizas la data con una sola pagina, react-query se enreda
porque dice, yo he cargado 3 paginas y mi contador tiene un 3, pero ahora en mi data solo hay una pagina de datos
wheat rapids
hmm entiendo y a la vez no, entiendo lo que dices de mantener la data pero no logro encontrar la logica para implementarlo dentro de mi codigo, incluso me confundo que pasa si se borra toda una pagina? react-query se confunde? por que la logica que intento buscar es que tendra cargada 3 paginas pero existen 2
frail mist
es que precisamente ese es el punto, es engorroso este tema
de todas formas no tengo experiencia mutando la data de useInfiniteQuery
quizas esto sirva
{
pages: [{ users: userFilters }],
pageParams: [aca pones como que solo existe una pagina],
}
en pageParams pondria 1 pagina?
{
pages: [{ users: userFilters }],
pageParams: [1],
}
no se que debes poner la verdad
wheat rapids
vale muchas gracias igualmente seguire curioseando esto no me ganará jajaja
frail mist
puedes hacer console.log a (data.pageParams) de lo que retorna useInfiniteQuery?
wheat rapids
puedes hacer console.log a (data.pageParams) de lo que retorna useInfiniteQuery?
retorna un 1
es la pagina que esta te mando una foto de inmediato
frail mist
un uno o un array con un uno?
frail mist
la idea es que le pongas lo mismo que tiene cuando es una sola pagina lo que lleva cargado
usas react query 5
frail mist
vale, ese mismo valor le debes dar
en react query si esto ya no funciona const previusUsers = queryClient.getQueryData(["users"]);
wheat rapids
asi mismo lo tengo no?
frail mist
ahora es siempre en formato de objeto los parametros: const previusUsers = queryClient.getQueryData({ queryKey: ["users"] });
frail mist
asi mismo lo tengo no?
eso da como resultado { ..., pageParams: [[1]] }
wheat rapids
ahora es siempre en formato de objeto los parametros: `const previusUsers = quer...
no, esto esta mal tambien lo pensé pero no se utiliza asi
por defecto detecta solo tiene un parametro
frail mist
eso si tienes una sola página si tienes varias cargadas el resultado será { ..., pageParams: [[1, 2, 3]] }
pero usas react.query 5 o que versión?
wheat rapids
"@tanstack/react-query": "^5.17.12",
frail mist
eso si tienes una sola página si tienes varias cargadas el resultado será { ...,...
no se si lo notas, pero ta quedando doble array
bueno, tienes razon, getQueryData si que recibe directo el queryKey
wheat rapids
ahi lo cambie pero sigue sin funcionar
wheat rapids
bueno, tienes razon, getQueryData si que recibe directo el queryKey
si pense lo mismo que tu que deberia ser un objeto pero la misma función te da su forma
frail mist
ese console.log de que es?
en que parte lo haces?
Si tienes tiempo lo vemos un canal de voz, tu me dices
wheat rapids
Si tienes tiempo lo vemos un canal de voz, tu me dices
tienes tiempo en 1 hora mas? es que ahora tengo que salir hacer unas compras y quedo listo
wheat rapids
en que parte lo haces?
en el setquery
frail mist
dale, si va
