I am using GraphQL and react on my client side project but I am not using a state management system like Redux
I have organised my api calls into custom hook files like below
const [getSomeData, { data: getSomeDataData, loading: getSomeDataLoading, error: getSomeDataError }] = useLazyQuery(
GET_SOME_DATA2,
{
client: dataClient,
fetchPolicy: "cache-and-network",
nextFetchPolicy: "cache-first",
}
);
return {
getSomeData,
getSomeDataData,
getSomeDataLoading,
getSomeDataError,
};
}
export default function useGetSomeData() {
const [getSomeData2, { data: getSomeData2, loading: getSomeDataLoading2, error: getSomeDataError2 }] = useLazyQuery(
GET_SOME_DATA,
{
client: dataClient,
fetchPolicy: "cache-and-network",
nextFetchPolicy: "cache-first",
}
);
return {
getSomeData2,
getSomeDataData2,
getSomeDataLoading2,
getSomeDataError2,
};
}
when importing my data to the component im finding myself using a lot of useEffects in order to keep the api calls / state updated like so
useEffect(()=>{
getSomeData({
variables})
},[])
useEffect(()=>{
getSomeData2({
variables})
},[])
useEffect(()=>{
if( getSomeDataData2 && !getSomeDataLoading2 && !getSomeDataError2){
setState(getSomeDataData2?.data)
}
},[getSomeDataData2 ,getSomeDataLoading2 ,getSomeDataError2])
useEffect(()=>{
if( getSomeDataData && !getSomeDataLoading && !getSomeDataError){
setState(getSomeDataData2?.data)
}
},[getSomeDataData ,getSomeDataLoading ,getSomeDataError])
i think im over using use effects and i want to limit the number of rerenders per component
does pulling each use effect into its own function and then calling each function in the one useEffect a better practice
getSomeData2({
variables})
}
const fetchData2 = () => {
getSomeData2({
variables})
}
useEffect(()=>{
fetchData()
fetchData2()
},[])
useEffect(()=>{
if( getSomeDataData2 && !getSomeDataLoading2 && !getSomeDataError2){
setState(getSomeDataData2?.data)
}
},[getSomeDataData2 ,getSomeDataLoading2 ,getSomeDataError2])
useEffect(()=>{
if( getSomeDataData && !getSomeDataLoading && !getSomeDataError){
setState(getSomeDataData2?.data)
}
},[getSomeDataData ,getSomeDataLoading ,getSomeDataError])