Poseemos la mejor información que hallamos en internet. Deseamos que te sirva de ayuda y si quieres aportar algo que nos pueda ayudar a perfeccionar nuestra información hazlo con total libertad.
Solución:
De los documentos de apolo
Cuando React monta y representa un componente que llama al gancho useQuery, Apollo Client ejecuta automáticamente la consulta especificada. Pero, ¿qué sucede si desea ejecutar una consulta en respuesta a un evento diferente, como que un usuario haga clic en un botón?
El gancho useLazyQuery es perfecto para ejecutar consultas en respuesta a eventos que no sean la representación de componentes.
Sugiero useLazyQuery. En términos simples, useQuery se ejecutará cuando su componente se renderice, puede usar skip opción para omitir la ejecución inicial. Y hay algunas formas de recuperar/recuperar más datos cuando lo desee. O puedes quedarte con useLazyQuery
Por ejemplo, si desea obtener datos cuando solo el usuario hace clic en un botón o se desplaza hacia abajo, puede usar useLazyQuery gancho.
useQuery es un React Hook declarativo. No está destinado a ser llamado en el sentido de una función clásica para recibir datos. En primer lugar, asegúrese de comprender los React Hooks o simplemente no los use por ahora (el 90 % de las preguntas en Stackoverflow ocurren porque las personas intentan aprender demasiadas cosas a la vez). La documentación de Apollo es muy buena para el oficial. react-apollo paquete, que utiliza accesorios de representación. Esto funciona igual de bien y una vez que haya entendido Apollo Client y Hooks puedes ir por un pequeño refactor. Así que las respuestas a sus preguntas:
¿Cómo llamo a useQuery varias veces?
No lo llamas varias veces. El componente se volverá a representar automáticamente cuando el resultado de la consulta esté disponible o se actualice.
¿Puedo llamarlo cuando quiera?
No, los ganchos solo se pueden llamar en el nivel superior. En su lugar, los datos están disponibles en su función desde el ámbito superior (cierre).
Tu updateInformation probablemente debería ser una mutación que actualice el caché de la aplicación, lo que nuevamente activa una nueva representación del componente React porque está “suscrito” a la consulta. En la mayoría de los casos, la actualización se realiza de forma totalmente automática porque Apollo identificará las entidades mediante una combinación de __typename y id. Aquí hay un pseudocódigo que ilustra cómo las mutaciones funcionan junto con las mutaciones:
const GET_USER_LIST = gql`
query GetUserList
users
id
name
`;
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $name: String!)
updateUser(id: $id, update: name: $name )
success
user
id
name
`;
const UserListComponen = (props) => {
const data, loading, error = useQuery(GET_USER_LIST);
const [updateUser] = useMutation(UPDATE_USER);
const onSaveInformation = (id, name) => updateUser( variables: id, name );
return (
// ... use data.users and onSaveInformation in your JSX
);
Ahora, si el nombre de un usuario cambia a través de la mutación, Apollo actualizará automáticamente el caché y activará una nueva representación del componente. Luego, el componente mostrará automáticamente los nuevos datos. ¡Bienvenido al poder de GraphQL!
Hay respuestas que mencionan cómo se debe usar useQuery, y también sugerencias para usar useLazyQuery. creo que el key La conclusión es comprender los casos de uso de useQuery frente a useLazyQuery, que puede leer en la documentación. Intentaré explicarlo a continuación desde mi perspectiva.
useQuery es “declarativo” al igual que el resto de React, especialmente la representación de componentes. Esto significa que debe esperar que se llame a useQuery en cada representación cuando cambien el estado o las propiedades. Entonces, en inglés, es como, “Oye, reacciona, cuando las cosas cambian, esto es qué Quiero que preguntes”.
para useLazyQuery, esta línea en la documentación es key: “El gancho useLazyQuery es perfecto para ejecutar consultas en respuesta a eventos que no sean la representación de componentes”. En una programación más general, es “imperativo”. Esto le da el poder de llamar a la consulta como quiera, ya sea en respuesta a cambios de estado/prop (es decir, con useEffect) o controladores de eventos como clics en botones. En inglés, es como, “Hey React, esto es cómo Quiero consultar los datos”.
Nos puedes añadir valor a nuestro contenido informacional dando tu experiencia en las reseñas.