Is there a more efficient way to call multiple apis using graphql and react

Is there a more efficient way to call multiple apis using graphql and react


0

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])


Load 6 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *