es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • El callback onCompleted no se está llamando para la segunda llamada en el gancho useLazyQuery de apollo client (React).

El callback onCompleted no se está llamando para la segunda llamada en el gancho useLazyQuery de apollo client (React).

29 Jul, 2023 Programación

Estoy utilizando el cliente Apollo para React para hacer consultas de GraphQL. Tengo un problema cuando uso el hook useLazyQuery para hacer consultas programáticamente. El callback onCompleted no se activa cuando hago la consulta por segunda vez. En realidad, la solicitud de red se está completando y el estado en el índice 1 del valor de retorno de ese hook se está actualizando.

const [getUser, getUserStatus] = useLazyQuery(GET_USER, {
    fetchPolicy: 'no-cache',
    notifyOnNetworkStatusChange: true,
    // este callback no se activa en la segunda llamada a getUser
    onCompleted: (data) => {
        const { customerCart, customer } = data;
        if (!id) {
            dispatch(updateCartId(customerCart.id));
        }
        if (id !== customerCart.id) {
            mergeCart({
                variables: { cartId: id, cartIdToMerge: customerCart.id },
            });
        }
        dispatch(updateUser(customer));
    },
    onError: (error) => {
        checkHasAuth(error);
    },
});

useEffect(() => {
    if (token) {
        // aquí estoy llamando por primera y segunda vez
        getUser();
    }
}, [getUser, token]);
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que la devolución de llamada onCompleted no se activa cuando el hook useLazyQuery se llama por segunda vez. Una posible razón para esto podría ser que el objeto de opciones del hook se reutiliza entre las llamadas.

    Para resolver este problema, podrías intentar crear un objeto de opciones separado para cada llamado al hook useLazyQuery. Una forma de hacer esto es utilizando el hook useMemo para memoizar el objeto de opciones en función de sus dependencias. Aquí tienes un ejemplo de fragmento de código:

    import { useMemo } from 'react';
import { useLazyQuery } from '@apollo/client';

function MyComponent() {
  const [getUser, getUserStatus] = useLazyQuery(GET_USER, {
    fetchPolicy: 'no-cache',
    notifyOnNetworkStatusChange: true,
  });

  const onCompleted = (data) => {
    // manejar los datos de la consulta aquí
  };

  const onError = (error) => {
    // manejar el error aquí
  };

  const options = useMemo(() => ({
    fetchPolicy: 'no-cache',
    notifyOnNetworkStatusChange: true,
    onCompleted,
    onError,
  }), [onCompleted, onError]);

  useEffect(() => {
    if (token) {
      getUser(options);
    }
  }, [getUser, options, token]);

  // renderizar el componente aquí
}

    En este ejemplo, creamos un nuevo objeto de opciones cada vez que cambian las devoluciones de llamada onCompleted u onError (es decir, cuando cambian sus dependencias). Al pasar este objeto de opciones a la función getUser, nos aseguramos de que cada llamada al hook useLazyQuery tenga su propio objeto de opciones separado y, por lo tanto, pueda activar la devolución de llamada onCompleted como se espera.

Comments are closed.