Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Nested includes are undefined on next render after collection.update

Chiusa
  • Qualcosa non va?
#1,635 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
databases, frontend

Direzione di ricerca

Inizia con la query annidata useLiveQuery e la chiamata parent documentCollection.update mostrate nella riproduzione. Riproduci il problema con le collection di documenti, schemi e campi, quindi traccia la propagazione dell’aggiornamento ai risultati annidati. Il lavoro è completato quando i dati annidati di schemi e campi vengono renderizzati dopo collection.update e un aggiornamento, senza forzare un re-render di React non correlato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • I've validated the bug against the latest version of DB packages
    Packages:
    "@tanstack/db": "^0.6.7",
    "@tanstack/electric-db-collection": "^0.3.5",
    "@tanstack/react-db": "^0.1.85",

Describe the bug
I have a useLiveQuery with nested collections. When I call update on the parent collection, the nested collections are undefined. Sometimes refreshing the page the nested items are still undefined. A hard refresh is required.

This is using electric-sync. I can see the successful write call and shape update with matching txid.

If you force a re-render, the nested objects appear. See Additional Context below.

// collection
// the other two collection funcs are almost identical 
export const createDocumentCollection = (labId: number) =>
  createCollection(
    electricCollectionOptions<DocumentRow>({
      id: `documents:${labId}`,
      shapeOptions: {
        url: electricSyncUrl,
        params: {
          table: 'documents',
          where: 'lab_id = $1',
          params: { '1': String(labId) },
          columns: SYNC_COLUMNS,
        },
        fetchClient: (input, init) => fetch(input, { ...init, credentials: 'include' }),
        columnMapper: snakeCamelMapper(),
        parser: {
          data: (data) => JSON.parse(data),
        },
      },
      getKey: (row) => row.id,
      onUpdate: async ({ transaction }) => {
        const { original, changes } = transaction.mutations[0]
        const response = await DocumentService.updateDocument(labId, original.id, changes)
        return { txid: response.txid }
      },
    })
  )


// query
const { data: documentQuery } = useLiveQuery(
    (q) =>
      q
        .from({ document: documentCollection })
        .where(({ document }) => eq(document.id, documentId))
        .select(({ document }) => ({
          ...,
          schema: toArray(
            q
              .from({ schema: schemaCollection })
              .where(({ schema }) => eq(document.schemaId, schema.id))
              .select(({ schema }) => ({
                ...,
                fields: toArray(
                  q
                    .from({ field: fieldCollection })
                    .where(({ field }) => eq(field.schemaId, schema.id))
                    .select(({ field }) => field)
                ),
              }))
          ),
        })),
    [documentCollection, schemaCollection, fieldCollection, documentId]
  )
 
 const document = documentQuery[0] 
 const schema = document.schema[0] // comes up undefined 
 const fields = schema?.[0].fields ?? []

 const update = (name: string, v: string) => {
    return documentCollection.update(documentId, (draft) => {
       draft[name] = v
    })
  }

To Reproduce
Steps to reproduce the behavior:

  1. Setup nested include collection like above example
  2. Call collection.update where collection is the parent collection (documentCollection in example)
  3. Observe nested objects are now undefined
  4. Refresh the page
  5. Observe nested objects are now undefined

Expected behavior
I would expect the nested data to render after the update.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop:

  • OS: macOS
  • Browser: chrome
  • Version 148.0.7778.97

Additional context
If i add a simple useState counter to force a re-render, the nested collections appear

const [count, setCount] = useState(0)

return (
  <>
    <button onClick={() => setCount((c) => c + 1)}>{count}</button>
    ...rest of my component
  </>
)
Lingua principale
TypeScript
Stelle
3.9k
Fork
272
Merge medio
1g 1h
PR unite (30g)
210

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/db

Tutte le issue di TanStack/db

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.