Synchronous data selection

[tusgavomelo]

Hello! Just to give you guys some context, I started learning about react-query a week ago and I come from a redux background. Let me create an example scenario:

I have an endpoint /user-profile that returns the following JSON:

{
  name,
  avatar,
  emali,
  phone,
  address,
}

Following react-query docs I would end up with a very simple hook that should look something like this:

const useUserProfile = () => {
  return useQuery('userProfile', () => getUserProfile())
}

Then I just need to call useUserProfile hook on any component I need usar data. This is my app structure:

<>
  <UserAvatar />
  <UserContactInfo />
  <UserAddress />
</>

I need to call useUserProfile in all my 3 components and it will return { data, isLoading, error, etc...}, so I need to always assume that data might not there during the first render. That causes a lot of duplicate logic like if (isLoading) or if (data) on every component that uses this hook.
Is there any different way to access the same information in different components in a sync way? I'm just wondering if there's something similar to useSelector from react-redux.

[TkDodo]

Even with useSelector from redux, the data that you select can possibly be undefined if you load it from the server first. So useSelector(state=> state.userProfile) would return UserProfile | undefined. It’s just the nature of async data that it might not be there on any specific render…