Handle AA config failure (#9660)

* Clarify some comments

* Add error state in case of config failure

* Add retry button and relayout to accommodate

src/ageAssurance/data.tsx

@@ -136,6 +136,15 @@ export async function prefetchConfig() {
     }
   })
 }
+export async function refetchConfig() {
+  logger.debug(`refetchConfig: fetching...`)
+  const res = await getConfig()
+  qc.setQueryData<AppBskyAgeassuranceGetConfig.OutputSchema>(
+    configQueryKey,
+    res,
+  )
+  return res
+}
 export function useConfigQuery() {
   return useQuery(
     {
@@ -146,6 +155,10 @@ export function useConfigQuery() {
        * @see https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-the-cache-with-initialdataupdatedat
        */
       staleTime: IS_DEV ? 5e3 : 1000 * 60 * 60,
+      /**
+       * N.B. if prefetch failed above, we'll have no `initialData`, and this
+       * query will run on startup.
+       */
       initialData: getConfigFromCache(),
       initialDataUpdatedAt: () =>
         qc.getQueryState(configQueryKey)?.dataUpdatedAt,

src/ageAssurance/state.ts

@@ -30,12 +30,19 @@ export function useAgeAssuranceState(): AgeAssuranceState {
         access: AgeAssuranceAccess.Safe,
       }
 
-    // should never happen, but need to guard
+    /**
+     * This can happen if the prefetch fails (such as due to network issues).
+     * The query handler will try it again, but if it continues to fail, of
+     * course we won't have config.
+     *
+     * In this case, fail open to avoid blocking users.
+     */
     if (!config) {
       logger.warn('useAgeAssuranceState: missing config')
       return {
         status: AgeAssuranceStatus.Unknown,
-        access: AgeAssuranceAccess.Unknown,
+        access: AgeAssuranceAccess.Safe,
+        error: 'config',
       }
     }
 

src/ageAssurance/types.ts

@@ -18,6 +18,7 @@ export type AgeAssuranceState = {
   lastInitiatedAt?: string
   status: AgeAssuranceStatus
   access: AgeAssuranceAccess
+  error?: 'config' // maybe other specific cases in the future
 }
 
 export function parseStatusFromString(raw: string) {