chore: Add Data fetching example to Aetherspace Docs

Author: codinsonn

packages/@aetherspace/components/AetherIcon/README.md

@@ -2,14 +2,14 @@
 
 There’s many different ways to use icons and icon sets in Aetherspace. Here’s the full list:
 
-- Third party SVG component icon libraries, like `@nandorojo/iconic` or `@nandorojo/heroicons`  
+- Third party SVG component icon libraries (like `@nandorojo/iconic` or `@nandorojo/heroicons`)  
 → SSR support, fast & easy, no layout shift on web, limited options
 - Custom SVG components using `react-native-svg`  
 → SSR support, can [convert from .svg file](https://transform.tools/svg-to-react-native), but could be more time-consuming
 - Third party iconfont libraries, such as `@expo/vector-icons`  
 → Fast & easy, needs icon font preloaded, layout shift on web, locked out of SWC
 - Image icons through src urls  
-→ Straight forward, easy to implement, not super optimised, layout shift on web  
+→ Straight forward, easy, not super optimised, fixed colors, layout shift on web  
 
 ### Best practices
 

packages/@aetherspace/navigation/AetherPage/README.md

@@ -177,9 +177,60 @@ To actually get the data from your GraphQL resolvers into the specific screens f
 - `AetherPage`, used to wrap your page component in a Next.js app-dir page under `/routes/`
 
 We have a full working example of this in the Aetherspace demo app:
-- [/features/app-core/screens/HomeScreen.tsx#L39-L76](https://github.com/Aetherspace/green-stack-starter-demo/blob/main/features/app-core/screens/HomeScreen.tsx#L39-L76)
+- [/features/app-core/screens/HomeScreen.tsx#L39-L83](https://github.com/Aetherspace/green-stack-starter-demo/blob/main/features/app-core/screens/HomeScreen.tsx#L39-L83)
 - [/features/app-core/routes/index.tsx](https://github.com/Aetherspace/green-stack-starter-demo/blob/main/features/app-core/routes/index.tsx)
 
+```tsx
+/* --- GraphQL & Data Fetching ----------------------------------------------------------------- */
+
+/** -i- GraphQL query that will fetch all data we need for this screen */
+const getScreenDataQuery = `
+  query($healthCheckArgs: HealthCheckArgs!) {
+    healthCheck(args: $healthCheckArgs) {
+      alive
+      kicking
+      echo
+      baseURL
+    }
+  }
+`
+
+/** -i- Function to get the GraphQL variables that will be used to fetch the data for this screen */
+const getHomeScreenArgs = (params: HomeScreenParams = {}) => ({
+  healthCheckArgs: HomeParamsSchema.parse(params),
+})
+
+/** -i- Function to actually fetch the data for this screen, where queryKey is likely the GQL query */
+const getHomeScreenData = async (queryKey: string, queryVariables?: HomeScreenParams) => {
+  const queryData = queryKey || getScreenDataQuery
+  const queryInput = queryVariables || getHomeScreenArgs() // Use defaults if not defined
+  const { data } = await fetchAetherProps(queryData, queryInput)
+  const { alive, kicking, echo } = data?.healthCheck || {}
+  return { alive, kicking, customGreeting: echo } as HomeScreenProps
+}
+
+/** -i- Bundled config for getting the screen data, including query, variables, and data fetcher */
+export const screenConfig = {
+  query: getScreenDataQuery,
+  getGraphqlVars: getHomeScreenArgs,
+  getGraphqlData: getHomeScreenData,
+  paramSchema: HomeParamsSchema,
+  propSchema: HomePropsSchema,
+  refetchOnMount: false,
+  backgroundColor: '#FFFFFF',
+}
+
+/* --- <HomeScreen/> --------------------------------------------------------------------------- */
+
+export const HomeScreen = (props: AetherProps<typeof HomePropsSchema>) => {
+  // Props & Screen Data Fetching (from screenConfig 👇)
+  const [pageData] = useAetherRoute(props, screenConfig)
+  const { customGreeting, alive, kicking, baseURL = BASE_URL } = pageData
+
+  // ...
+}
+```
+
 But again, you may want to save some time by skipping the manual boilerplate entirely and use a generator instead:
 
 ## Generating GraphQL powered routes

packages/@aetherspace/scripts/README.md

@@ -2,9 +2,9 @@
 
 > Codegen in Aetherspace is focused on keeping your internal features and packages folders as transferrable between projects as possible. Therefore, it is limited to do only a few things:  
 
-- Creating barrel files, as registries (abstracting imports and module linking)
-- Deduplicating file-based conventions (from modules to next.js app dir & expo-router app dir)
 - Turborepo generators for easy creation of new routes, schemas and data-resolvers
+- Deduplicating file-based conventions (e.g. linking from modules to next.js & expo-router app dirs)
+- Creating barrel files to act as "registries" (e.g. abstracting imports and module linking)
 
 The `packages/@registries` folder contains the results of all the automation scripts defined at `packages/@aetherspace/scripts`. These scripts are automatically run in development mode from the `withAutomation()` plugin in `apps/next/next.config.js`.