T
TanStack•2mo ago
xenial-black

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());
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());
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?
No description
1 Reply
raw-harlequin
raw-harlequin•2mo ago
You can access the query client inside queryFn, so this can probably work 
const amountQueryOptions = () => queryOptions({
  queryFn: async ({ client }) => {
    const transactions = await client.ensureQueryData(transactionQueryOptions());
    return calculateAmount(transactions)
  }
})
const amountQueryOptions = () => queryOptions({
  queryFn: async ({ client }) => {
    const transactions = await client.ensureQueryData(transactionQueryOptions());
    return calculateAmount(transactions)
  }
})
Or you can make amountQueryOptions to receive transactions argument like this, but do mind you need to put transactions as a queryKey (I prefer this one): 
const amountQueryOptions = (transactions) => queryOptions({
  queryFn: async () => {
    return calculateAmount(transactions)
  },
  queryKey: ["amount", transactions]
})
const amountQueryOptions = (transactions) => queryOptions({
  queryFn: async () => {
    return calculateAmount(transactions)
  },
  queryKey: ["amount", transactions]
})

Did you find this page helpful?