T
TanStack•3y ago
rare-sapphire

Vue composables pattern

Is it best to have a composable per query/mutation? Or a single composable that returns them all? For example 
export const useUserQueries = () => {
  const getUsers = () =>
    useQuery(['users'], fetchUsers, {
      placeholderData: [],
    });

  const getUser = (id: string) => useQuery(['users', 'view', id], () => fetchUser(id));

  return {
    getUsers,
    getUser,
  };
};
export const useUserQueries = () => {
  const getUsers = () =>
    useQuery(['users'], fetchUsers, {
      placeholderData: [],
    });

  const getUser = (id: string) => useQuery(['users', 'view', id], () => fetchUser(id));

  return {
    getUsers,
    getUser,
  };
};
or 
export const useGetUser = () => useQuery(['users'], fetchUsers, {
      placeholderData: [],
    });
export const useGetUser = () => useQuery(['users'], fetchUsers, {
      placeholderData: [],
    });
4 Replies
ambitious-aqua
ambitious-aqua•3y ago
Hi, I do not see anything inherently wrong about returning multiple queries. I saw multiple times some kind of factories for useQuery. Ex. 
const todoQueries = {
  list: () => ({ queryKey: ['todos'], queryFn: fetchTodos })
  detail: (id) => ({ queryKey: ['todos', id], queryFn: () => fetchTodo(id) })
}
const todoQueries = {
  list: () => ({ queryKey: ['todos'], queryFn: fetchTodos })
  detail: (id) => ({ queryKey: ['todos', id], queryFn: () => fetchTodo(id) })
}
The benefit of returning only options vs returning useQuery would be more visible in v5 where you will be able to use the same options in other methods, like prefetchQuery or invalidateQueries
rare-sapphire
rare-sapphireOP•3y ago
Yeah I was thinking of just have all the gets and mutations in one export Just have to remember to call within setup 
export const useUserMutations = (id: string) => {
  return {
    restrictUserMutation: restrictUser(id),
    unrestrictUserMutation: unrestrictUser(id),
    deactivateUserMutation: deactivateUser(id),
    reactivateUserMutation: reactivateUser(id),
    updateUserRolesMutation: updateUserRoles(id),
    updateUserGroupsMutation: updateUserGroups(id),
    updateUserPasswordMutation: updateUserPassword(id),
    updateUserMutation: updateUser(id),
  };
};
export const useUserMutations = (id: string) => {
  return {
    restrictUserMutation: restrictUser(id),
    unrestrictUserMutation: unrestrictUser(id),
    deactivateUserMutation: deactivateUser(id),
    reactivateUserMutation: reactivateUser(id),
    updateUserRolesMutation: updateUserRoles(id),
    updateUserGroupsMutation: updateUserGroups(id),
    updateUserPasswordMutation: updateUserPassword(id),
    updateUserMutation: updateUser(id),
  };
};
Sorry to ping you on this but was just doing some prior reading - can you elaborate on what you mean regarding options here inV5? @MrMentor I'm currently rebuilding and was hoping you could shed some light on the best way to go about the above considering the options object usage in v5?
ambitious-aqua
ambitious-aqua•3y ago
What I meant that it might be more convenient to just export set of options that you can pass to useQuery instead of already instantiated useQuery. This way you will be able to use the same options object to invalidate query, setQueryData, etc. Returning options objects is just more flexible IMO.
rare-sapphire
rare-sapphireOP•3y ago
Yeah okay gotchya... so re-use options objects but have queries themselves be in the component Or in a composable

Did you find this page helpful?