View Source LiveQuery.Clients.LiveView (LiveQueryClientLiveView v0.1.3)

Consume your LiveQuery queries from your Phoenix.LiveViews!

Summary

Functions

This is the hook which sets up and manages the all your LiveView's LiveQuery interactions. You should consider this a black box. It takes 2 things, :name and :assign. :name is the name of your LiveQuery system. :assign is the name of the assign at which you'd like your client ref to be stored. This library will place it there for you. Your client ref must be passed to every callsite of use_query/2. This ref will change every time a query that you're using changes. Other than that, it should be considered an opaque data structure.

Use a query in from a LiveView live component. The first argument is your client ref, which you'll get from the on_mount hook. If no query_key is provided, the query_def is used as the query_key (useful for singleton queries). This will return link the live_view to the query for as long as at least 1 live_component in the live_view is using the query. This will return the value of the query, and will automatically rerender the live_view when the query changes.

Functions

Link to this function

on_mount(opts, params, session, socket)

View Source

This is the hook which sets up and manages the all your LiveView's LiveQuery interactions. You should consider this a black box. It takes 2 things, :name and :assign. :name is the name of your LiveQuery system. :assign is the name of the assign at which you'd like your client ref to be stored. This library will place it there for you. Your client ref must be passed to every callsite of use_query/2. This ref will change every time a query that you're using changes. Other than that, it should be considered an opaque data structure.

def YourAppWeb.YourLiveView do
  use YourAppWeb, :live_view

  on_mount {LiveQuery.Clients.LiveView, name: YourApp.LiveQuery, assign: :lq_ref}

  ...
end
Link to this function

use_query(arg, query_key \\ nil, query_def, query_config \\ %{})

View Source

Use a query in from a LiveView live component. The first argument is your client ref, which you'll get from the on_mount hook. If no query_key is provided, the query_def is used as the query_key (useful for singleton queries). This will return link the live_view to the query for as long as at least 1 live_component in the live_view is using the query. This will return the value of the query, and will automatically rerender the live_view when the query changes.

defmodule YourAppWeb.YourLiveComponent do
  use PhxTestAppWeb, :live_component

  @impl true
  def render(assigns) do
    ~H"""
    <span><%= @value %></span>
    """
  end

  @impl true
  def update(assigns, socket) do
    {:ok,
     socket
     |> assign(:lq_ref, assigns.lq_ref)
     |> assign(:value, LiveQuery.Clients.LiveView.use_query(assigns.lq_ref, :your_query_key, YourApp.YourQueryDef))}
  end
end