Sync Solvedを実現するElectricSQLをPhoenixに組み込んでモバイルアプリのSyncがSolvedした話 #Elixir – Qiita

defmodule NewstandMobileWeb.ArticleLive.Index do
  use NewstandMobileWeb, :live_view

  alias NewstandMobile.Articles
+ import Phoenix.Sync.LiveView
  
  @impl true
  def render(assigns) do
    ~H"""
     ...
    """
  end

  @impl true
  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(:page_title, "Listing Articles")
-    |> stream(:articles, Articles.list_artciles())}     
+    |> sync_stream(:articles, Articles.Article)}
  end

+ @impl true
+ def handle_info({:sync, event}, socket) do
+   {:noreply, sync_stream_update(socket, event)}
+ end
  
  @impl true
  def handle_event("delete", %{"id" => id}, socket) do
    article = Articles.get_article!(id)
    {:ok, _} = Articles.delete_article(article)

    {:noreply, stream_delete(socket, :articles, article)}
  end
end

# articles.ex

  def list_articles(category) do
   from(article in Article, where: article.category == ^category)
  end

  def get_article(id) do
    from(article in Article, where: article.id == ^id, limit: 1)
  end

# index.ex

  def handle_event(%{"category" => category }, socket) do
   {:noreply, sync_stream(socket,:articles, Articles.list_article(category)}
  end 

# show.ex

  def mount(%{"id" => id}, session, socket) do
    {:ok, sync_stream(socket,:article, Articles.get_article(id))}
  end

  @impl true
  def render(assigns) do
    ~H"""
    
     
      <.header>
        Article {article.id}
        <:subtitle>This is a article record from your database.
        <:actions>
          <.button navigate="{~p"</span">/articles"}>
            <.icon name="</span><span class=" n="">hero-arrow-left" />
          
          <.button variant="</span><span class=" n="">primary" navigate={~p"/articles/#{article}/edit?return_to=show"}>
            <.>icon name="hero-pencil-square" /> Edit article
          button>
        :actions>
      header>

      <.>list>
        :item title="Title">{article.title}:item>
        :item title="Content">{article.content}:item>
        :item title="Category">{article.category}:item>
      list>
      % end %>
    Layouts.app>
    """
  end