remix-query

Keep your loader data in sync in your component without reloading the page.

useQuery

The hook to keep loader data of any (current or other) route in-sync at client-side without reloading the page. (View source)

• Reload when window is visible (default: true)
• Reload when internet re-connects (default: true)
• Reload when window receives focus (default: false)

import { useQuery } from "remix-query";

• Default

  const { data, loading, reload } = useQuery<DataType>();
  

• Polling

  const { data, loading } = useQuery<DataType>({ reloadInterval: 5000 });
  

• Other route

  const { data, loading, reload } = useQuery<DataType>({
    route: "/other/path",
  });
  

• Other options

  const { data, loading, reload } = useQuery<DataType>({
    reloadOnWindowVisible: true
    reloadOnWindowFocus: true
    reloadOnReconnect: true
  });