Pattern: Populating a collection "as needed" with multiple Queries throughout app - no "base" query.

This thread explores using various

useQuery

useQuery

hooks throughout the app to "feed" our collections, only adding records as they're called for throughout the app.

We don't want to force the user to load entire db tables since 95% of the time they will only use a small % of them. We do want to progressively build up a store and use it's querying methods to performantly select from the data that has been fetched.

As of 7/31 we have "manual sync update methods" per this issue: https://github.com/TanStack/db/issues/294

Though I'm not certain that quite addresses our goal, as it still seems to require the collection to be build on a default query. Within our app, we can't be certain which query will be called upon first to begin populating a given collection.

In theory I'd like to do this:

import { dispatchCollection, vehicleDispatchCollection, workOrderCollection } from '@/db/dispatch.collections'

export const useDbDispatchDateQuery = (date: string) => {
  return useQuery({
    queryKey: [GET_DB_DISPATCH_DATE_QUERY_KEY, { date }],
    queryFn: async () => {
      const result = await mainGraphQLClient.request(GET_DB_DISPATCH_DATE, { date })

      if (!result.dbDispatchesForDispatchDate) return
      const { dispatches, vehicleDispatches, workOrders } = result.dbDispatchesForDispatchDate

      dispatchCollection.utils.syncUpsert(dispatches)
      vehicleDispatchCollection.utils.syncUpsert(vehicleDispatches)
      workOrderCollection.utils.syncUpsert(workOrders)

      return result.dbDispatchesForDispatchDate
    },
    enabled: !!date,
  })
}

import { dispatchCollection, vehicleDispatchCollection, workOrderCollection } from '@/db/dispatch.collections'

export const useDbDispatchDateQuery = (date: string) => {
  return useQuery({
    queryKey: [GET_DB_DISPATCH_DATE_QUERY_KEY, { date }],
    queryFn: async () => {
      const result = await mainGraphQLClient.request(GET_DB_DISPATCH_DATE, { date })

      if (!result.dbDispatchesForDispatchDate) return
      const { dispatches, vehicleDispatches, workOrders } = result.dbDispatchesForDispatchDate

      dispatchCollection.utils.syncUpsert(dispatches)
      vehicleDispatchCollection.utils.syncUpsert(vehicleDispatches)
      workOrderCollection.utils.syncUpsert(workOrders)

      return result.dbDispatchesForDispatchDate
    },
    enabled: !!date,
  })
}

import { dispatchCollection, vehicleDispatchCollection, workOrderCollection } from '@/db/dispatch.collections'

export const useDbDispatchDateQuery = (date: string) => {
  return useQuery({
    queryKey: [GET_DB_DISPATCH_DATE_QUERY_KEY, { date }],
    queryFn: async () => {
      const result = await mainGraphQLClient.request(GET_DB_DISPATCH_DATE, { date })

      if (!result.dbDispatchesForDispatchDate) return
      const { dispatches, vehicleDispatches, workOrders } = result.dbDispatchesForDispatchDate

      dispatchCollection.utils.syncUpsert(dispatches)
      vehicleDispatchCollection.utils.syncUpsert(vehicleDispatches)
      workOrderCollection.utils.syncUpsert(workOrders)

      return result.dbDispatchesForDispatchDate
    },
    enabled: !!date,
  })
}

import { dispatchCollection, vehicleDispatchCollection, workOrderCollection } from '@/db/dispatch.collections'

export const useDbDispatchDateQuery = (date: string) => {
  return useQuery({
    queryKey: [GET_DB_DISPATCH_DATE_QUERY_KEY, { date }],
    queryFn: async () => {
      const result = await mainGraphQLClient.request(GET_DB_DISPATCH_DATE, { date })

      if (!result.dbDispatchesForDispatchDate) return
      const { dispatches, vehicleDispatches, workOrders } = result.dbDispatchesForDispatchDate

      dispatchCollection.utils.syncUpsert(dispatches)
      vehicleDispatchCollection.utils.syncUpsert(vehicleDispatches)
      workOrderCollection.utils.syncUpsert(workOrders)

      return result.dbDispatchesForDispatchDate
    },
    enabled: !!date,
  })
}

...with the hope that it would update any records with a matching key (unique ID), and insert any new records.

I'm already seeing a few related questions/issues/discord messages around a similar topic, so hopefully this thread can be a good centralized place to discuss the optimal approach for this. Pinging @Kyle Mathews since he helpfully pointed out the manual sync update.

GitHub

Add Manual Sync Updates API to @tanstack/query-db-collection · Iss...

Background The @tanstack/query-db-collection package integrates TanStack Query with TanStack DB collections, providing automatic synchronization between query results and collection state. Currentl...

Pattern: Populating a collection "as needed" with multiple Queries throughout app - no "base" query.

Similar Threads

Similar Threads

Similar Threads