GREEN stack quickstart

npm run dev

your-project/
 
 └── /apps/
     └── /expo/... # <- Expo-Router for iOS & Android
     └── /next/... # <- Next.js App Router (SSR, SSG, API routes)
 
 └── /features/...
     └── /@app-core/... # <- Reusable core features, resolvers, UI and screens
 
 └── /packages/...
     └── /@green-stack-core/... # <- Starterkit helpers and universal utils 
 

your-project/
 
 └── /features/...
 
     └── /@app-core/... # <- e.g. Workspace for the "core feature" of your app
 
         └── /constants/...
         └── /utils/...
 
         └── /schemas/... # Zod
         └── /models/... # DB
         └── /resolvers/... # Back-End Logic (*)
 
         └── /components/... # UI
         └── /hooks/... # Front-End Logic
         
         └── /screens/...
             └── HomeScreen.tsx # 👈 Start here
 
         └── /routes/... # Re-export to '@app/expo' & '@app/next'
             └── /api/... # Turn resolvers (*) into API routes & graphql resolvers
 
         └── package.json # List package deps and define name, e.g. '@app/core'
 
         └── ... # Other config files like 'tsconfig.json'
 
     └── /some-other-feature/...
 
         └── /../...
 

npm run collect:routes

import { View, Text, Image } from 'react-native'
// ☝️ Auto-transformed to 'react-native-web' in Next.js

import { View, Text, Image } from 'nativewind'
// ☝️ Import from 'nativewind' instead

import { Text as RNText } from 'react-native'
import { styled } from 'nativewind'
 
// ... other re-exported predefined styles ...
 
/* --- Typography ------------ */
 
export const P = styled(RNText, 'text-base')
export const H1 = styled(RNText, 'font-bold text-2xl text-primary-100')
export const H2 = styled(RNText, 'font-bold text-xl text-primary-100')
export const H3 = styled(RNText, 'font-bold text-lg text-primary-100')
// ☝️ These styles will always be applied unless overridden by the className prop
 

import { Image, View, H1 } from '@app/components/styled'
 
// ⬇⬇⬇
 
<View className="px-2 max-w-[100px] items-center rounded-md">
 
/* Use the 'className' prop like you would with tailwind on the web */
 
// ⬇⬇⬇
 
// When rendering on Mobile:
 
//  'px-2'          -> { paddingLeft: 8, paddingRight: 8 }
//  'max-w-[100px]' -> { maxWidth: 100 }
//  'items-center'  -> { alignItems: 'center' }
//  'rounded-md'    -> { borderRadius: 6 }
 
// -- vs. --
 
// When rendering on the server or browser:
 
//  'px-2'          -> padding-left: 8px; padding-right: 8px;
//  'max-w-[100px]' -> max-width: 100px;
//  'items-center'  -> align-items: center;
//  'rounded-md'    -> border-radius: 6px;

@app/core
 └── /schemas/... # 👈 Zod based single source of truth

import { z, schema } from '@green-stack/schemas'
 
// Define the shape of the user data
export const User = schema('User', {
    // Requires a name value (☝️) to port to other formats later, best to keep the same
 
    // Zod can help you go even narrower than typescript
    name: z.string().min(2), // <- e.g. Needs to be a string with at least 2 letters
    age: z.number().min(18), // <- e.g. Age must be a number of at least 18
 
    // Just like TS, it can help you indicate fields as optional
    isAdmin: z.boolean().default(false), // <- Marked optional, defaults to false
    birthdate: z.Date().nullish(), // = same as calling .nullable().optional()
})

// Extract type from the schema and export it as a type alias
export type User = z.infer<typeof User>
 
// ⬇⬇⬇
 
// {
//     name: string,
//     age: number,
//     isAdmin?: boolean,
//     birthDate?: Date | null,
// }
 
// ⬇⬇⬇
 
// Usage as a type
const newUser: User = { ... }

// You can call .parse() on the whole User schema...
 
const newUser = User.parse(someInput) // <- Auto infers 'User' type if valid
 
// ...or on its idividual properties by using '.shape' 👇
 
User.shape.age.parse("Invalid - Not a number")
// Throws => ZodError: "Expected a number, recieved a string."
// Luckily, TS will already catch this in your editor ( instant feedback 🙌 )

@app/core
 └── /resolvers/... # <- Reusable back-end logic goes here

/* -- Schemas ------------ */
 
// Input validation
export const HealthCheckInput = schema('HealthCheckInput', {
 
    echo: z.string()
        .default('Hello World!')
        .describe("Will ne echo'd back in the response"), // Docs
})
 
// Output definition
export const HealthCheckOutput = schema('HealthCheckOutput', {
 
    echo: HealthCheckInput.shape.echo, // 1 of many ways to reuse defs
 
    alive: z.boolean().default(true),
    kicking: z.boolean().default(true),
})

import { createDataBridge } from '@green-stack/schemas/createDataBridge' 
 
/* -- Bridge ------------- */
 
export const healthCheckBridge = createDataBridge({
    // Assign schemas
    inputSchema: HealthCheckInput,
    outputSchema: HealthCheckOutput,
 
    // GraphQL config
    resolverName: 'healthCheck',
    resolverArgsName: 'HealthCheckInput',
 
    // API route config
    apiPath: '/api/health',
    allowedMethods: ['GRAPHQL', 'GET'],
})

import { createResolver } from '@green-stack/schemas/createResolver'
import { healthCheckBridge } from './healthCheck.bridge.ts'
 
/** --- healthCheck() ---- */
/** -i- Check the health status of the server. */
export const healthCheck = createResolver(async ({
    args,
    context, // <- Request context (from middleware)
    parseArgs, // <- Input validator (from 'inputSchema')
    withDefaults, // <- Response helper (from 'outputSchema')
}) => {
    
    // Auto typed input:
    const { echo } = args
 
    // -- OR --
 
    // Validate and apply defaults
    const { echo } = parseArgs(args)
 
    // -- ... --
 
    // Add business logic
    // - e.g. log out the request 'context'?
 
    // -- Respond --
 
    // Typecheck response and apply defaults from bridge's outputSchema
    return withDefaults({
        echo,
        alive: true,
        // 'kicking' will be defaulted to true automatically by zod
    })
 
}, healthCheckBridge)
// ☝️ Provide the bridge as the 2nd argument to:
// - infer the types
// - enable the parseArgs() and withDefaults() helpers

@app/core
 └── /resolvers/...
 └── /routes/...
     └── /api/... # <- Define API routes at this level

import { healthCheck } from '@app/resolvers/healthCheck.resolver'
import { createNextRouteHandler } from '@green-stack/schemas/createNextRouteHandler'
 
/* --- Routes ------------ */
 
export const GET = createNextRouteHandler(healthCheck)
// Automatically extracts (☝️) args from url & search params
// based on the zod 'inputSchema'
 
// If you want to support e.g. POST (👇), same deal (checks body as well)
export const POST = createNextRouteHandler(healthCheck)

import { healthCheck } from '@app/resolvers/healthCheck.resolver'
import { createGraphResolver } from '@green-stack/schemas/createGraphResolver'
 
/* --- Routes ------------ */
 
// exports of `GET` / `POST` / `PUT` / ...
 
/* --- GraphQL ----------- */
 
export const graphResolver = createGraphResolver(healthCheck)
// Automatically extracts input (☝️) from graphql request context

import { ResultOf, VariablesOf } from 'gql.tada'
// ☝️ Type helpers that interface with the GraphQL schema
import { graphql } from '../graphql/graphql'
// ☝️ Custom graphql.tada query builder that integrates with our types
 
/* --- Query ----------------------- */
 
export const healthCheckQuery = graphql(`
  query healthCheck ($healthCheckArgs: HealthCheckInput) {
    healthCheck(args: $healthCheckArgs) {
      echo
      alive
      kicking
    }
  }
`)
 
// ⬇⬇⬇ automatically typed as ⬇⬇⬇
 
// TadaDocumentNode<{
//     healthCheck: {
//         echo: string | null;
//         alive: boolean | null;
//         kicking: boolean | null;
//     };
// }>
 
// ⬇⬇⬇ can be turned into reusable types ⬇⬇⬇
 
/* --- Types ----------------------- */
 
export type HealthCheckQueryInput = VariablesOf<typeof healthCheckQuery>
 
export type HealthCheckQueryOutput = ResultOf<typeof healthCheckQuery>

import { healthCheckBridge } from './healthCheck.bridge'
import { bridgedFetcher } from '@green-stack/schemas/bridgedFetcher'
// ☝️ Helper to automatically create a fetcher from a DataBridge
 
/* --- healthCheckFetcher() -------- */
 
// Use the bridge to automatically create the fetcher function
export const healthCheckFetcher = bridgedFetcher({
 
    ...healthCheckBridge,
    // ☝️ Uses the bridge to create the query and input + output types for you
 
    // -- OPTIONALLY --
 
    graphqlQuery: healthCheckQuery,
    // ☝️ If you only need specific fields, and want the response type to match that
})

import { createQueryBridge } from '@green-stack/navigation'
import type { HydratedRouteProps } from '@green-stack/navigation'
 
/* --- Data Fetching --------------- */
 
// -i- Think of a `QueryBridge` as a bridge between the route component and the data-fetching logic.
// -i- It's a way to fetch data for a route, based on the route's parameters.
 
// -i- The closest thing you could compare it to is next.js's `getServerSideProps`...
// -i- Except it also works to fetch data on your Native App, next to just during Web SSR or CSR.
 
export const queryBridge = createQueryBridge({
  
    // 1. Transform the route params into things useable by react-query
    routeParamsToQueryKey: (routeParams) => ['healthCheck', routeParams.echo],
    routeParamsToQueryInput: (routeParams) => ({ healthCheckArgs: { echo: routeParams.echo } }),
 
    // 2. Provide the fetcher function to be used by react-query
    routeDataFetcher: healthCheckFetcher,
 
    // 3. Transform fetcher output to props after react-query was called
    fetcherDataToProps: (fetcherData) => ({ serverHealth: fetcherData?.healthCheck }),
})
 
// ⬇⬇⬇ Extract types ⬇⬇⬇
 
/* --- Types ----------------------- */
 
type HomeScreenProps = HydratedRouteProps<typeof queryBridge>
 
// ⬇⬇⬇ Use fetcher data in screen component ⬇⬇⬇
 
/* --- <HomeScreen/> --------------- */
 
const HomeScreen = (props: HomeScreenProps) => {
 
    // Query results from 'fetcherDataToProps()' will be added to it
    const { serverHealth } = props
    // ☝️ Typed as {
    //      serverHealth: {
    //          echo: string,
    //          alive?: boolean,
    //          kicking?: boolean,
    //      }
    //  }
 
    // -- Render --
 
    return (...)
}

@app/core
 └── /screens/...
     └── HomeScreen.ts # <- Where we've defined the data-fetching logic *and* UI
 └── /routes/...
     └── index.ts # <- Where we'll combine the bridge & UI component

import { HomeScreen, queryBridge } from '@app/screens/HomeScreen'
import { UniversalRouteScreen } from '@app/navigation'
// ☝️ Will execute each step from bridge in sequence to get to the final props
 
/* --- /subpages/[slug] ----------- */
 
export default (props) => (
    <UniversalRouteScreen
        {...props}
 
        queryBridge={queryBridge}
        // 👆 Pass the bridge as instruction for react-query to get the final props
 
        routeScreen={HomeScreen}
        // 👆 Screen component, provided with final props on mobile + server + browser
    />
)

// -i- Export any other next.js routing config here
// -i- See: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

@app/expo
 └── /app/...
     └── index.tsx
 
@app/next
 └── /app/...
     └── page.tsx

import HomeRoute from '@app/routes/index'
 
export default HomeRoute

import HomeRoute from '@app/routes/index'
 
export default HomeRoute
 
// Re-export the route segment configs here as well