quickest-silver

collection insert rollback instantly

perhaps doing it wrong but when i click on insert the data do

[{"id": 1}]
[{"id": 1}, {"id": 2}]
[{"id": 1}]

[{"id": 1}]
[{"id": 1}, {"id": 2}]
[{"id": 1}]

and theres no refetch

import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { createCollection, useLiveQuery } from "@tanstack/react-db";
import { QueryClient } from "@tanstack/react-query";
import { Pressable, Text, View } from "react-native";

const queryClient = new QueryClient()

const todoCollection = createCollection(
  queryCollectionOptions({
    queryClient: queryClient,
    queryKey: ['todos'],
    queryFn: async () => {
      console.log("refetch")
      return [{ id: 1 }]
    },
    getKey: (item) => item.id,
    onInsert: async () => {
      return { refetch: false }
    }
  })
)

export default function Index() {
  const { data: todos } = useLiveQuery((q) =>
    q.from({ todo: todoCollection })
  )

  console.log(todos)

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Pressable onPress={() => todoCollection.insert({ id: 2 })}><Text>insert</Text></Pressable>
    </View>
  );
}

import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { createCollection, useLiveQuery } from "@tanstack/react-db";
import { QueryClient } from "@tanstack/react-query";
import { Pressable, Text, View } from "react-native";

const queryClient = new QueryClient()

const todoCollection = createCollection(
  queryCollectionOptions({
    queryClient: queryClient,
    queryKey: ['todos'],
    queryFn: async () => {
      console.log("refetch")
      return [{ id: 1 }]
    },
    getKey: (item) => item.id,
    onInsert: async () => {
      return { refetch: false }
    }
  })
)

export default function Index() {
  const { data: todos } = useLiveQuery((q) =>
    q.from({ todo: todoCollection })
  )

  console.log(todos)

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Pressable onPress={() => todoCollection.insert({ id: 2 })}><Text>insert</Text></Pressable>
    </View>
  );
}

18 Replies

wise-white•3w ago

Once the mutation handler in the onInsert returns, the optimistic state is removed - its essentially rolling back as nothing has been added to the syned state. refetch: false is designed to be used with the utils.writeDelete/Insert/Update so that you can update the synced state from the mutation handler.

quickest-silverOP•3w ago

i have to use createOptimisticAction ? i want to add something localy from a query to the collection without refetching the whole query without syncing can that be done ?

wise-white•3w ago

    onInsert: async ({ transaction, collection }) => {
      const { modified } = transaction.mutations[0]
      collection.utils.writeInsert(modified)
      return { refetch: false }
    }

    onInsert: async ({ transaction, collection }) => {
      const { modified } = transaction.mutations[0]
      collection.utils.writeInsert(modified)
      return { refetch: false }
    }

I think thats the code, but haven't double checked.

quickest-silverOP•3w ago

gonna try thx

wise-white•3w ago

^ tweaked Nope hang on No that is right

quickest-silverOP•3w ago

thanks you really ive been struggling for an hour

ambitious-aqua•3w ago

https://tanstack.com/db/latest/docs/collections/query-collection#direct-writes-advanced

Query Collection | TanStack DB Docs

Query Collection Query collections provide seamless integration between TanStack DB and TanStack Query, enabling automatic synchronization between your local database and remote data sources. Overview...

quickest-silverOP•3w ago

thx so i can just call the writeInsert from the onPress ? instead of the insert

wise-white•3w ago

Yep, you can do that too.

quickest-silverOP•3w ago

ok thx

ambitious-aqua•3w ago

that would skip persisting it to the server though? Is that what you want?

quickest-silverOP•3w ago

im fetching the data from the server for putting it into the store

ambitious-aqua•3w ago

DB collections are a copy of the backend so that's why onInsert, etc. are always called oh when you click something?

quickest-silverOP•3w ago

y when i scan a product barcode for adding to an account

ambitious-aqua•3w ago

ah ok, then yeah, direct writes is all you need — collection operators are just for optimistic mutations

quickest-silverOP•3w ago

thx and sorry for the issues of the where on the query builder but the documentation was wrong when i copy pasted it

ambitious-aqua•3w ago

which docs? Could you PR a fix? 🙏

quickest-silverOP•3w ago

that been fixed 2 days ago or something

Gaming

Programming

collection insert rollback instantly

Did you find this page helpful?