How to chain queries correctly?

[Perdolique]

I'm trying to perform two queries, where the second one depends on the result of the first. For example:

const { state: user } = useQuery({
  key: ['user']
})

const { state: userOrders } = useQuery({
  key: ['userOrders', user.data.id]
})

The problem is that user.data.id is initially undefined, so it can't be used in the second query. However, I need to wait for the second query to finish before rendering the component.

[posva]

I would use data loaders with unplugin Vue router for this

[Perdolique]

Some requests aren't connected to a specific route and should be called directly in a particular component when it renders, or when the user performs a client-side action. This is quite a common use case, so my first thought was maybe Pinia Colada has a built-in handling for such cases by chaining/grouping such requests.

I tried to use the TSQ approach by using user.data.id in enabled flag while it's undefined, but it seems like Pinia Colada doesn't support such type as a key value, and I also read it will create an invalid cache entry ['userOrders', undefined] that seems to be not okay (or is it ok?).

[posva]

I think you should rethink how your queries are consumed so the user.data.id is always present. As you noted, this is pretty much #283 (comment). Having enabled false still requires creating an entry so userOrders is defined. That why I believe you should rethink the way the orders query is consumed.

---

You can ensure a query within another query with query options (typed and great when queries or keys are used in multiple places):

import { defineQueryOptions, useQueryCache } from '@pinia/colada'

const USERS_QUERY_KEYS = {
  root: ['users'] as const,
  byId: (id: string) => [...USERS_QUERY_KEYS.root, id] as const,

  orders: (id: string) => [...USERS_QUERY_KEYS.byId(id), 'orders'] as const,
}

export const userQuery = defineQueryOptions((id: string) => ({
  key: USERS_QUERY_KEYS.byId(id),
  query: async () => ({
    id,
    name: `User ${id}`,
  }),
}))

export const userOrdersQuery = defineQueryOptions((id: string) => {
  // maybe this should be passed as a second parameter to the function?
  const queryCache = useQueryCache()

  return {
    key: USERS_QUERY_KEYS.orders(id),
    query: async () => {
      const user = await queryCache.refresh(queryCache.ensure(userQuery(id)))

      return {
        user,
        orders: [],
      }
    },
  }
})

But it still requires an id and I think this id should be ensured at a component level that takes it as a required prop: <UserOrders v-if="user.id" :user />

[Perdolique]

Yep. If user.id is ensured, then no problems handling the logic, just thought it might be a built-in way to handle it somehow in the Pinia Colada that I hadn't noted before. But I guess it makes sense to rethink the whole structure otherwise. Thanks.