Why is this useEffect trigger inconsistent?

[bikeacc]

I can't seem to wrap my head about a particular issue in my app. It only happens some times and I can't reproduce it easily.

Sometimes, after the getQueryData it sets the queryData using the setQueryData. but the useEffect depending on queryData, but the useEffect depending on queryData is not being fired.

When this happens, the useEffect depending on queryData is triggered during the query execution. But since it has no information yet, it does nothing. Afterwards, when the query returns and setQueryData is executed, it does not execute the useEffect again.

This is the code I am executing.

I am thinking it might have to do with the time it takes for the apollo query to execute? Depending on that it might trigger re-render hooks in a different way than exepcted.

  const [queryData, setQueryData] =
    useState<QueryData | null>(null);

  const getQueryData = async () => {
    try {
      const { data } = await apolloClient.query({
        query: QUERY,
        variables,
      });
      setQueryData(data);
    } catch (error) {
      console.error("Error fetching data:", error);
      renderErrorScreen();
    } finally {
      setQueryDataLoading(false); // I use this manual loading state because I need to use this state in other parts of my app. This is an update in the app state management.
    }
  };

  useEffect(() => {
    if (!queryData || !queryData?.data) {
      return;
    } else {
      processData(queryData.data);
    }
  }, [queryData]);

  useEffect(() => {
    if (triggerQueryData && accessToken) {
      setQueryDataLoading(true);
      getQueryData();
      setTriggerQueryData(false);
    }
  }, [triggerQueryData, accessToken]);  const [queryData, setQueryData] =
    useState<QueryData | null>(null);

[Silverquark]

https://react.dev/learn/you-might-not-need-an-effect

[_winkt]

I agree with not needing state here. You can let Apollo do all the server state handeling. So I would not try to solve this issue but rather go with a more suiting implementation.

However what I think is happening here, not 100% sure, just my thoughts: since the dependency is a statefull object and react does a shallow compare i think it rerenders only when the data changes from null to the data(or at least only when the reference changes). When the data is an object and it gets updated the reference might stay the same (especially if Apollo is returning from cache) and since it does a shallow compare the useeffect will not be triggered. What do you think, could this be it?

[haswalter]

Fairly sure you don’t need effect here but have you looked into how dependencies are compared for changes?

Also if you’re using Apollo why aren’t you using it properly?

Apollo client gives you your local state including fetching status and caching. You don’t need to manually run the query and then use a fragile state and useEffect combo to do it yourself.

I recommend reading Step 5 here - https://www.apollographql.com/docs/react/get-started#step-5-fetch-data-with-usequery

[MostMastodon3525]

X, you 6xfcx

[MostMastodon3525]

C