How to fetch multiple records of transformed data

[garbetjie]

Hello 👋🏻

I'm a relatively new user to vue-query - I hope this isn't somewhat of a silly question that shows my misunderstanding of how composables should be architected when using vue-query.

I have three resource types that I'm dealing with: organisations, users and projects. A project belongs to a user, and a user belongs to a project.

I also have the following composables that I'm making use of:

function useOrganisationDetails(id: MaybeRefOrGetter<string|undefined>) {
  return useQuery({ ..., enabled: () => id !== undefined })
}

function useUserDetails(id: MaybeRefOrGetter<string>) {
  const orgId = ref<string>()
  const { data: org, suspense } = useOrganisationDetails(orgId)

  return useQuery({
    queryFn: async () => {
      const user = await fetchUserFromApi()
     orgId.value = user.orgId
     
     return user
    },
    select: async (user) => {
      await suspense()

      return { ...user, organisation: org.value }
    }
}

function useProjectList() {
  return useQuery({
    queryFn: async ()=> {
      const projects = await fetchProjectsFromApi()
      const userIds = projects.map(p => p.userId)
      const users = /* how to get users using results from useUserDetails()? */

      return projects.map(
        p => p.user = users[p.userId]
      )
    }
  })
}

How would I go about using the selected result from the useUserDetails composable in the result of the useProjectList composable?

I've come across (https://github.com/TanStack/query/discussions/2091)[this discussion] that is kind of similar, and I've looked at https://tkdodo.eu/blog/react-query-data-transformations to see if it helps - but I'm a little stumped.

I'm starting to think I might actually need to make another composable that is called useMultipleUserDetails() which makes use of useQueries() to fetch queries in parallel - would this be the way to go about it?

I think it's doing my brain in a little bit, trying to figure it out.

[Colonel-Sandvich]

It looks like you're forcing yourself to turn all of your queries into composables. I get the initial appeal but while you're still figuring it out I'd definitely recommend not trying to encapsulate your queries in composables; it just makes them harder to deal with especially while you're prototyping.

As for the projectList, I don't know your project but instead of manually stitching together the results of many fetchUserFromApi calls with one fetchProjectsFromApi call in the frontend why don't you make another endpoint that can return projects with the user details attached? This would vastly simplify the FE and avoid doing N+1 api calls (possibly very slow)

[garbetjie]

How would I use a query not in a composable - a useQuery straight in a component?

I could add in the user & organisation into the project list for now, but I know there are other endpoints that I'll be interacting with where it won't be possible - hence me trying to figure it out now 😅