All-in-One Demo

A simplified “Twitter-like” dApp that demonstrates the full power of IC Reactor, including optimistic UI updates, backend integration, and authentication.

Features Demonstrated

• Optimistic Updates: UI updates instantly when you “Like” a post, rolling back on error.
• Rust Backend: Includes a simple Rust canister for posts and likes.
• Authentication: Connect with Internet Identity.
• Form Handling: Creating new posts with loading states.
• Automatic Refetching: Lists update automatically after mutations.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Key Code

Optimistic Mutation

// Optimistically update the UI before the canister confirms
const { mutate } = useActorMutation({
  functionName: "like_post",
  onMutate: async (postId) => {
    // Cancel queries to avoid overwrites
    await queryClient.cancelQueries({ queryKey: ["posts"] })

    // Snapshot previous value
    const previousPosts = queryClient.getQueryData(["posts"])

    // Optimistically update
    queryClient.setQueryData(["posts"], (old: Post[]) =>
      old.map((post) =>
        post.id === postId ? { ...post, likes: post.likes + 1 } : post
      )
    )

    return { previousPosts }
  },
  onCanisterError: (error, variables, context) => {
    // Rollback on logic error (e.g., "Already liked")
    queryClient.setQueryData(["posts"], context.previousPosts)
  },
})