Estoy usando Apollo para consultas de graphQL en un proyecto NextJS. Tengo la siguiente solicitud. Siento que la solución a esto es simple, pero el error ocurre en la sección stateData.allProducts , dice que es nulo, pero configuré el estado en useEffect y tiene data como una dependencia en la matriz, así que no debería ' Se vuelve a renderizar una vez que se han cargado los datos.
Todo esto funciona bien si coloqué estas comprobaciones debajo de una declaración if comprobando la carga y el retorno ...loading pero luego no puedo usar useEffect.
Cualquier ayuda sobre lo que estoy haciendo mal sería muy apreciada.
¡Gracias!
const { data, loading, error } = useQuery(QUERY); const Router = useRouter(); // Creating state and setting it from query const [stateData, setStateData] = useState(null); const [disableAddToCart, setDisableAddToCart] = useState(false); useEffect(() => { setStateData(data); }, [data]); //~~~~~~~// <--- RIGHT HERE IS WHERE I GET THE NULL ERROR const productFound = stateData.allProduct.find( (product: any) => product.slug.current === Router.query.product ); const currentItem = cartDetails[productFound.id]; useEffect((): void => { console.log("currentItem", currentItem); if (currentItem) { if (currentItem.quantity > 0) { setDisableAddToCart(true); } else { setDisableAddToCart(false); } } }, [currentItem]);Mientras su consulta se esté cargando, o si hay un error, la variable de data de useQuery será null .
Por lo tanto hay que comprobar que la loading haya finalizado y que no se haya producido ningún error . Y/o para que los data sean definidos.
Además, stateData es innecesario, porque data ya son una variable de estado lista para usar.
const { data, loading, error } = useQuery(QUERY); const Router = useRouter(); const [disableAddToCart, setDisableAddToCart] = useState(false); let productFound; let currentItem; if(!loading && !error && data?.allProduct){ productFound = data.allProduct.find( (product: any) => product.slug.current === Router.query.product ); currentItem = cartDetails[productFound.id]; } useEffect((): void => { //since you are using typescript, you can use the optional chaining operator if (currentItem?.quantity > 0) { setDisableAddToCart(true); } else { setDisableAddToCart(false); } }, [currentItem]);