How can I update a collection from different locations referencing the same queryKey?

[TotiCuervo]

I have abstracted a collection to a hook for reusability. I have a page, PageA, that uses that collection via a useLiveQuery. Nested in PageA is a component, ComponentB, where I would like to be able to manipulate the collection. My expectation is that I could call up and manipulate my collection and it would persist both in PageA and ComponentB. So far it seems like Collections are not global to the rest of the app but are isolated to the place where it is initialized. I am expected my change in ComponentB to have impacted all todos at the queryKey 'todos'.

I am trying to update a collection in a place separate from where the useLiveQuery is. I expected Collections to be similar to useQuery where I can reference the same queryKey in different components, make changes, and those changes would persist throughout the other places the query is used.

Is there something that I am missing in my understanding or am I just doing something wrong? I could prop drill the function I want to use, but that feels like it defeats the point.

Hook:

import { createCollection } from '@tanstack/react-db'
import { queryCollectionOptions } from '@tanstack/query-db-collection'
import { QueryClient } from '@tanstack/react-query'
import { useQueryClient } from '@tanstack/react-query'
import { useMemo } from 'react'
import {
    getTodos,
    createTodo,
    updateTodo,
    deleteTodo,
    Todo,
    CreateTodoData,
    UpdateTodoData
} from '@/lib/endpoints/todos'

function createTodosCollection(queryClient: QueryClient) {
    return createCollection(
        queryCollectionOptions<Todo>({
            queryClient,
            queryKey: ['todos'],
            queryFn: async () => {
                const response = await getTodos()
                return response.data
            },
            getKey: (item) => item.id,
            onInsert: async ({ transaction }) => {
                const { modified: newTodo } = transaction.mutations[0]
                const response = await createTodo(newTodo)
                return response.data
            },
            onUpdate: async ({ transaction }) => {
                const { original, modified } = transaction.mutations[0]
                const response = await updateTodo(original.id, modified)
                return response.data
            },
            onDelete: async ({ transaction }) => {
                const { original } = transaction.mutations[0]
                await deleteTodo(original.id)
            }
        })
    )
}

// Hook to get the collection instance with queryClient from context
export function useTodosCollection() {
    const queryClient = useQueryClient()
    return useMemo(() => createTodosCollection(queryClient), [queryClient])
}

PageA

'use client'

export default function TodosDebugPage() {
    const todosCollection = useTodosCollection()

    const { data: todos, isLoading } = useLiveQuery((q) =>
        q.from({ todo: todosCollection }).orderBy(({ todo }) => todo.createdAt, 'desc')
    )

    return (
        ...
    )
}

ComponentB

export function ComponentB() {
    const todosCollection = useTodosCollection()
    
    const form = useForm({
        defaultValues: {...} as Todo,
        onSubmit: async ({ value }) => {
            try {
                 todosCollection.insert(value)
            } catch (err: any) {
               ...
            }
        }
    })

    return (
       ...
    )
}

[joshuadutton]

Don't use a hook to create your collection. Your collections should be defined top level in memory (basically outside of any React component). Note: this is the pattern for query clients with both Tanstack Query and Tanstack DB as well since they need to be global so that caching can be coordinated globally. So your collection is defined at the top level and then used with the live query hooks to bring them into the React world.