Use more atoms.

src/Version.tsx

@@ -12,26 +12,31 @@ const versionQueryFn = async () => {
   return resp.json();
 };
 
-const versionAtom = atomWithQuery(() => ({
+const versionQueryAtom = atomWithQuery(() => ({
   queryKey: ["version"],
   queryFn: versionQueryFn,
 }));
 
-export function Version() {
-  const [{ data, isPending, isError }] = useAtom(versionAtom);
-
-  let versionText = () => {
-    if (isPending) {
+const versionAtom = atom((get) => {
+  const version = get(versionQueryAtom);
+  let parseVersion = () => {
+    if (version.isPending) {
       return "Loading...";
     }
-    if (isError) {
+    if (version.isError) {
       return "Error loading!";
     }
-    if (!data.status) {
+    if (!version.data.status) {
       return "Can not find version";
     }
-    return YAML.stringify(data.message);
+    return YAML.stringify(version.data.message);
   };
+  const versionText = parseVersion();
+  return versionText;
+});
+
+export function Version() {
+  let versionText = useAtom(versionAtom);
 
   return (
     <div>
@@ -40,7 +45,7 @@ export function Version() {
         <Card className="padded">
           <Card.Title>project.yaml</Card.Title>
           <Card.Body>
-            <pre>{versionText()}</pre>
+            <pre>{versionText}</pre>
           </Card.Body>
         </Card>
       </Container>