queryOptions dependancies

I have the following code (screenshot).

In my tanstack start loader for a route I am doing:

        await context.queryClient.ensureQueryData(transactionQueryOptions());
        await context.queryClient.ensureQueryData(amountQueryOptions());

        await context.queryClient.ensureQueryData(transactionQueryOptions());
        await context.queryClient.ensureQueryData(amountQueryOptions());

        await context.queryClient.ensureQueryData(transactionQueryOptions());
        await context.queryClient.ensureQueryData(amountQueryOptions());

        await context.queryClient.ensureQueryData(transactionQueryOptions());
        await context.queryClient.ensureQueryData(amountQueryOptions());

and then on the frontend:

const { data: transactions } = useSuspenseQuery(transactionQueryOptions());
const { data: amount } = useSuspenseQuery(amountQueryOptions());

const { data: transactions } = useSuspenseQuery(transactionQueryOptions());
const { data: amount } = useSuspenseQuery(amountQueryOptions());

const { data: transactions } = useSuspenseQuery(transactionQueryOptions());
const { data: amount } = useSuspenseQuery(amountQueryOptions());

const { data: transactions } = useSuspenseQuery(transactionQueryOptions());
const { data: amount } = useSuspenseQuery(amountQueryOptions());

This feels wasteful as I am querying the transactions information twice. What would be the appropriate pattern here to have pass queryOptions for the amount query the current query data of the transactions query on both the frontend and backend (loader). Do I just pass it in as a parameter?

queryOptions dependancies

Similar Threads

Similar Threads

Similar Threads