Is there a way to call different rtq hooks based on state or prop? Maybe by using skip?

Question

I have a component in which i want to call different rtkquery hooks based on a condition. I am making a twitter clone and on the home page i want to call a getPostsList and on the profile page i want to call a getRetweetedPostsList but since the entire page is same apart from this i am using a single component. Now i want to call different hooks in the PostList component based on props? Is this possible? Maybe by using skip? Also is this against best practices?

index.tsx

import type { NextPage } from 'next'
import { useSession} from 'next-auth/react';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import LoadingScreen from '../components/LoadingScreen';
import PostsSection from '../components/Posts/PostsSection';

const Home: NextPage = () => {  
  const {data:session,status}=useSession();
  return (
  <>
    
    {!session && status==='unauthenticated' && 
     <SignUpLoginFullScreen/>
    }
    
    {!session && status==='loading' && 
      <LoadingScreen/>
    }
    
    {session && status==='authenticated' &&
        <PostsSection/>
     }

  </>
  )
}

export default Home

PostSection.tsx

import React from 'react'
import { useSession} from 'next-auth/react';
import Sidebar from '../Sidebar';
import Search from '../Search';
import PostsList from '../Posts/PostsList';
import AddPostForm from '../Posts/AddPostForm';
import Modal from '../Modal';
import UsersList from '../UsersList';

const PostsSection=()=>{

    const {data:session,status}=useSession();
    return (
        <>
            <Modal>
            <AddPostForm />
            </Modal>
            <div className='flex mx-32 gap-x-5'>
            <Sidebar/>
            <main className='mr-5 pt-8 flex-1 basis-[45%] border-x-2 border-stone-100 min-h-screen'>
                <PostsList currUserId={session?.userId}/>
            </main>
            <div className='basis-[25%]'>
            <Search/>
            <UsersList currentUserId={session?.userId}/>
            </div>
            </div>
        </>
    )
}

export default PostsSection

PostList.tsx

import React from 'react'
import {useGetPostsQuery} from '../../services/apiSlice';
import LoadingSpinner from '../LoadingSpinner';
import Post from './Post';

interface PropsType{
  currUserId:string|any
}

const mapPosts=(posts:any,currUserId:string)=>{
  return posts?.map((post:any) => (
    <Post key={post.id} currUserId={currUserId} {...post}/>
  ))
};

const PostsList:React.FC<PropsType>= ({currUserId}) => {

  const {data:posts,isLoading,error,isError} = useGetPostsQuery(currUserId);
 
  let content;

  content=React.useMemo(()=>mapPosts(posts,currUserId), [posts]);

  if(isLoading){
    content=<LoadingSpinner/>
  }

  else if(isError){
      let a:any=error
      content=<p color='red'>{a?.message}</p>
  }

  else if(posts){
    if(posts.length<=0){
      console.log('aye')
      content=<p color='black'>No tweets yet</p>;
      return null;
    }
  }

  return (
    <section className="posts-list">
    {content}
    </section>
  )
}

export default PostsList;

I want to call the PostList component from the profile page but with some props and based on that props i want to call a different hook to which i am calling for the index page.

Profile.tsx

import React from 'react';
import { useSession } from 'next-auth/react';
import LoadingScreen from '../components/LoadingScreen';
import Sidebar from '../components/Sidebar';
import Search from '../components/Search';
import PostsList from '../components/Posts/PostsList';
import AddPostForm from '../components/Posts/AddPostForm';
import Modal from '../components/Modal';
import UsersList from '../components/UsersList';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import PostsSection from '../components/Posts/PostsSection';

export default function Profile() {
  const {data:session,status}=useSession();
  return (
  <>
    
    {!session && status==='unauthenticated' && 
      <SignUpLoginFullScreen/>
    }
    
    {!session && status==='loading' && 
      <LoadingScreen/>
    }
    
    {session && status==='authenticated' &&
        <PostsSection/>
      }

  </>
  )
}

Answer 1

I would use different components to call different hooks, then pass the data to a reusable common component.