Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link.
title: Optimistic mutation overwritten by refetch order: QueryObserver, Mutation (create), Server note: Initial load QueryObserver -> Server: `GET LIST` Server -> QueryObserver: `[]` note: current query cache: [] _: Trigger mutation Mutation (create) -> QueryObserver: cancel queries Mutation (create) -> QueryObserver: optimistic update query: `[{ id: 'TEMP', title: "New"}]` note: query cache: [{ id: 'TEMP', title: "NEW" }] - UI renders the new item Mutation (create) -> Server: `{ title: "New" }` QueryObserver -> QueryObserver: Refetch because of remount QueryObserver -> Server: `GET LIST` Server -> QueryObserver: `[]` note: query cache: [] - UI jank - the new item gets removed Server -> Mutation (create): `{ id: 1, title: "New" }` Mutation (create) -> QueryObserver: attempt to replace optimistic update: `{ id: 'TEMP', title: "NEW" }` with `{ id: 1, title: "New" }` ** THIS also fails because the refetch set the query-cache to an empty array ** note: Finally, the query invalidation will make the whole thing refetch and get the right data Mutation (create) -> QueryObserver: invalidateQuery QueryObserver -> Server: `GET LIST` Server -> QueryObserver: `[{ id: 1, title: "New" }]` note: query cache: [{ id: 1, title: "New" }] - UI finally renders the correct data