T
TanStack•4w ago
xenial-black

onInsert vs createOptimisticAction

The docs don't make it clear when I can simply use an onInsert callback on my collection and just insert new elements vs when I need to use createOptimisticAction. Right now I have both defined and it's just duplicated code and I feel like I'm doing something wrong. I do want optimistic updates, but I don't understand why there is a createOptimisticAction when the onInsert seems to do the same thing?
3 Replies
xenial-black
xenial-blackOP•4w ago
const ratelimitNamespaces = createCollection(
  queryCollectionOptions({
    queryClient,
    queryKey: ["ratelimitNamespaces"],
    queryFn: async () => {
      console.info("DB fetching ratelimitNamespaces")
      return await trpcClient.ratelimit.namespace.list.query();
    },
    getKey: (item) => item.id,
    onInsert: async ({ transaction }) => {
      const { changes: newNamespace } = transaction.mutations[0]
      await trpcClient.ratelimit.namespace.create.mutate({ name: newNamespace.name! });
    },
    onUpdate: async ({ transaction }) => {
      const { original, modified } = transaction.mutations[0];
      await trpcClient.ratelimit.namespace.update.name.mutate({
        namespaceId: original.id,
        name: modified.name!
      })
    },
    onDelete: async ({ transaction }) => {

      const { original } = transaction.mutations[0];
      await trpcClient.ratelimit.namespace.delete.mutate({ namespaceId: original.id });


    },

  }),
);

export const collection = {
  ratelimitNamespaces,
};


export const createRatelimitNamespace = createOptimisticAction<{ name: string }>({
  onMutate: (args) => {
    ratelimitNamespaces.insert({
      id: Date.now().toString(),
      name: args.name,

    })
  },
  mutationFn: async (args) => {

    await trpcClient.ratelimit.namespace.create.mutate({ name: args.name });
  }
})
const ratelimitNamespaces = createCollection(
  queryCollectionOptions({
    queryClient,
    queryKey: ["ratelimitNamespaces"],
    queryFn: async () => {
      console.info("DB fetching ratelimitNamespaces")
      return await trpcClient.ratelimit.namespace.list.query();
    },
    getKey: (item) => item.id,
    onInsert: async ({ transaction }) => {
      const { changes: newNamespace } = transaction.mutations[0]
      await trpcClient.ratelimit.namespace.create.mutate({ name: newNamespace.name! });
    },
    onUpdate: async ({ transaction }) => {
      const { original, modified } = transaction.mutations[0];
      await trpcClient.ratelimit.namespace.update.name.mutate({
        namespaceId: original.id,
        name: modified.name!
      })
    },
    onDelete: async ({ transaction }) => {

      const { original } = transaction.mutations[0];
      await trpcClient.ratelimit.namespace.delete.mutate({ namespaceId: original.id });


    },

  }),
);

export const collection = {
  ratelimitNamespaces,
};


export const createRatelimitNamespace = createOptimisticAction<{ name: string }>({
  onMutate: (args) => {
    ratelimitNamespaces.insert({
      id: Date.now().toString(),
      name: args.name,

    })
  },
  mutationFn: async (args) => {

    await trpcClient.ratelimit.namespace.create.mutate({ name: args.name });
  }
})
For context this is what I have right now
continuing-cyan
continuing-cyan•4w ago
createOptimisticAction is for when you need to optimistically mutate multiple collections within the same transaction. For example if you have a backend api to create and add a tag to a blog post, you likely need to mutate both a tags and postTags (many to many) collection within the same transaction.
xenial-black
xenial-blackOP•4w ago
oooh that makes a ton of sense thanks

Did you find this page helpful?