help with react-query reusable custom hook

[branlok]

Hello, I was wondering if someone could review this. I have here a custom hook that takes a directive variable and applies the conditional fetching logic to react query.

Previously, i created two separate useInfiniteQuery now its only one function with more reusable design. I was wondering if this is a right approach or should i leave it separately like i've done before. One limitation i see here is that when user is on the one of the directive view, the other becomes inactive (ie post-fresh, feed-inactive and vice versa). I suppose this limits the ability to refetch remotely from other component as there are no observables. is this approach sufficient for most features? does any one know if there is more obvious issue of this pattern? Much appreciated.

//reusable component
 let { getPosts } = usePostGetters(directive);

//reusable custom hook
export default function usePostGetters(directive) {
  let { userId } = useAuth();
  let { userData } = useUser();
  const followersArray = userData.data.following;

  const getPosts = useInfiniteQuery(
    ["getPosts", directive],
    ({ pageParam = false }) => {
      if (pageParam) {
        if (directive == "posts") return fetchAfterInitialPosts(userId, pageParam);
        if (directive == "feed") return getPostsAfterInitialFromFollowers(followersArray, pageParam)
      } else {
        if (directive == "posts") return fetchInitialPosts(userId); 
        if (directive == "feed") return getInitialPostsFromFollowers(followersArray);
      }
    },
    {
      getNextPageParam: (lastPage, allPage) =>
        lastPage.length == 0
          ? undefined
          : lastPage[lastPage.length - 1].createdOn,
      enabled:  true,
      refetchOnMount: directive == "feed" ? true : false
      staleTime: 60 * 1000,
      cacheTime: 60 * 1000,
    }
  )

posts

feed