Improved the query for populating user edit form. Other fixes. (review)

resources/js/components/utils/AccessBarrier.tsx

@@ -63,8 +63,9 @@ export const AccessBarrier: ParentComponent<AccessBarrierProps> = (props) => {
       if (facilityId) {
         return User.statusWithFacilityPermissionsQueryOptions(facilityId);
       }
-      // If the facility is not available, return statusQueryOptions below, which will fail
-      // the permissions check anyway because the facility permissions fields are false in it.
+      // The access is not granted because facility permissions are needed, but no facility is available.
+      // Return a disabled query, which will be shown as pending.
+      return {...User.statusQueryOptions(), enabled: false};
     }
     return User.statusQueryOptions();
   });

resources/js/components/utils/InitializeTanstackQuery.tsx

@@ -84,6 +84,8 @@ export const InitializeTanstackQuery: ParentComponent = (props) => {
             retry: false,
             // This is very important. The default reconcile algorithm somehow breaks the data and
             // reactivity in complicated ways. This line is basically `broken: false`.
+            // See https://github.com/TanStack/query/pull/6125
+            // About `reconcile`: https://github.com/TanStack/query/pull/5287
             reconcile: false,
           },
         },

resources/js/data-access/memo-api/utils.ts

@@ -1,5 +1,8 @@
+import {useQueryClient} from "@tanstack/solid-query";
 import {AxiosError, type AxiosResponse} from "axios";
 import {DateTime} from "luxon";
+import {Accessor, createComputed} from "solid-js";
+import {SolidQueryOpts} from "./query_utils";
 import {Api} from "./types";
 
 export const parseGetResponse = <T extends object>(res: AxiosResponse<Api.Response.Get<T>>) => res.data.data;
@@ -55,6 +58,24 @@ export function createGetFromList<T extends Api.Entity>(
     });
 }
 
+/**
+ * Ensures that a query created from the query params never receives data from the cache.
+ * This is achieved by resetting the queries with the same query key.
+ *
+ * The accessor parameter is reactive.
+ *
+ * Usage:
+ *
+ *     const myQuery = createQuery(noCacheQueryParams(() => getMyQueryParams(props.something));
+ */
+export function noCacheQueryParams<DataType, Q extends SolidQueryOpts<DataType>>(
+  queryOptions: Accessor<Q>,
+): Accessor<Q> {
+  const queryClient = useQueryClient();
+  createComputed(() => queryClient.resetQueries({queryKey: queryOptions().queryKey}));
+  return queryOptions;
+}
+
 /** Returns the ISO representation of datetime in UTC time zone, suitable for sending to backend. */
 export function dateTimeToISO(dateTime: DateTime) {
   return dateTime.toUTC().set({millisecond: 0}).toISO({suppressMilliseconds: true});

resources/js/features/users-edit/UserEdit.form.tsx

@@ -7,6 +7,7 @@ import {Admin} from "data-access/memo-api/groups";
 import {Api} from "data-access/memo-api/types";
 import {VoidComponent, createSignal} from "solid-js";
 import toast from "solid-toast";
+import {noCacheQueryParams} from "../../data-access/memo-api/utils";
 import {UserEdit} from "./UserEdit";
 import {UserMembersEdit} from "./UserMembersEdit";
 
@@ -23,11 +24,8 @@ export namespace UserEditForm {
   export const Component: VoidComponent<Props> = (props) => {
     const t = useLangFunc();
     const statusQuery = createQuery(User.statusQueryOptions);
-    const userQuery = createQuery(() => ({
-      ...Admin.userQueryOptions(props.userId),
-      // Data used to initialise a form should always be fresh - it is not reactive.
-      gcTime: 0,
-    }));
+    // eslint-disable-next-line solid/reactivity
+    const userQuery = createQuery(noCacheQueryParams(() => Admin.userQueryOptions(props.userId)));
     const user = () => userQuery.data;
     const adminInvalidate = Admin.useInvalidator();
     const userInvalidate = User.useInvalidator();