I am encountering an issue with my react project that involves apollo-graphql. The error message states:
Invalid hook call. Hooks can only be called inside of the body of a function component
Below is the snippet of code triggering this error:
import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
// **************** COMPONENTS ****************
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";
export default function index() {
const insuranceId = useSelector((state) => state.mortgage.insuranceId);
// Panels Heading to show on all panels
useEffect(() => {
if (insuranceId) {
getMortgageData(insuranceId);
}
}, [insuranceId]);
function getMortgageData(insuranceId) {
const { loading, error, data } = useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
});
console.log(data);
}
return <section className="mortage-journey"></section>;
}
When running this code, I receive the mentioned error. I understand that useQuery is itself a hook and cannot be called within useEffect. Is there any workaround to access insuranceId from my redux state before passing it to the query?
Thank you!