whats the best way to make multiple queries?

[cannap]

hi,
first thanks for this awesome lib!

what is the best way to make multiple queries?

like this?

const { state: customerState, isLoading: customerLoading, status: customerStatus } = useQuery<ICustomer>({
  key: ['customers', Number(route.params.id)],
  query: () => $api(`v1/admin/customer/${route.params.id}`),

})

const { state: clientsState, status: clientsStatus } = useQuery<IClient[]>({
  key: ['clients', Number(route.params.id)],
  query: () => $api(`v1/admin/customer/clients`),
})

[posva]

I'm not sure to understand the question but here is what I would change in the examples:

• Remove the type param ICostumer and ICustomer[] and, if needed, use as ICustomer in the API call
• transform key into a function to reatin reactivity: () => ['customers', Number(route.params.id]
• The clients one doesn't seem to use the id from the route so maybe remove it from the key

Think of each query as a single source of truth that can be cached and deactivated.

[cannap]

thank you will give a try i trought i have to use promise.all or something

[posva]

oh, I see from your screenshots, that the second useQuery() does use the route.params.id, then it should be part of the key. In the code sample, it wasn't there.

But yeah, if you have multiple queries, you can just use them directly, that's about it

[cannap]

yea i just removed it i am not sure i need to use it there :D but i think i need to investigate more and then i will tell you about the flow how i use it and then we can see :D maybe i need more exmaples :D

[jd-solanki]

Sorry for hoping in and diverting the question because I'm eager to know.

1. Why we have key as array and not string?
2. Can we auto generate the key like useFetch from nuxt? (You know naming things are hard 😓 )

[posva]

1. See query keys in docs
2. they cannot be generated because you need to reference them in other places