[BEST PRACTICE] - Interdependent queries in the page loader function

Hi guys !

I'm wondering what is the best way to fetch multiple data, using TanStack Query, in the page loader function ? Note that almost every request i need, depends on the result of the request n-1

I would do something like :

loader: async () => {
    const res1 = await queryClient.ensureQueryData(...options)
    const res2 = await queryClient.ensureQueryData(...options + res1)
    const res3 = await queryClient.ensureQueryData(...options + res2)
    return {res1, res2, res3}
})

loader: async () => {
    const res1 = await queryClient.ensureQueryData(...options)
    const res2 = await queryClient.ensureQueryData(...options + res1)
    const res3 = await queryClient.ensureQueryData(...options + res2)
    return {res1, res2, res3}
})

loader: async () => {
    const res1 = await queryClient.ensureQueryData(...options)
    const res2 = await queryClient.ensureQueryData(...options + res1)
    const res3 = await queryClient.ensureQueryData(...options + res2)
    return {res1, res2, res3}
})

loader: async () => {
    const res1 = await queryClient.ensureQueryData(...options)
    const res2 = await queryClient.ensureQueryData(...options + res1)
    const res3 = await queryClient.ensureQueryData(...options + res2)
    return {res1, res2, res3}
})

But it feels wrong

It might be a misconception of how my API is made and the data is returned

[BEST PRACTICE] - Interdependent queries in the page loader function

Similar Threads

Similar Threads

Similar Threads