T
TanStack•3y ago
metropolitan-bronze

I currently have custom hooks for each query/mutation of mine. Not sure how to implement useQueries.

Hey there, so I have many custom hooks that are used throughout my application. My goal right now is to use a few of those custom hooks in a useGetInitialData hook and return a combined loading state to show the splash screen until this is complete. Here are a few examples of my queries and how I am planning on creating that useGetInitialData hook. useGetUserProfile.tsx 
const useGetUserProfile = () => {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-user-profile', userId];

  return useQuery(key, () => getUserProfile(userId).then(result => result), {
    enabled: !!userId,
  });
};
const useGetUserProfile = () => {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-user-profile', userId];

  return useQuery(key, () => getUserProfile(userId).then(result => result), {
    enabled: !!userId,
  });
};
useGetFriends.tsx 
function useGetFriends() {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-friends', userId];

  return useQuery(key, () => getFriends(userId), { enabled: !!userId });
}
function useGetFriends() {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-friends', userId];

  return useQuery(key, () => getFriends(userId), { enabled: !!userId });
}
useGetFriendRequests.tsx 
function useGetFriendRequests() {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-friend-requests', userId];

  return useQuery(key, () => getFriendRequests(userId), { enabled: !!userId });
}
function useGetFriendRequests() {
  const { data: userSession } = useGetUserSession();
  const userId = userSession?.user.id!;

  const key = ['get-friend-requests', userId];

  return useQuery(key, () => getFriendRequests(userId), { enabled: !!userId });
}
So the above are a few examples of how my queries are set up. This is what I was thinking of doing: useGetInitialData.tsx 
function useGetInitialData() {
  const { isLoading: gettingUserProfile } = useGetUserProfile();

  const { isLoading: gettingFriends } = useGetFriends();

  const { isLoading: gettingFriendRequests } = useGetFriendRequests();

  const loadingComplete =
    !gettingUserProfile && !gettingFriends && !gettingFriendRequests;

  return loadingComplete;
}
function useGetInitialData() {
  const { isLoading: gettingUserProfile } = useGetUserProfile();

  const { isLoading: gettingFriends } = useGetFriends();

  const { isLoading: gettingFriendRequests } = useGetFriendRequests();

  const loadingComplete =
    !gettingUserProfile && !gettingFriends && !gettingFriendRequests;

  return loadingComplete;
}
Would this be the right approach with how I have my queries set up? I don't think I would be able to use useQueries with this setup. I would love any feedback on how I can improve this or if I'm missing something regarding react-query. Thank you.
4 Replies
passive-yellow
passive-yellow•3y ago
Composing hooks is perfectly valid; you're right in that (as far as I know) you can't use the custom hooks with useQueries as you'd need to pass an array of objects describing the query keys and functions (https://tanstack.com/query/v4/docs/react/reference/useQueries). The only thing I would say is that you're only returning a boolean from the hook. Would it make sense to use this hook for the data and error states too? You could simulate a useQueries return type interface by not destructuring the queries and returning an array of the queries instead, something like this: 
const userProfileQuery = use...();
const friendsQuery = use...();
const friendRequestsQuery = use...();

return [
  userProfileQuery,
  friendsQuery,
  friendRequestsQuery
];
const userProfileQuery = use...();
const friendsQuery = use...();
const friendRequestsQuery = use...();

return [
  userProfileQuery,
  friendsQuery,
  friendRequestsQuery
];
Having said that, I think I'd prefer an object return type here. To add to this, if these custom hooks aren't used in isolation (are always called together) then perhaps it would make sense to drop the custom hooks in favour of one that uses useQueries internally. Food for thought.
metropolitan-bronze
metropolitan-bronzeOP•3y ago
Good morning, thank you for your reply! I I like the idea of returning all the other states too so I will make that change. I will also look into changing this into a useQueries.
passive-yellow
passive-yellow•3y ago
Awesome! If you need the separate queries, I think returning an object with the three queries in is a sensible approach 🙂
metropolitan-bronze
metropolitan-bronzeOP•3y ago
Yeah knowing if any queries failed when getting the initial data should be logged in Sentry or something lol

Did you find this page helpful?