Refactor query pattern.

src/Home.tsx

@@ -9,23 +9,14 @@
 // defined by the Mozilla Public License, v. 2.0.
 //
 import { AppNav, Footer } from "./components/AppNav.tsx";
-import { Container, Row, Col, Image, Card } from "react-bootstrap";
+import { Container, Row, Col, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "./utils/query.ts";
 import { DiagnosticsCard } from "./components/DiagnosticsCard.tsx";
 
-const statusStringQuery = async () => {
+const statusStringQueryAtom = createQueryAtom("status_string", "api/status", {
-  const resp = await fetch("api/status");
+  refetchInterval: 500,
-  if (!resp.ok) {
+});
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-const statusStringQueryAtom = atomWithQuery(() => ({
-  queryKey: ["status_string"],
-  queryFn: statusStringQuery,
-  refetchInterval: 500, // 0.5s
-}));
 const statusStringAtom = atom((get) => {
   const response = get(statusStringQueryAtom);
   if (response.isPending || response.isError || !response.data.status) {
@@ -34,18 +25,9 @@ const statusStringAtom = atom((get) => {
   return response.data.message;
 });
 
-const uptimeQuery = async () => {
+const uptimeQueryAtom = createQueryAtom("api/uptime", {
-  const resp = await fetch("api/uptime");
+  refetchInterval: 1000,
-  if (!resp.ok) {
+});
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-const uptimeQueryAtom = atomWithQuery(() => ({
-  queryKey: ["uptime"],
-  queryFn: uptimeQuery,
-  refetchInterval: 1000, // 1s
-}));
 const uptimeAtom = atom((get) => {
   const response = get(uptimeQueryAtom);
   if (response.isPending || response.isError) {

src/Version.tsx

@@ -11,21 +11,10 @@
 import { AppNav, Footer } from "./components/AppNav.tsx";
 import { Container, Row, Col, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "./utils/query.ts";
 import YAML from "yaml";
 
-const versionQueryFn = async () => {
+const versionQueryAtom = createQueryAtom("api/build_info");
-  const resp = await fetch("api/build_info");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-
-const versionQueryAtom = atomWithQuery(() => ({
-  queryKey: ["version"],
-  queryFn: versionQueryFn,
-}));
 
 const versionAtom = atom((get) => {
   const version = get(versionQueryAtom);

src/Video.tsx

@@ -9,23 +9,12 @@
 // defined by the Mozilla Public License, v. 2.0.
 //
 import { AppNav, Footer } from "./components/AppNav.tsx";
-import { Container, Row, Col, Image, Card } from "react-bootstrap";
+import { Container, Row, Col, Card } from "react-bootstrap";
 import { MediaMtxPlayer } from "./external/MediaMtxPlayer.tsx";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "./utils/query.ts";
 
-const tokenQuery = async () => {
+const tokenQueryAtom = createQueryAtom("api/mediamtx/login", { retry: true });
-  const resp = await fetch("api/mediamtx/login");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok.");
-  }
-  return resp.json();
-};
-const tokenQueryAtom = atomWithQuery(() => ({
-  queryKey: ["token"],
-  rety: true,
-  queryFn: tokenQuery,
-}));
 const tokenAtom = atom((get) => {
   const response = get(tokenQueryAtom);
   if (response.isPending || response.isError) {

src/components/DiagnosticsCard.tsx

@@ -8,20 +8,11 @@ import {
 } from "react-bootstrap-icons";
 import { Container, Row, Col, Table, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "../utils/query.ts";
 
-const diagQueryFn = async () => {
+const diagQueryAtom = createQueryAtom("api/diagnostics", {
-  const resp = await fetch("api/diagnostics");
+  refetchInterval: 1000,
-  if (!resp.ok) {
+});
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-
-const diagQueryAtom = atomWithQuery(() => ({
-  queryKey: ["diagnostics"],
-  queryFn: diagQueryFn,
-}));
 
 const diagAtom = atom((get) => {
   const diag = get(diagQueryAtom);

src/utils/query.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 James Pace
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//
+// This Source Code Form is "Incompatible With Secondary Licenses", as
+// defined by the Mozilla Public License, v. 2.0.
+//
+
+import { atomWithQuery } from "jotai-tanstack-query";
+
+export async function fetchJson(url: string): Promise<any> {
+  const resp = await fetch(url);
+  if (!resp.ok) {
+    throw new Error(`Network response was not ok: ${resp.statusText}`);
+  }
+  return resp.json();
+}
+
+interface CreateQueryAtomOptions {
+  refetchInterval?: number;
+  retry?: boolean;
+}
+
+export function createQueryAtom(url: string, options?: CreateQueryAtomOptions) {
+  return atomWithQuery(() => ({
+    queryKey: [url],
+    queryFn: () => fetchJson(url),
+    ...options,
+  }));
+}