Call hook only if prop that it requires exist if not return default values

Question

In Next.js during SSR I get user object from session and ip address of client that performed request.

 return {
   props: {
     user,
     ipAddress,
   },
 };

User can exist but it can also be undefined if request is unauthenticated. I want to be able to:

If user is authenticated run react-query hook that uses user.id and fetches user settings.
If user is not authenticated provide default settings values that I have stored in config file.

const LandingPage = ({
  user,
  ipAddress,
}: LandingPageProperties): JSX.Element => {
  
  // User exist

  const { config } = useGetOwnSettingsQuery(
    {
      endpoint: 'http://localhost:3000/api/graphql',
      fetchParams: {
        headers: setFetchHeaders(),
      },
    },
    { userWhere: { id: user?.id } },
  );

  // User does not exist

  imported config from config.ts

  return ;
};

I really dont have good idea how to perform what I want, hooks do not like if I call them inside useEffect and they dont like if I return early to check if user exist.

user_8214832 · Answer

So, I guess I get your point, if user exist (means if the props is not undefined) then fetch config else use the default one right?

If you think this can will be used in other places in your application then I suggest go for building your own hook.

Ref: https://reactjs.org/docs/hooks-custom.html

function useUserConfig({user}) {

let [config, setConfig] = useState(defaultConfig) 

useEffect(() => { 
//...
setConfig(..code ) 
}, [user])

}

Then in your app, you can use it

let config = useUserConfig(props.user)

user_15633155 · Answer

Solved by introducing one more component that receives filtered id. Then that component fetch data and render authenticated version of needed component.

const LandingPage = ({
  session,
  ipAddress,
}: LandingPageProperties): JSX.Element => {
  const id = session?.user.id;
  return (
    
      {id ? (
        
      ) : (
        
      )}
    
  );
};

Call hook only if prop that it requires exist if not return default values

2 Answers