fix: Issues with createDataBridge & AetherPage fetching client data

codinsonn · Nov 28, 2023 · be2692c · be2692c
1 parent 9f6e8f0
commit be2692c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 102 deletions.
diff --git a/features/app-core/routes/bio/index.tsx b/features/app-core/routes/bio/index.tsx
@@ -5,7 +5,7 @@ import * as bioScreen from 'links-page/screens/BioScreen'
 
 /* --- /bio ------------------------------------------------------------------------------------ */
 
-const PageScreen = (props: bioScreen.BioScreenProps) => (
+const PageScreen = (props: bioScreen.TBioScreenProps) => (
   <AetherPage
     {...props}
     params={{ slug: 'codinsonn' }}
@@ -16,6 +16,6 @@ const PageScreen = (props: bioScreen.BioScreenProps) => (
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export const dynamic = bioScreen.dynamic
+export const dynamic = bioScreen.screenConfig.dynamic
 
 export default PageScreen
diff --git a/features/app-core/routes/index.tsx b/features/app-core/routes/index.tsx
@@ -3,23 +3,19 @@ import { AetherPage } from 'aetherspace/navigation'
 // Screens
 import * as bioScreen from 'links-page/screens/BioScreen'
 
-/* --- / --------------------------------------------------------------------------------------- */
+/* --- /links ---------------------------------------------------------------------------------- */
 
-const PageScreen = (
-  props: bioScreen.BioScreenProps & { searchParams: Record<string, unknown> }
-) => {
-  return (
-    <AetherPage
-      {...props}
-      params={{ slug: 'codinsonn' }}
-      screen={bioScreen.BioScreen}
-      screenConfig={bioScreen.screenConfig}
-    />
-  )
-}
+const PageScreen = (props: bioScreen.TBioScreenProps) => (
+  <AetherPage
+    {...props}
+    params={{ slug: 'codinsonn' }}
+    screen={bioScreen.BioScreen}
+    screenConfig={bioScreen.screenConfig}
+  />
+)
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export const dynamic = bioScreen.dynamic
+export const dynamic = bioScreen.screenConfig.dynamic
 
 export default PageScreen
diff --git a/features/app-core/routes/links/index.tsx b/features/app-core/routes/links/index.tsx
@@ -5,7 +5,7 @@ import * as bioScreen from 'links-page/screens/BioScreen'
 
 /* --- /links ---------------------------------------------------------------------------------- */
 
-const PageScreen = (props: bioScreen.BioScreenProps) => (
+const PageScreen = (props: bioScreen.TBioScreenProps) => (
   <AetherPage
     {...props}
     params={{ slug: 'codinsonn' }}
@@ -16,6 +16,6 @@ const PageScreen = (props: bioScreen.BioScreenProps) => (
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export const dynamic = bioScreen.dynamic
+export const dynamic = bioScreen.screenConfig.dynamic
 
 export default PageScreen
diff --git a/features/links-page/routes/bio/[slug].tsx b/features/links-page/routes/bio/[slug].tsx
@@ -6,12 +6,12 @@ import * as bioScreen from '../../screens/BioScreen'
 
 /* --- /bio/[slug] ----------------------------------------------------------------------------- */
 
-const PageScreen = (props: bioScreen.BioScreenProps) => (
+const PageScreen = (props: bioScreen.TBioScreenProps) => (
   <AetherPage {...props} screen={bioScreen.BioScreen} screenConfig={bioScreen.screenConfig} />
 )
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export const dynamic = bioScreen.dynamic
+export const dynamic = bioScreen.screenConfig.dynamic
 
 export default PageScreen
diff --git a/features/links-page/schemas/GetUserBioBySlugDataBridge.ts b/features/links-page/schemas/GetUserBioBySlugDataBridge.ts
@@ -30,7 +30,7 @@ export const UserBioBySlugQuery = `
       }
     }
   }
-`
+` as const
 
 /** --- Data Bridge ---------------------------------------------------------------------------- */
 /** -i- API Config for getResumeDataByUserSlug() */

diff --git a/features/links-page/screens/BioScreen.tsx b/features/links-page/screens/BioScreen.tsx
@@ -1,27 +1,16 @@
 import React from 'react'
-// Navigation
 import { Link, useAetherRoute, useAetherNav } from 'aetherspace/navigation'
-// Context
 import { useAetherContext } from '../../../packages/@aetherspace/context'
-// Schemas
-import { z, aetherSchema, AetherParams, AetherProps, createDataBridge } from 'aetherspace/schemas'
+import { z, aetherSchema, AetherProps, createDataBridge } from 'aetherspace/schemas'
 import { GetUserBioBySlugDataBridge } from '../schemas/GetUserBioBySlugDataBridge'
 import { UserBio } from '../schemas'
-// Primitives
 import { View, Text, Image } from 'aetherspace/primitives'
-// SEO
 import { H1 } from 'aetherspace/html-elements'
-// Forms
-// import { Button, CheckList, RadioGroup, TextInput } from 'aetherspace/forms'
-// Components
 import { BioSkeleton } from '../components/BioSkeleton'
 import BioLink from '../components/BioLink'
 import { AetherIcon } from 'aetherspace/components'
-// Hooks
 import { useTailwindStyles } from 'aetherspace/styles'
-// Utils
 import { isEmpty } from 'aetherspace/utils'
-// Mocks
 import { userBioMock } from '../mocks/userBio.mock'
 
 /* --- Schemas & Types ------------------------------------------------------------------------- */
@@ -30,46 +19,41 @@ const d = {
   slug: 'Slug of the user bio to fetch if data is not in props.',
 }
 
-const BioParamsSchema = aetherSchema('BioScreenParams', {
-  slug: z.string().default('codinsonn').describe(d.slug),
+const BioScreenParams = aetherSchema('BioScreenParams', {
+  slug: z.string().optional().describe(d.slug),
 })
 
-const BioScreenSchema = UserBio.extendSchema('BioScreenProps', {
-  params: BioParamsSchema.optional(),
+const BioScreenProps = UserBio.extendSchema('BioScreenProps', {
+  params: BioScreenParams.optional(),
   segment: z.string().optional(),
 }).example({
   params: { slug: 'codinsonn' },
-  segment: undefined,
   ...userBioMock,
 })
 
+export type TBioScreenProps = AetherProps<typeof BioScreenProps>
+
+/* --- Data Fetching Bridge -------------------------------------------------------------------- */
+
 export const screenConfig = createDataBridge({
   ...GetUserBioBySlugDataBridge,
-  paramsSchema: BioParamsSchema,
-  propsSchema: BioScreenSchema,
-  refetchOnMount: false,
+  paramsSchema: BioScreenParams,
+  propsSchema: BioScreenProps,
   backgroundColor: '#111827',
 })
 
-export type BioScreenParams = AetherParams<typeof BioParamsSchema>
-export type BioScreenProps = AetherProps<typeof BioScreenSchema>
-
-/* --- Segments -------------------------------------------------------------------------------- */
-
-export const dynamic = 'auto' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
-
 /* --- <BioScreen/> ---------------------------------------------------------------------------- */
 
-export const BioScreen = (props: BioScreenProps) => {
+export const BioScreen = (props: TBioScreenProps) => {
   // Data
   const [bioData, { error }] = useAetherRoute(props, screenConfig)
+
+  // Hooks
   const { pathname } = useAetherNav()
-  const { colorScheme, toggleColorScheme } = useAetherContext()
+  const { toggleColorScheme } = useAetherContext()
 
-  // Vars
+  // Vars & Flags
   const ICON_SIZE = 27
-
-  // Flags
   const isCustomBio = pathname?.includes('/bio/')
 
   // -- Styles --
@@ -174,57 +158,14 @@ export const BioScreen = (props: BioScreenProps) => {
         </Text>
 
         <View tw="h-16" />
-
-        {/*/}
-
-        <Button
-          type="primary"
-          size="md"
-          iconSize={20}
-          link="https://github.com/Aetherspace/green-stack-starter-demo#readme"
-          prefixIconName="aetherspace-logo"
-          pressableClasses="rounded-md min-w-[300px]"
-        >
-          Universal App Starter
-        </Button>
-
-        <View tw="h-10" />
-
-        <TextInput
-          accessibilityLabel="Text input field"
-          accessibilityHint="Text input field"
-          value=""
-          placeholder="Email"
-          onChange={console.log}
-        />
-
-        <View tw="h-10" />
-
-        <CheckList onChange={console.log}>
-          <CheckList.Option value="value-1" label="Option 1" />
-          <CheckList.Option value="value-2" label="Option 2" />
-          <CheckList.Option value="value-3" label="Option 3" />
-        </CheckList>
-
-        <View tw="h-10" />
-
-        <RadioGroup onChange={console.log}>
-          <RadioGroup.Option value="value-1" label="Option 1" />
-          <RadioGroup.Option value="value-2" label="Option 2" />
-          <RadioGroup.Option value="value-3" label="Option 3" />
-        </RadioGroup>
-
-        <View tw="h-20" />
-
-        {/**/}
       </View>
     </View>
   )
 }
 
 /* --- Documentation --------------------------------------------------------------------------- */
 
-export const getDocumentationProps = BioScreenSchema.introspect()
+export const getDocumentationProps = BioScreenProps.introspect()
 
 /* --- Exports --------------------------------------------------------------------------------- */
 

diff --git a/packages/@aetherspace/navigation/AetherPage/AetherPage.web.tsx b/packages/@aetherspace/navigation/AetherPage/AetherPage.web.tsx
@@ -1,6 +1,5 @@
 import { use, useEffect, useState } from 'react'
 import { SWRConfig, unstable_serialize, useSWRConfig } from 'swr'
-// Types
 import { AetherPageProps, AetherScreenConfig } from './AetherPage.types'
 
 /* --- Helpers --------------------------------------------------------------------------------- */
@@ -53,7 +52,7 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
     return (
       <SWRConfig value={{ fallback }}>
         {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
-        <PageScreen {...restProps} {...hydrationData} />
+        <PageScreen params={routeParams} {...restProps} {...hydrationData} />
       </SWRConfig>
     )
   }
@@ -65,7 +64,7 @@ export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps
   return (
     <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
       {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
-      <PageScreen {...restProps} {...ssrData} />
+      <PageScreen params={routeParams} {...restProps} {...ssrData} />
     </SWRConfig>
   )
 }
diff --git a/packages/@aetherspace/schemas/createDataBridge.ts b/packages/@aetherspace/schemas/createDataBridge.ts
@@ -30,6 +30,7 @@ export const createDataBridge = <
   graphqlQuery,
   refetchOnMount,
   backgroundColor,
+  dynamic = 'auto',
 }: {
   resolverName: RN
   resolverArgsName?: RAN | HintedKeys
@@ -44,6 +45,7 @@ export const createDataBridge = <
   graphqlQuery: string
   refetchOnMount?: boolean
   backgroundColor?: string
+  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
 }) => {
   // Vars & Flags
   const isMutation = graphqlQuery.includes('mutation')
@@ -77,8 +79,9 @@ export const createDataBridge = <
   const responseToPropsFn = (responseToProps || defaultResponseToProps) as (response: RT) => PT
 
   const getGraphqlData = async (queryKey: string, queryVariables?: AT) => {
-    const queryData = queryKey || graphqlQuery
-    const finalVariables = isEmpty(queryVariables) ? null : queryVariables
+    const queryData = queryKey || graphqlQuery // @ts-ignore
+    const hasQueryVariables = !isEmpty(queryVariables) && !isEmpty(queryVariables[resolverArgsName])
+    const finalVariables = !hasQueryVariables ? null : queryVariables
     const queryInput = finalVariables || getGraphqlVars({} as UT)
     const result = await fetchAetherProps(queryData, queryInput)
     const data = result.data
@@ -104,6 +107,7 @@ export const createDataBridge = <
     isMutation,
     refetchOnMount,
     backgroundColor,
+    dynamic,
     PARAMS: null as unknown as UT,
     ARGS: null as unknown as AT,
     RES: null as unknown as RT,
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,7 +30,7 @@ export const UserBioBySlugQuery = ` @@
           }
         }
       }
-    `
+    ` as const
     /** --- Data Bridge ---------------------------------------------------------------------------- */
     /** -i- API Config for getResumeDataByUserSlug() */
@@ Expand Down @@