Allow refreshing the debug home page

packages/web/lib/networking/mutations/refreshHome.ts

@@ -0,0 +1,38 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+type RefreshHomeResponseData = {
+  success?: boolean
+  errorCodes?: string[]
+}
+
+type RefreshHomeResponse = {
+  refreshHome?: RefreshHomeResponseData
+}
+
+export async function refreshHomeMutation(): Promise<boolean> {
+  const mutation = gql`
+    mutation refreshHome {
+      refreshHome {
+        ... on RefreshHomeSuccess {
+          success
+        }
+        ... on RefreshHomeError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  try {
+    const response = await gqlFetcher(mutation)
+    const data = response as RefreshHomeResponse | undefined
+    if (data?.refreshHome?.errorCodes) {
+      return false
+    }
+    return data?.refreshHome?.success ?? false
+  } catch (error) {
+    console.error(error)
+    return false
+  }
+}

packages/web/lib/networking/queries/useGetHome.tsx

@@ -14,6 +14,7 @@ export type HomeItemResponse = {
   isValidating: boolean
   errorMessage?: string
   sections?: HomeSection[]
+  mutate?: () => void
 }
 
 export type HomeItem = {
@@ -129,7 +130,7 @@ export function useGetHomeItems(): HomeItemResponse {
     after: null,
   }
 
-  const { data, error, isValidating } = useSWR(
+  const { data, error, isValidating, mutate } = useSWR(
     [query, variables.first, variables.after],
     makeGqlFetcher(variables)
   )
@@ -157,6 +158,7 @@ export function useGetHomeItems(): HomeItemResponse {
   if (result && result.home && result.home.edges) {
     console.log('data', result.home)
     return {
+      mutate,
       error: false,
       isValidating,
       sections: result.home.edges.map((edge) => {

packages/web/pages/justread/debug.tsx

@@ -27,13 +27,23 @@ import {
   SubscriptionType,
   useGetSubscriptionsQuery,
 } from '../../lib/networking/queries/useGetSubscriptionsQuery'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
+import { refreshHomeMutation } from '../../lib/networking/mutations/refreshHome'
 
 export default function DebugHome(): JSX.Element {
   const homeData = useGetHomeItems()
-  console.log('home sections: ', homeData.sections)
+  console.log('home sections: ', homeData.errorMessage)
   useApplyLocalTheme()
 
+  const refreshHome = useCallback(() => {
+    ;(async () => {
+      refreshHomeMutation()
+      if (homeData?.mutate) {
+        homeData.mutate()
+      }
+    })()
+  }, [])
+
   return (
     <VStack
       distribution="start"
@@ -56,6 +66,15 @@ export default function DebugHome(): JSX.Element {
           },
         }}
       >
+        <Button
+          style="ctaBlue"
+          onClick={(event) => {
+            refreshHome()
+            event.preventDefault()
+          }}
+        >
+          Refresh
+        </Button>
         {homeData.sections?.map((homeSection, idx) => {
           return (
             <VStack key={`homeSection-${idx}`} css={{ width: '100%' }}>