Apollo client queries and data store when connected to multiple components

I have 3 different components that use the same graphql query. This example would be GET_USERS query. This is used when looking for users to message in the messaging respective tab and also when inviting users for actions and tagging them when creating posts.

the problem I'm having and trying to figure out how to handle is that its not always the case that only one is rendered at a time. A user might click the message tab and then go to tag a user in the post tab. Problem: when he comes back to the message tab it now has re-rendered with the state of the query that was called from the tagging.

Any suggestions on how to set up the state with Apollo and the queries in general to avoid this issue. At the end of the day my backend is one "route" or resolve function for the specific action.

So did find a way that works but seems more of a workaround than a real solution so still looking for suggestions / feedback from interested parties.

My solution however is the following:

  const didMount = useRef(null);
  useFocusEffect(
    useCallback(() => {
      if (didMount.current) {
        setSearchState({
          searchValue: searchState.searchValue,
          queryNearbyUsers: searchState.queryNearbyUsers,
          skip: 0,
          isRefreshing: true,
        });
      }

      return () => didMount.current = true;
    }, []),
  );

My setSearchState here is just connected to a debounce but look at this as basically calling a refetch from the useQuery hook given by Apollo. I'm tracking whether the screen is mounted already via useRef / didMount. Then doing a check with useFocusEffect I can check to see if it has already been focussed previously and if so making a request to get the information that corresponds to all rendered data on screen.