From 19c5c16a68db7b61d57a647cf10883029cb79ecc Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Wed, 3 Jan 2024 07:36:54 +0100
Subject: [PATCH 01/18] Router: Use a single RouterContext (#9792)

---
 packages/router/src/router-context.tsx | 38 ++++++++------------------
 1 file changed, 11 insertions(+), 27 deletions(-)

diff --git a/packages/router/src/router-context.tsx b/packages/router/src/router-context.tsx
index 74a421773e98..4c753e2425b8 100644
--- a/packages/router/src/router-context.tsx
+++ b/packages/router/src/router-context.tsx
@@ -1,4 +1,4 @@
-import React, { useReducer, createContext, useContext } from 'react'
+import React, { createContext, useContext, useMemo } from 'react'
 
 import type { AuthContextInterface } from '@redwoodjs/auth'
 import { useNoAuth } from '@redwoodjs/auth'
@@ -29,19 +29,6 @@ export interface RouterState {
 
 const RouterStateContext = createContext<RouterState | undefined>(undefined)
 
-export interface RouterSetContextProps {
-  setState: (newState: Partial<RouterState>) => void
-}
-
-const RouterSetContext = createContext<
-  React.Dispatch<Partial<RouterState>> | undefined
->(undefined)
-
-/**
- * This file splits the context into getter and setter contexts.
- * This was originally meant to optimize the number of redraws
- * See https://kentcdodds.com/blog/how-to-optimize-your-context-value
- */
 export interface RouterContextProviderProps
   extends Omit<RouterState, 'useAuth'> {
   useAuth?: UseAuth
@@ -50,10 +37,6 @@ export interface RouterContextProviderProps
   children: React.ReactNode
 }
 
-function stateReducer(state: RouterState, newState: Partial<RouterState>) {
-  return { ...state, ...newState }
-}
-
 export const RouterContextProvider: React.FC<RouterContextProviderProps> = ({
   useAuth,
   paramTypes,
@@ -61,18 +44,19 @@ export const RouterContextProvider: React.FC<RouterContextProviderProps> = ({
   activeRouteName,
   children,
 }) => {
-  const [state, setState] = useReducer(stateReducer, {
-    useAuth: useAuth || useNoAuth,
-    paramTypes,
-    routes,
-    activeRouteName,
-  })
+  const state = useMemo(
+    () => ({
+      useAuth: useAuth || useNoAuth,
+      paramTypes,
+      routes,
+      activeRouteName,
+    }),
+    [useAuth, paramTypes, routes, activeRouteName]
+  )
 
   return (
     <RouterStateContext.Provider value={state}>
-      <RouterSetContext.Provider value={setState}>
-        {children}
-      </RouterSetContext.Provider>
+      {children}
     </RouterStateContext.Provider>
   )
 }

From f0537299984c0ca4eb40a996513c39a1d85f893b Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Wed, 3 Jan 2024 08:07:14 +0100
Subject: [PATCH 02/18] useRoutePath(): Get the path for the current route by
 default (#9790)

---
 docs/docs/router.md                           | 18 ++++++++++---
 .../src/__tests__/useRoutePaths.test.tsx      | 25 ++++++++++++++++---
 packages/router/src/useRoutePaths.ts          | 12 +++++++--
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/docs/docs/router.md b/docs/docs/router.md
index fc0ddbda938e..16783e872491 100644
--- a/docs/docs/router.md
+++ b/docs/docs/router.md
@@ -478,14 +478,24 @@ Example output:
 
 ## useRoutePath
 
-This is a convenience hook for when you only want the path for a single route.
+Use this hook when you only want the path for a single route. By default it
+will give you the path for the current route
 ```jsx
-const aboutPath = useRoutePath('about') // returns "/about"
+// returns "/about" if you're currently on https://example.org/about
+const aboutPath = useRoutePath() 
 ```
-is the same as
+
+You can also pass in the name of a route and get the path for that route
+```jsx
+// returns "/about"
+const aboutPath = useRoutePath('about')
+```
+
+Note that the above is the same as
 ```jsx
 const routePaths = useRoutePaths()
-const aboutPath = routePaths.about // Also returns "/about"
+// returns "/about"
+const aboutPath = routePaths.about
 ```
 
 ## useRouteName
diff --git a/packages/router/src/__tests__/useRoutePaths.test.tsx b/packages/router/src/__tests__/useRoutePaths.test.tsx
index a456a8bf1e70..f744213f3389 100644
--- a/packages/router/src/__tests__/useRoutePaths.test.tsx
+++ b/packages/router/src/__tests__/useRoutePaths.test.tsx
@@ -2,7 +2,9 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
 
+import { navigate } from '../history'
 import { Route, Router } from '../router'
 import { Set } from '../Set'
 import { useRoutePaths, useRoutePath } from '../useRoutePaths'
@@ -27,17 +29,25 @@ test('useRoutePaths and useRoutePath', async () => {
     children: React.ReactNode
   }
 
-  const Layout = ({ children }: LayoutProps) => <>{children}</>
+  const Layout = ({ children }: LayoutProps) => {
+    // No name means current route
+    const routePath = useRoutePath()
+
+    return (
+      <>
+        <h1>Current route path: &quot;{routePath}&quot;</h1>
+        {children}
+      </>
+    )
+  }
 
   const Page = () => <h1>Page</h1>
 
   const TestRouter = () => (
     <Router>
-      <Route path="/" page={HomePage} name="home" />
       <Set wrap={Layout}>
+        <Route path="/" page={HomePage} name="home" />
         <Route path="/one" page={Page} name="one" />
-      </Set>
-      <Set wrap={Layout}>
         <Route path="/two/{id:Int}" page={Page} name="two" />
       </Set>
     </Router>
@@ -48,4 +58,11 @@ test('useRoutePaths and useRoutePath', async () => {
   await screen.findByText('Home Page')
   await screen.findByText(/^My path is\s+\/$/)
   await screen.findByText(/^All paths:\s+\/,\/one,\/two\/\{id:Int\}$/)
+  await screen.findByText('Current route path: "/"')
+
+  act(() => navigate('/one'))
+  await screen.findByText('Current route path: "/one"')
+
+  act(() => navigate('/two/123'))
+  await screen.findByText('Current route path: "/two/{id:Int}"')
 })
diff --git a/packages/router/src/useRoutePaths.ts b/packages/router/src/useRoutePaths.ts
index e3f269e1270d..3b5a7efd2c90 100644
--- a/packages/router/src/useRoutePaths.ts
+++ b/packages/router/src/useRoutePaths.ts
@@ -1,4 +1,5 @@
 import { useRouterState } from './router-context'
+import { useRouteName } from './useRouteName'
 import type { GeneratedRoutesMap } from './util'
 
 import type { AvailableRoutes } from '.'
@@ -20,8 +21,15 @@ export function useRoutePaths() {
   return routePaths
 }
 
-export function useRoutePath(routeName: keyof AvailableRoutes) {
+export function useRoutePath(routeName?: keyof AvailableRoutes) {
+  const currentRouteName = useRouteName()
   const routePaths = useRoutePaths()
 
-  return routePaths[routeName]
+  const name = routeName || currentRouteName
+
+  if (!name) {
+    return undefined
+  }
+
+  return routePaths[name]
 }

From 660f03311c043f955fe58544d504ec033437e8e0 Mon Sep 17 00:00:00 2001
From: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com>
Date: Wed, 3 Jan 2024 11:34:32 +0000
Subject: [PATCH 03/18] fix(fastify): Prevent duplicate `@fastify/url-data`
 registration (#9794)

---
 packages/api-server/src/plugins/withFunctions.ts | 4 +++-
 packages/api-server/src/plugins/withWebServer.ts | 4 +++-
 packages/fastify/src/api.ts                      | 4 +++-
 packages/fastify/src/graphql.ts                  | 4 +++-
 packages/fastify/src/web.ts                      | 4 +++-
 packages/web-server/src/web.ts                   | 4 +++-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/api-server/src/plugins/withFunctions.ts b/packages/api-server/src/plugins/withFunctions.ts
index d985fcbb0697..dd0a2006bb79 100644
--- a/packages/api-server/src/plugins/withFunctions.ts
+++ b/packages/api-server/src/plugins/withFunctions.ts
@@ -13,7 +13,9 @@ const withFunctions = async (
 ) => {
   const { apiRootPath } = options
   // Add extra fastify plugins
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
 
   // Fastify v4 must await the fastifyRawBody plugin
   // registration to ensure the plugin is ready
diff --git a/packages/api-server/src/plugins/withWebServer.ts b/packages/api-server/src/plugins/withWebServer.ts
index 98c5b9d8ce6c..d265c428159f 100644
--- a/packages/api-server/src/plugins/withWebServer.ts
+++ b/packages/api-server/src/plugins/withWebServer.ts
@@ -28,7 +28,9 @@ const withWebServer = async (
   fastify: FastifyInstance,
   options: WebServerArgs
 ) => {
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
 
   const prerenderedFiles = findPrerenderedHtml()
   const indexPath = getFallbackIndexPath()
diff --git a/packages/fastify/src/api.ts b/packages/fastify/src/api.ts
index 47e5205d01e0..d060edbd3656 100644
--- a/packages/fastify/src/api.ts
+++ b/packages/fastify/src/api.ts
@@ -14,7 +14,9 @@ export async function redwoodFastifyAPI(
   opts: RedwoodFastifyAPIOptions,
   done: HookHandlerDoneFunction
 ) {
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
   await fastify.register(fastifyRawBody)
 
   // TODO: This should be refactored to only be defined once and it might not live here
diff --git a/packages/fastify/src/graphql.ts b/packages/fastify/src/graphql.ts
index bf564f33aace..b3d1ef5d06b1 100644
--- a/packages/fastify/src/graphql.ts
+++ b/packages/fastify/src/graphql.ts
@@ -34,7 +34,9 @@ export async function redwoodFastifyGraphQLServer(
   // These two plugins are needed to transform a Fastify Request to a Lambda event
   // which is used by the RedwoodGraphQLContext and mimics the behavior of the
   // api-server withFunction plugin
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
   await fastify.register(fastifyRawBody)
 
   try {
diff --git a/packages/fastify/src/web.ts b/packages/fastify/src/web.ts
index 93bd0cc89e7e..b8d1bbac26e7 100644
--- a/packages/fastify/src/web.ts
+++ b/packages/fastify/src/web.ts
@@ -21,7 +21,9 @@ export async function redwoodFastifyWeb(
   opts: RedwoodFastifyWebOptions,
   done: HookHandlerDoneFunction
 ) {
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
   const prerenderedFiles = findPrerenderedHtml()
 
   // Serve prerendered HTML directly, instead of the index.
diff --git a/packages/web-server/src/web.ts b/packages/web-server/src/web.ts
index 8b115880335a..1a60ee88efb2 100644
--- a/packages/web-server/src/web.ts
+++ b/packages/web-server/src/web.ts
@@ -27,7 +27,9 @@ export async function redwoodFastifyWeb(
   opts: RedwoodFastifyWebOptions,
   done: HookHandlerDoneFunction
 ) {
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
   const prerenderedFiles = findPrerenderedHtml()
 
   // Serve prerendered HTML directly, instead of the index.

From c77ebee0fec7fc98dd6ca21210816512912e3f63 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Wed, 3 Jan 2024 13:04:29 +0100
Subject: [PATCH 04/18] Add routeParams to useMatch (#9793)

Make it possible to specify route param values that need to match.

If this is your route: `<Route path="/blog/{year}/{month}/{day}"
page={BlogPostPage} name="blogPost" />`
And you want to only match posts from 2001 you can now do this:

`useMatch('/blog/{year}/{month}/{day}', { routeParams: { year: '2001' }
})`

This is **finally** a solution to matching route paths. The work started
in #7469, but we were never able to come up with an api/dx that we
really liked. This PR and #9755 together however provides a solution
that we're much more happy with, and that also supports the use case
outlined in that original PR.

Here's the example from #7469 as it could be solved with the code in
this PR

```jsx
const Navbar () => {
  const { project } = useParams()
  const routePaths = useRoutePaths()

  const modes = [
    {
      name: "Info",
      route: routes.info({ project }),
      match: useMatch(routePaths.info), // using the hook together with routePaths
    },
    {
      name: "Compare",
      route: routes.compare({ project, id: "1" }),
      match: useMatch(useRoutePath('compare')), // alternative to the above
    },
    // ...
  ]

  return (
    <>
      {modes.map((x) => <Button as={Link} to={x.route} isActive={x.match} />)}
    </>
  )
}
```

And, as described at the top of this description, we can also be more
specific than in that example if needed. Like if we only wanted to match
a specific project on the "Compare" route we could do this:

```jsx
  const modes = [
    {
      name: "Info",
      route: routes.info({ project }),
      match: useMatch(routePaths.info),
    },
    {
      name: "Compare against Alpha",
      route: routes.compare({ project, id: "1" }),
      match: useMatch(useRoutePath('compare'), { routeParams: { project: 'alpha' } }),
    },
    {
      name: "Compare against Beta",
      route: routes.compare({ project, id: "1" }),
      match: useMatch(useRoutePath('compare'), { routeParams: { project: 'beta' } }),
    },
    // ...
  ]
```

Here's another example

```jsx
<Route path="/{dynamic}/{path}" page={ExamplePage} name="example" />

const exampleRoutePath = useRoutePath('example')
// => '/{dynamic}/{path}'

const matchOnlyDog = useMatch(exampleRoutePath, { routeParams: { dynamic: 'dog' }})
const matchFullyDynamic = useMatch(exampleRoutePath)
```

In the above example, if the current page url was
`https://example.org/dog/fido` then both `matchOnlyDog` and
`matchFullyDynamic` would have `match: true`.
If the current page instead was `https://example.org/cat/garfield` then
only `matchFullyDynamic` would match

(This PR replaces #9774)
---
 docs/docs/router.md                           |  36 +++
 .../router/src/__tests__/useMatch.test.tsx    | 224 +++++++++++++++++-
 packages/router/src/useMatch.ts               |  38 ++-
 3 files changed, 294 insertions(+), 4 deletions(-)

diff --git a/docs/docs/router.md b/docs/docs/router.md
index 16783e872491..f07df829f4ff 100644
--- a/docs/docs/router.md
+++ b/docs/docs/router.md
@@ -278,6 +278,42 @@ const CustomLink = ({ to, ...rest }) => {
 }
 ```
 
+Passing in `routeParams` you can make it match only on specific route parameter
+values.
+
+```jsx
+const match = useMatch('/product/{category}/{id}', {
+  routeParams: { category: 'shirts' }
+})
+```
+
+The above example will match /product/shirts/213, but not /product/pants/213
+(whereas not specifying `routeParams` at all would match both).
+
+To get the path you need to pass to `useMatch` you can use
+[`useRoutePaths`](#useroutepaths) or [`useRoutePath`](#useroutepath)
+
+Here's an example:
+
+```jsx
+<Route path="/{animal}/{name}" page={AnimalPage} name="animal" />
+
+const animalRoutePath = useRoutePath('animal')
+// => '/{animal}/{name}'
+
+const matchOnlyDog = useMatch(animalRoutePath, { routeParams: { animal: 'dog' }})
+const matchFullyDynamic = useMatch(animalRoutePath)
+```
+
+In the above example, if the current page url was
+`https://example.org/dog/fido` then both `matchOnlyDog` and `matchFullyDynamic`
+would have `match: true`.
+
+If the current page instead was `https://example.org/cat/garfield` then only
+`matchFullyDynamic` would match
+
+See below for more info on route parameters.
+
 ## Route parameters
 
 To match variable data in a path, you can use route parameters, which are specified by a parameter name surrounded by curly braces:
diff --git a/packages/router/src/__tests__/useMatch.test.tsx b/packages/router/src/__tests__/useMatch.test.tsx
index 89d7bcdd8419..ae53a231b06b 100644
--- a/packages/router/src/__tests__/useMatch.test.tsx
+++ b/packages/router/src/__tests__/useMatch.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 
-import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { render, renderHook as tlrRenderHook } from '@testing-library/react'
 
 import { Link } from '../links'
 import { LocationProvider } from '../location'
@@ -97,4 +99,224 @@ describe('useMatch', () => {
 
     expect(getByText(/Dunder Mifflin/)).toHaveStyle('color: red')
   })
+
+  describe('routeParams', () => {
+    const mockLocation = createDummyLocation('/dummy-location')
+
+    type CallbackType = () => ReturnType<typeof useMatch>
+    function renderHook(cb: CallbackType) {
+      return tlrRenderHook(cb, {
+        wrapper: ({ children }) => (
+          <LocationProvider location={mockLocation}>
+            {children}
+          </LocationProvider>
+        ),
+      })
+    }
+
+    function setLocation(pathname: string, search = '') {
+      mockLocation.pathname = pathname
+      mockLocation.search = search
+    }
+
+    afterEach(() => {
+      setLocation('/dummy-location')
+    })
+
+    it('matches a path with literal route param', () => {
+      setLocation('/test-path/foobar')
+
+      const { result } = renderHook(() => useMatch('/test-path/{param}'))
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it('matches a path with given route param value', () => {
+      setLocation('/posts/uuid-string')
+
+      const { result } = renderHook(() =>
+        useMatch('/posts/{id}', { routeParams: { id: 'uuid-string' } })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it("doesn't match a path with different route param value", () => {
+      setLocation('/posts/uuid-string')
+
+      const { result } = renderHook(() =>
+        useMatch('/posts/{id}', { routeParams: { id: 'other-uuid-string' } })
+      )
+
+      expect(result.current.match).toBeFalsy()
+    })
+
+    it('matches a path with default param type', () => {
+      setLocation('/posts/123')
+
+      const { result } = renderHook(() =>
+        useMatch('/posts/{id}', { routeParams: { id: '123' } })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it('matches a path with a specified param type', () => {
+      setLocation('/posts/123')
+
+      const { result } = renderHook(() =>
+        useMatch('/posts/{id:Int}', { routeParams: { id: 123 } })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it("doesn't match a path with a specified param type with different value", () => {
+      setLocation('/posts/123')
+
+      const { result } = renderHook(() =>
+        useMatch('/posts/{id:Int}', { routeParams: { id: '123' } })
+      )
+
+      expect(result.current.match).toBeFalsy()
+    })
+
+    it('matches with a subset of param values specified (year, month)', () => {
+      setLocation('/year/1970/month/08/day/21')
+
+      const { result } = renderHook(() =>
+        useMatch('/year/{year}/month/{month}/day/{day}', {
+          routeParams: { year: '1970', month: '08' },
+        })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it('matches with a subset of param values specified (month)', () => {
+      setLocation('/year/1970/month/08/day/21')
+
+      const { result } = renderHook(() =>
+        useMatch('/year/{year}/month/{month}/day/{day}', {
+          routeParams: { month: '08' },
+        })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it('matches with a subset of param values specified (day)', () => {
+      const useMatchHook = () =>
+        useMatch('/year/{year}/month/{month}/day/{day}', {
+          routeParams: { day: '21' },
+        })
+
+      setLocation('/year/1970/month/08/day/21')
+      const { result: result1970 } = renderHook(useMatchHook)
+      expect(result1970.current.match).toBeTruthy()
+
+      setLocation('/year/1970/month/01/day/21')
+      const { result: resultJan } = renderHook(useMatchHook)
+      expect(resultJan.current.match).toBeTruthy()
+
+      setLocation('/year/2024/month/08/day/21')
+      const { result: result2024 } = renderHook(useMatchHook)
+      expect(result2024.current.match).toBeTruthy()
+    })
+
+    it("doesn't match with a subset of wrong param values specified (month)", () => {
+      setLocation('/year/1970/month/08/day/21')
+
+      const { result } = renderHook(() =>
+        useMatch('/year/{year}/month/{month}/day/{day}', {
+          routeParams: { month: '01' },
+        })
+      )
+
+      expect(result.current.match).toBeFalsy()
+    })
+
+    it("doesn't match with a subset of wrong param values specified (day)", () => {
+      setLocation('/year/1970/month/08/day/21')
+
+      const { result } = renderHook(() =>
+        useMatch('/year/{year}/month/{month}/day/{day}', {
+          routeParams: { day: '31' },
+        })
+      )
+
+      expect(result.current.match).toBeFalsy()
+    })
+  })
+
+  describe('routeParams + searchParams', () => {
+    const mockLocation = createDummyLocation('/dummy-location')
+
+    type CallbackType = () => ReturnType<typeof useMatch>
+    function renderHook(cb: CallbackType) {
+      return tlrRenderHook(cb, {
+        wrapper: ({ children }) => (
+          <LocationProvider location={mockLocation}>
+            {children}
+          </LocationProvider>
+        ),
+      })
+    }
+
+    function setLocation(pathname: string, search = '') {
+      mockLocation.pathname = pathname
+      mockLocation.search = search
+    }
+
+    afterEach(() => {
+      setLocation('/dummy-location')
+    })
+
+    it('matches a path with literal route param', () => {
+      setLocation('/test-path/foobar', '?s1=one&s2=two')
+
+      const { result } = renderHook(() => useMatch('/test-path/{param}'))
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it('matches a path with literal route param and given searchParam', () => {
+      setLocation('/test-path/foobar', '?s1=one&s2=two')
+
+      const { result } = renderHook(() =>
+        useMatch('/test-path/{param}', {
+          searchParams: [{ s1: 'one' }],
+        })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+
+    it("doesn't match a path with wrong route param value and given searchParam", () => {
+      setLocation('/test-path/foobar', '?s1=one&s2=two')
+
+      const { result } = renderHook(() =>
+        useMatch('/test-path/{param}', {
+          routeParams: { param: 'wrong' },
+          searchParams: [{ s1: 'one' }],
+        })
+      )
+
+      expect(result.current.match).toBeFalsy()
+    })
+
+    it('matches a deeper path with matchSubPaths', () => {
+      setLocation('/test-path/foobar/fizz/buzz', '?s1=one&s2=two')
+
+      const { result } = renderHook(() =>
+        useMatch('/test-path/{param}/{param-two}', {
+          routeParams: { ['param-two']: 'fizz' },
+          searchParams: [{ s1: 'one' }],
+          matchSubPaths: true,
+        })
+      )
+
+      expect(result.current.match).toBeTruthy()
+    })
+  })
 })
diff --git a/packages/router/src/useMatch.ts b/packages/router/src/useMatch.ts
index 180e7a93e094..c2c5ac52e943 100644
--- a/packages/router/src/useMatch.ts
+++ b/packages/router/src/useMatch.ts
@@ -3,15 +3,17 @@ import { matchPath } from './util'
 import type { FlattenSearchParams } from './util'
 
 type UseMatchOptions = {
+  routeParams?: Record<string, any>
   searchParams?: FlattenSearchParams
   matchSubPaths?: boolean
 }
 
 /**
  * Returns an object of { match: boolean; params: Record<string, unknown>; }
- * if the path matches the current location match will be true.
+ * If the path matches the current location `match` will be true.
  * Params will be an object of the matched params, if there are any.
  *
+ * Provide routeParams options to match specific route param values
  * Provide searchParams options to match the current location.search
  *
  * This is useful for components that need to know "active" state, e.g.
@@ -30,8 +32,11 @@ type UseMatchOptions = {
  *
  * Match sub paths
  * const match = useMatch('/product', { matchSubPaths: true })
+ *
+ * Match only specific route param values
+ * const match = useMatch('/product/{category}/{id}', { routeParams: { category: 'shirts' } })
  */
-export const useMatch = (pathname: string, options?: UseMatchOptions) => {
+export const useMatch = (routePath: string, options?: UseMatchOptions) => {
   const location = useLocation()
   if (!location) {
     return { match: false }
@@ -54,7 +59,34 @@ export const useMatch = (pathname: string, options?: UseMatchOptions) => {
     }
   }
 
-  return matchPath(pathname, location.pathname, {
+  const matchInfo = matchPath(routePath, location.pathname, {
     matchSubPaths: options?.matchSubPaths,
   })
+
+  if (!matchInfo.match) {
+    return { match: false }
+  }
+
+  const routeParams = Object.entries(options?.routeParams || {})
+
+  if (routeParams.length > 0) {
+    if (!isMatchWithParams(matchInfo) || !matchInfo.params) {
+      return { match: false }
+    }
+
+    // If paramValues were given, they must all match
+    const isParamMatch = routeParams.every(([key, value]) => {
+      return matchInfo.params[key] === value
+    })
+
+    if (!isParamMatch) {
+      return { match: false }
+    }
+  }
+
+  return matchInfo
+}
+
+function isMatchWithParams(match: unknown): match is { params: any } {
+  return match !== null && typeof match === 'object' && 'params' in match
 }

From 404c22f159cfd7268cf542bf73915574586d7767 Mon Sep 17 00:00:00 2001
From: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:30:13 +0000
Subject: [PATCH 05/18] chore(data-migration): Fix test exit code (#9795)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
---
 .../cli-packages/dataMigrate/src/__tests__/upHandler.test.ts  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts b/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
index 2fbf0f457bbc..8942a94973cf 100644
--- a/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
+++ b/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
@@ -249,6 +249,10 @@ describe('upHandler', () => {
       distPath: getPaths().api.dist,
     })
 
+    // The handler will error and set the exit code to 1, we must revert that
+    // or test suite itself will fail.
+    process.exitCode = 0
+
     expect(console.info.mock.calls[0][0]).toMatch(
       '1 data migration(s) completed successfully.'
     )

From 6e1d0c47d8f267eb7003b04ad3cf94c5d6a74eb1 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Wed, 3 Jan 2024 15:05:54 +0100
Subject: [PATCH 06/18] data migrate: Clean up upHandler test (#9796)

---
 .../src/__tests__/upHandler.test.ts           | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts b/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
index 8942a94973cf..4199e214e443 100644
--- a/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
+++ b/packages/cli-packages/dataMigrate/src/__tests__/upHandler.test.ts
@@ -8,6 +8,25 @@ import { handler, NO_PENDING_MIGRATIONS_MESSAGE } from '../commands/upHandler'
 
 const redwoodProjectPath = '/redwood-app'
 
+let consoleLogMock: jest.SpyInstance
+let consoleInfoMock: jest.SpyInstance
+let consoleErrorMock: jest.SpyInstance
+let consoleWarnMock: jest.SpyInstance
+
+beforeEach(() => {
+  consoleLogMock = jest.spyOn(console, 'log').mockImplementation()
+  consoleInfoMock = jest.spyOn(console, 'info').mockImplementation()
+  consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
+  consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation()
+})
+
+afterEach(() => {
+  consoleLogMock.mockRestore()
+  consoleInfoMock.mockRestore()
+  consoleErrorMock.mockRestore()
+  consoleWarnMock.mockRestore()
+})
+
 jest.mock('fs', () => require('memfs').fs)
 
 const mockDataMigrations: { current: any[] } = { current: [] }
@@ -146,8 +165,6 @@ const ranDataMigration = {
 
 describe('upHandler', () => {
   it("noops if there's no data migrations directory", async () => {
-    console.info = jest.fn()
-
     vol.fromNestedJSON(
       {
         'redwood.toml': '',
@@ -174,7 +191,9 @@ describe('upHandler', () => {
       distPath: getPaths().api.dist,
     })
 
-    expect(console.info.mock.calls[0][0]).toMatch(NO_PENDING_MIGRATIONS_MESSAGE)
+    expect(consoleInfoMock.mock.calls[0][0]).toMatch(
+      NO_PENDING_MIGRATIONS_MESSAGE
+    )
   })
 
   it("noops if there's no pending migrations", async () => {
@@ -199,21 +218,17 @@ describe('upHandler', () => {
       redwoodProjectPath
     )
 
-    console.info = jest.fn()
-
     await handler({
       importDbClientFromDist: true,
       distPath: getPaths().api.dist,
     })
 
-    expect(console.info.mock.calls[0][0]).toMatch(NO_PENDING_MIGRATIONS_MESSAGE)
+    expect(consoleInfoMock.mock.calls[0][0]).toMatch(
+      NO_PENDING_MIGRATIONS_MESSAGE
+    )
   })
 
   it('runs pending migrations', async () => {
-    console.info = jest.fn()
-    console.error = jest.fn()
-    console.warn = jest.fn()
-
     mockDataMigrations.current = [
       {
         version: '20230822075441',
@@ -253,13 +268,13 @@ describe('upHandler', () => {
     // or test suite itself will fail.
     process.exitCode = 0
 
-    expect(console.info.mock.calls[0][0]).toMatch(
+    expect(consoleInfoMock.mock.calls[0][0]).toMatch(
       '1 data migration(s) completed successfully.'
     )
-    expect(console.error.mock.calls[1][0]).toMatch(
+    expect(consoleErrorMock.mock.calls[1][0]).toMatch(
       '1 data migration(s) exited with errors.'
     )
-    expect(console.warn.mock.calls[0][0]).toMatch(
+    expect(consoleWarnMock.mock.calls[0][0]).toMatch(
       '1 data migration(s) skipped due to previous error'
     )
   })

From fe92493ba398c6620c9354038f8215bab4cce132 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:24:58 +0100
Subject: [PATCH 07/18] fix(deps): update dependency sqlite to v5 (#9698)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>
Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
---
 packages/studio/package.json |  2 +-
 yarn.lock                    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/studio/package.json b/packages/studio/package.json
index 5969ec1d396b..aec9f3bff4ff 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -47,7 +47,7 @@
     "qs": "6.11.2",
     "smtp-server": "3.13.0",
     "split2": "4.2.0",
-    "sqlite": "4.2.1",
+    "sqlite": "5.1.1",
     "sqlite3": "5.1.6",
     "uuid": "9.0.1",
     "yargs": "17.7.2"
diff --git a/yarn.lock b/yarn.lock
index f9958be5f81f..04c898328bb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9447,7 +9447,7 @@ __metadata:
     react-toastify: "npm:9.1.3"
     smtp-server: "npm:3.13.0"
     split2: "npm:4.2.0"
-    sqlite: "npm:4.2.1"
+    sqlite: "npm:5.1.1"
     sqlite3: "npm:5.1.6"
     tailwindcss: "npm:3.3.5"
     typescript: "npm:5.3.3"
@@ -32924,10 +32924,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sqlite@npm:4.2.1":
-  version: 4.2.1
-  resolution: "sqlite@npm:4.2.1"
-  checksum: 55cd4161aedcf41e3ca05990fd036d38a248503f0d2c7c5df67ae01c17059188c38219fbc679965dcab26c5d5a9431b25f12f9c46d65f377d8d851c5a4d48334
+"sqlite@npm:5.1.1":
+  version: 5.1.1
+  resolution: "sqlite@npm:5.1.1"
+  checksum: d656055cd8d4c4637c8ad4d14d4c8e04a5fd44ede5eae54f36deefa844724588e6c45dbb50ab45954fca24ba1362b6936df1bd42ad0c511275e6dbcffbb62e52
   languageName: node
   linkType: hard
 

From c80c5128392a95816a8367e843ef07be6a16eeac Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:01:42 +0000
Subject: [PATCH 08/18] fix(deps): update dependency react-helmet-async to v2
 (#9697)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>
Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
---
 packages/web/package.json |  2 +-
 yarn.lock                 | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/web/package.json b/packages/web/package.json
index a460790bbe9b..62443d9ac87a 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -44,7 +44,7 @@
     "graphql": "16.8.1",
     "graphql-sse": "2.4.0",
     "graphql-tag": "2.12.6",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "2.0.3",
     "react-hot-toast": "2.4.1",
     "stacktracey": "2.1.8",
     "ts-toolbelt": "9.6.0"
diff --git a/yarn.lock b/yarn.lock
index 04c898328bb6..3c1f1c57e253 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9638,7 +9638,7 @@ __metadata:
     nodemon: "npm:3.0.2"
     react: "npm:0.0.0-experimental-e5205658f-20230913"
     react-dom: "npm:0.0.0-experimental-e5205658f-20230913"
-    react-helmet-async: "npm:1.3.0"
+    react-helmet-async: "npm:2.0.3"
     react-hot-toast: "npm:2.4.1"
     stacktracey: "npm:2.1.8"
     ts-toolbelt: "npm:9.6.0"
@@ -30507,7 +30507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.2.0":
+"react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
   checksum: 0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
@@ -30530,19 +30530,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helmet-async@npm:1.3.0":
-  version: 1.3.0
-  resolution: "react-helmet-async@npm:1.3.0"
+"react-helmet-async@npm:2.0.3":
+  version: 2.0.3
+  resolution: "react-helmet-async@npm:2.0.3"
   dependencies:
-    "@babel/runtime": "npm:^7.12.5"
     invariant: "npm:^2.2.4"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.2.0"
+    react-fast-compare: "npm:^3.2.2"
     shallowequal: "npm:^1.1.0"
   peerDependencies:
     react: ^16.6.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
-  checksum: 8f3e6d26beff61d2ed18f7b41561df3e4d83a7582914c7196aa65158c7f3cce939276547d7a0b8987952d9d44131406df74efba02d1f8fa8a3940b49e6ced70b
+  checksum: 3ac58fac566e3f4951c3853975afd57dbc3af1442a897391a226fb1a54cc757506912d13485e897c61ecefe5d97e673ee91688b11ff20eb769b172c0309514ee
   languageName: node
   linkType: hard
 

From 9d9d373562ac9c09ff5c202fcfb88f9dfd95b995 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:06:00 +0000
Subject: [PATCH 09/18] chore(deps): update dependency
 @apollo/experimental-nextjs-app-support to v0.5.2 (#9716)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[@apollo/experimental-nextjs-app-support](https://togithub.com/apollographql/apollo-client-nextjs)
| [`0.5.1` ->
`0.5.2`](https://renovatebot.com/diffs/npm/@apollo%2fexperimental-nextjs-app-support/0.5.1/0.5.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@apollo%2fexperimental-nextjs-app-support/0.5.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@apollo%2fexperimental-nextjs-app-support/0.5.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@apollo%2fexperimental-nextjs-app-support/0.5.1/0.5.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@apollo%2fexperimental-nextjs-app-support/0.5.1/0.5.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>apollographql/apollo-client-nextjs
(@&#8203;apollo/experimental-nextjs-app-support)</summary>

###
[`v0.5.2`](https://togithub.com/apollographql/apollo-client-nextjs/releases/tag/v0.5.2):
0.5.2: Prepare for changes in upcoming Apollo Client 3.9 pre-release
versions

[Compare
Source](https://togithub.com/apollographql/apollo-client-nextjs/compare/419072f9da36d9dbebc2ad6d367b8510d0fed994...v0.5.2)

Upcoming pre-release versions of Apollo Client 3.9 contain a change to
an internal data structure that is used by this package. (See
[https://github.com/apollographql/apollo-client/pull/11345](https://togithub.com/apollographql/apollo-client/pull/11345)
)

This release prepares for that change and ensures backwards
compatibility with Apollo Client 3.8 as well as the upcoming 3.9
versions.

#### What's Changed

- prepare for change in `QueryManager.inFlightLinkObservable` (Apollo
Client 3.9 beta) by [@&#8203;phryneas](https://togithub.com/phryneas) in
[https://github.com/apollographql/apollo-client-nextjs/pull/144](https://togithub.com/apollographql/apollo-client-nextjs/pull/144)

**Full Changelog**:
https://github.com/apollographql/apollo-client-nextjs/compare/v.0.5.1...v0.5.2

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/redwoodjs/redwood).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy45My4xIiwidXBkYXRlZEluVmVyIjoiMzcuOTMuMSIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
---
 packages/web/package.json |  2 +-
 yarn.lock                 | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/package.json b/packages/web/package.json
index 62443d9ac87a..b1866bb1b94a 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -50,7 +50,7 @@
     "ts-toolbelt": "9.6.0"
   },
   "devDependencies": {
-    "@apollo/experimental-nextjs-app-support": "0.5.1",
+    "@apollo/experimental-nextjs-app-support": "0.5.2",
     "@babel/cli": "7.23.4",
     "@babel/core": "^7.22.20",
     "@testing-library/jest-dom": "6.1.5",
diff --git a/yarn.lock b/yarn.lock
index 3c1f1c57e253..56ec480e1eb5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -145,9 +145,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/experimental-nextjs-app-support@npm:0.5.1":
-  version: 0.5.1
-  resolution: "@apollo/experimental-nextjs-app-support@npm:0.5.1"
+"@apollo/experimental-nextjs-app-support@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@apollo/experimental-nextjs-app-support@npm:0.5.2"
   dependencies:
     server-only: "npm:^0.0.1"
     superjson: "npm:^1.12.2"
@@ -156,7 +156,7 @@ __metadata:
     "@apollo/client": ">=3.8.0-rc || ^3.8.0 || >=3.9.0-alpha || >=3.9.0-beta || >=3.9.0-rc"
     next: ^13.4.1 || ^14.0.0
     react: ^18
-  checksum: fe6df5624df7e6268eb3dde7c34c78350ed37efcfa5c317c6f6d9705ab62a513d1950e7bd17748853103d96208e57934d1841b52454165b723237585998bdcae
+  checksum: 3070a5a02dcb4b62cf813379335d1c639371ba36f8d5553af6e45201cdf6efb8fab3fcf68e74567e5110dd5b76047f5aa310b6bfef8f36a660be88de16906c95
   languageName: node
   linkType: hard
 
@@ -9621,7 +9621,7 @@ __metadata:
   resolution: "@redwoodjs/web@workspace:packages/web"
   dependencies:
     "@apollo/client": "npm:3.8.8"
-    "@apollo/experimental-nextjs-app-support": "npm:0.5.1"
+    "@apollo/experimental-nextjs-app-support": "npm:0.5.2"
     "@babel/cli": "npm:7.23.4"
     "@babel/core": "npm:^7.22.20"
     "@babel/runtime-corejs3": "npm:7.23.6"

From 5734dcc545bb1521c02b8d7ac398511923e76170 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Wed, 3 Jan 2024 19:19:17 +0100
Subject: [PATCH 10/18] Revert accidental changes to test-project

---
 __fixtures__/test-project/web/src/App.tsx             | 10 +---------
 .../test-project/web/src/graphql/possibleTypes.ts     | 11 -----------
 2 files changed, 1 insertion(+), 20 deletions(-)
 delete mode 100644 __fixtures__/test-project/web/src/graphql/possibleTypes.ts

diff --git a/__fixtures__/test-project/web/src/App.tsx b/__fixtures__/test-project/web/src/App.tsx
index cb77cb1e4322..65419d60c7d6 100644
--- a/__fixtures__/test-project/web/src/App.tsx
+++ b/__fixtures__/test-project/web/src/App.tsx
@@ -1,7 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import possibleTypes from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -14,14 +13,7 @@ const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
-        <RedwoodApolloProvider
-          useAuth={useAuth}
-          graphQLClientConfig={{
-            cacheConfig: {
-              ...possibleTypes,
-            },
-          }}
-        >
+        <RedwoodApolloProvider useAuth={useAuth}>
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>
diff --git a/__fixtures__/test-project/web/src/graphql/possibleTypes.ts b/__fixtures__/test-project/web/src/graphql/possibleTypes.ts
deleted file mode 100644
index a8d476e9029c..000000000000
--- a/__fixtures__/test-project/web/src/graphql/possibleTypes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface PossibleTypesResultData {
-  possibleTypes: {
-    [key: string]: string[]
-  }
-}
-
-const result: PossibleTypesResultData = {
-  possibleTypes: {},
-}
-
-export default result

From ac6131ba0f588357da20b5fa948598dcad134af2 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Fri, 5 Jan 2024 20:24:51 +0100
Subject: [PATCH 11/18] docs(fragments): Typo, grammar and formatting fixes
 (#9802)

---
 docs/docs/graphql/fragments.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/docs/graphql/fragments.md b/docs/docs/graphql/fragments.md
index 105ce7af7919..e66041550247 100644
--- a/docs/docs/graphql/fragments.md
+++ b/docs/docs/graphql/fragments.md
@@ -151,7 +151,6 @@ import { fragment } from '@redwoodjs/web/apollo'
 
 Access typename of fragment you registered.
 
-
 ```ts
 import { typename } from '@redwoodjs/web/apollo'
 ```
@@ -166,6 +165,7 @@ fragment BookInfo on Book {
   author
   publicationYear
 }
+```
 
 the `typename` is `Book`.
 
@@ -294,9 +294,9 @@ import possibleTypes from 'src/graphql/possibleTypes'
 >
 ```
 
-To generate the `src/graphql/possibleTypes`, configure the `redwood.toml`:
+To generate the `src/graphql/possibleTypes` file, enable fragments in `redwood.toml`:
 
-```toml title=redwood.roml
+```toml title=redwood.toml
 [graphql]
-  fragments=true
+  fragments = true
 ```

From ffe7fb867effbad45974608601cbfe636f1f5af6 Mon Sep 17 00:00:00 2001
From: Tom Mrazauskas <tom@mrazauskas.de>
Date: Sat, 6 Jan 2024 12:30:18 +0200
Subject: [PATCH 12/18] chore: bump TSTyche (#9803)

---
 package.json                 |  2 +-
 packages/router/package.json |  2 +-
 packages/web/package.json    |  2 +-
 yarn.lock                    | 16 ++++++++--------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5a5ffdd5b298..bdd9d9aec787 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "ora": "7.0.1",
     "prompts": "2.4.2",
     "rimraf": "5.0.5",
-    "tstyche": "1.0.0-beta.3",
+    "tstyche": "1.0.0-beta.9",
     "tsx": "4.6.2",
     "typescript": "5.3.3",
     "yargs": "17.7.2",
diff --git a/packages/router/package.json b/packages/router/package.json
index 126c9942b2c3..a1ac88e769dd 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -37,7 +37,7 @@
     "jest": "29.7.0",
     "react": "0.0.0-experimental-e5205658f-20230913",
     "react-dom": "0.0.0-experimental-e5205658f-20230913",
-    "tstyche": "1.0.0-beta.3",
+    "tstyche": "1.0.0-beta.9",
     "typescript": "5.3.3"
   },
   "peerDependencies": {
diff --git a/packages/web/package.json b/packages/web/package.json
index b1866bb1b94a..0eaee33e96dc 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -61,7 +61,7 @@
     "nodemon": "3.0.2",
     "react": "0.0.0-experimental-e5205658f-20230913",
     "react-dom": "0.0.0-experimental-e5205658f-20230913",
-    "tstyche": "1.0.0-beta.3",
+    "tstyche": "1.0.0-beta.9",
     "typescript": "5.3.3"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 56ec480e1eb5..3c992ebdd81e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9320,7 +9320,7 @@ __metadata:
     jest: "npm:29.7.0"
     react: "npm:0.0.0-experimental-e5205658f-20230913"
     react-dom: "npm:0.0.0-experimental-e5205658f-20230913"
-    tstyche: "npm:1.0.0-beta.3"
+    tstyche: "npm:1.0.0-beta.9"
     typescript: "npm:5.3.3"
   peerDependencies:
     react: 0.0.0-experimental-e5205658f-20230913
@@ -9642,7 +9642,7 @@ __metadata:
     react-hot-toast: "npm:2.4.1"
     stacktracey: "npm:2.1.8"
     ts-toolbelt: "npm:9.6.0"
-    tstyche: "npm:1.0.0-beta.3"
+    tstyche: "npm:1.0.0-beta.9"
     typescript: "npm:5.3.3"
   peerDependencies:
     react: 0.0.0-experimental-e5205658f-20230913
@@ -31801,7 +31801,7 @@ __metadata:
     ora: "npm:7.0.1"
     prompts: "npm:2.4.2"
     rimraf: "npm:5.0.5"
-    tstyche: "npm:1.0.0-beta.3"
+    tstyche: "npm:1.0.0-beta.9"
     tsx: "npm:4.6.2"
     typescript: "npm:5.3.3"
     yargs: "npm:17.7.2"
@@ -34452,17 +34452,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tstyche@npm:1.0.0-beta.3":
-  version: 1.0.0-beta.3
-  resolution: "tstyche@npm:1.0.0-beta.3"
+"tstyche@npm:1.0.0-beta.9":
+  version: 1.0.0-beta.9
+  resolution: "tstyche@npm:1.0.0-beta.9"
   peerDependencies:
     typescript: 4.x || 5.x
   peerDependenciesMeta:
     typescript:
       optional: true
   bin:
-    tstyche: build/bin.js
-  checksum: 8db6acde30b8905c891c3854837340e7bbfee20e79e6eae2e674e1e966737f8c79079325c330b51b922f3157a3fcb26da0005032a45ade302f20b1d3e3ccfd37
+    tstyche: ./build/bin.js
+  checksum: 2682c3f7e2d83fa0af795ba14e1c83873e3f8c31f761a8af10512c3476cf824b7ef096ba9deec3fc0e12356beaf2a20abfafcb73202db4f14c7c2877db2c5a87
   languageName: node
   linkType: hard
 

From aaf721b02b429caf761e9978c6a795b78e5cc69e Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Sat, 6 Jan 2024 11:46:08 +0100
Subject: [PATCH 13/18] Use TS for rebuild-test-project-fixture script (#9804)

---
 __fixtures__/test-project/web/package.json    |  4 +-
 package.json                                  |  2 +-
 ...ure.js => rebuild-test-project-fixture.ts} | 83 ++++++++-----------
 tasks/test-project/typing.js                  | 40 ---------
 tasks/test-project/typing.ts                  | 21 +++++
 5 files changed, 57 insertions(+), 93 deletions(-)
 rename tasks/test-project/{rebuild-test-project-fixture.js => rebuild-test-project-fixture.ts} (89%)
 delete mode 100644 tasks/test-project/typing.js
 create mode 100644 tasks/test-project/typing.ts

diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json
index d94fbf0cce2f..089dd533bc0c 100644
--- a/__fixtures__/test-project/web/package.json
+++ b/__fixtures__/test-project/web/package.json
@@ -24,9 +24,9 @@
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
     "postcss-loader": "^7.3.4",
     "prettier-plugin-tailwindcss": "0.4.1",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/package.json b/package.json
index bdd9d9aec787..40df68ed87aa 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "project:deps": "node ./tasks/framework-tools/frameworkDepsToProject.mjs",
     "project:sync": "node ./tasks/framework-tools/frameworkSyncToProject.mjs",
     "project:tarsync": "node ./tasks/framework-tools/tarsync.mjs",
-    "rebuild-test-project-fixture": "node ./tasks/test-project/rebuild-test-project-fixture.js",
+    "rebuild-test-project-fixture": "tsx ./tasks/test-project/rebuild-test-project-fixture.ts",
     "release": "node ./tasks/release/release.mjs",
     "release:compare": "node ./tasks/release/compare/compare.mjs",
     "release:notes": "node ./tasks/release/generateReleaseNotes.mjs",
diff --git a/tasks/test-project/rebuild-test-project-fixture.js b/tasks/test-project/rebuild-test-project-fixture.ts
similarity index 89%
rename from tasks/test-project/rebuild-test-project-fixture.js
rename to tasks/test-project/rebuild-test-project-fixture.ts
index 32dee47c1bfb..9035328331bb 100755
--- a/tasks/test-project/rebuild-test-project-fixture.js
+++ b/tasks/test-project/rebuild-test-project-fixture.ts
@@ -1,34 +1,28 @@
-#!/usr/bin/env node
-/* eslint-env node, es6*/
-//@ts-check
-const fs = require('fs')
-const os = require('os')
-const path = require('path')
-
-const chalk = require('chalk')
-const fse = require('fs-extra')
-const { rimraf } = require('rimraf')
-const { hideBin } = require('yargs/helpers')
-const yargs = require('yargs/yargs')
-
-const {
-  RedwoodTUI,
-  ReactiveTUIContent,
-  RedwoodStyling,
-} = require('@redwoodjs/tui')
-
-const {
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import chalk from 'chalk'
+import fse from 'fs-extra'
+import { rimraf } from 'rimraf'
+import { hideBin } from 'yargs/helpers'
+import yargs from 'yargs/yargs'
+
+import { RedwoodTUI, ReactiveTUIContent, RedwoodStyling } from '@redwoodjs/tui'
+
+import {
   addFrameworkDepsToProject,
   copyFrameworkPackages,
-} = require('./frameworkLinking')
-const { webTasks, apiTasks } = require('./tui-tasks')
-const { isAwaitable } = require('./typing')
-const {
-  getExecaOptions: utilGetExecaOptions,
+} from './frameworkLinking'
+import { webTasks, apiTasks } from './tui-tasks'
+import { isAwaitable } from './typing'
+import type { TuiTaskDef } from './typing'
+import {
+  getExecaOptions as utilGetExecaOptions,
   updatePkgJsonScripts,
   ExecaError,
   exec,
-} = require('./util')
+} from './util'
 
 const args = yargs(hideBin(process.argv))
   .usage('Usage: $0 [option]')
@@ -55,6 +49,7 @@ const args = yargs(hideBin(process.argv))
 
 const { verbose, resume, resumePath, resumeStep } = args
 
+const RW_FRAMEWORK_PATH = path.join(__dirname, '../../')
 const OUTPUT_PROJECT_PATH = resumePath
   ? /* path.resolve(String(resumePath)) */ resumePath
   : path.join(
@@ -82,27 +77,18 @@ if (!startStep) {
   }
 }
 
-const RW_FRAMEWORKPATH = path.join(__dirname, '../../')
-
 const tui = new RedwoodTUI()
 
-/** @type {(string) => import('execa').Options} */
-function getExecaOptions(cwd) {
+function getExecaOptions(cwd: string) {
   return { ...utilGetExecaOptions(cwd), stdio: 'pipe' }
 }
 
-/**
- * @param {string} step
- */
-function beginStep(step) {
+function beginStep(step: string) {
   fs.mkdirSync(OUTPUT_PROJECT_PATH, { recursive: true })
   fs.writeFileSync(path.join(OUTPUT_PROJECT_PATH, 'step.txt'), '' + step)
 }
 
-/**
- * @param {import('./typing').TuiTaskDef} taskDef
- */
-async function tuiTask({ step, title, content, task, parent }) {
+async function tuiTask({ step, title, content, task, parent }: TuiTaskDef) {
   const stepId = (parent ? parent + '.' : '') + step
 
   const tuiContent = new ReactiveTUIContent({
@@ -139,7 +125,7 @@ async function tuiTask({ step, title, content, task, parent }) {
     return
   }
 
-  let promise
+  let promise: void | Promise<unknown>
 
   try {
     promise = task()
@@ -251,28 +237,25 @@ if (resumePath && !fs.existsSync(path.join(resumePath, 'redwood.toml'))) {
 }
 
 const createProject = () => {
-  let cmd = `yarn node ./packages/create-redwood-app/dist/create-redwood-app.js ${OUTPUT_PROJECT_PATH}`
+  const cmd = `yarn node ./packages/create-redwood-app/dist/create-redwood-app.js ${OUTPUT_PROJECT_PATH}`
 
   const subprocess = exec(
     cmd,
     // We create a ts project and convert using ts-to-js at the end if typescript flag is false
     ['--no-yarn-install', '--typescript', '--overwrite', '--no-git'],
-    getExecaOptions(RW_FRAMEWORKPATH)
+    getExecaOptions(RW_FRAMEWORK_PATH)
   )
 
   return subprocess
 }
 
 const copyProject = async () => {
-  const FIXTURE_TESTPROJ_PATH = path.join(
-    RW_FRAMEWORKPATH,
-    '__fixtures__/test-project'
-  )
+  const fixturePath = path.join(RW_FRAMEWORK_PATH, '__fixtures__/test-project')
 
   // remove existing Fixture
-  await rimraf(FIXTURE_TESTPROJ_PATH)
+  await rimraf(fixturePath)
   // copy from tempDir to Fixture dir
-  await fse.copy(OUTPUT_PROJECT_PATH, FIXTURE_TESTPROJ_PATH)
+  await fse.copy(OUTPUT_PROJECT_PATH, fixturePath)
   // cleanup after ourselves
   await rimraf(OUTPUT_PROJECT_PATH)
 }
@@ -304,7 +287,7 @@ async function runCommand() {
       return exec(
         'yarn build:clean && yarn build',
         [],
-        getExecaOptions(RW_FRAMEWORKPATH)
+        getExecaOptions(RW_FRAMEWORK_PATH)
       )
     },
   })
@@ -315,7 +298,7 @@ async function runCommand() {
     content: 'Adding framework dependencies to project...',
     task: () => {
       return addFrameworkDepsToProject(
-        RW_FRAMEWORKPATH,
+        RW_FRAMEWORK_PATH,
         OUTPUT_PROJECT_PATH,
         'pipe' // TODO: Remove this when everything is using @rwjs/tui
       )
@@ -362,7 +345,7 @@ async function runCommand() {
     title: '[link] Copying framework packages to project',
     task: () => {
       return copyFrameworkPackages(
-        RW_FRAMEWORKPATH,
+        RW_FRAMEWORK_PATH,
         OUTPUT_PROJECT_PATH,
         'pipe'
       )
diff --git a/tasks/test-project/typing.js b/tasks/test-project/typing.js
deleted file mode 100644
index cc9d81f96634..000000000000
--- a/tasks/test-project/typing.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @typedef ExecaResult
- * @type {object}
- * @property {string} stdout
- * @property {string} stderr
- * @property {number} exitCode
- */
-
-/**
- * @typedef TuiTaskDef
- * @type {object}
- * @property {number} step 0 based step number.
- * @property {string=} parent The parent task to this task.
- * @property {string} title Title of this task.
- * @property {string=} content Reactive content.
- * @property {() => boolean=} enabled Whether this task is enabled or not.
- *   Disabled tasks don't show up in the list.
- * @property {() => Promise<unknown> | void} task
- *   The task to run. Will be passed an instance of TUI when called.
- */
-
-/**
- * @typedef TuiTaskList
- * @type {Array<Omit<TuiTaskDef, 'step'>>}
- */
-
-/**
- * @param {Promise<unknown> | void} promise
- * @return {promise is Promise<unknown>}
- */
-function isAwaitable(promise) {
-  return (
-    typeof promise !== 'undefined' &&
-    'then' in /** @type Promise<unknown> */ (promise)
-  )
-}
-
-module.exports = {
-  isAwaitable,
-}
diff --git a/tasks/test-project/typing.ts b/tasks/test-project/typing.ts
new file mode 100644
index 000000000000..9528b57ef432
--- /dev/null
+++ b/tasks/test-project/typing.ts
@@ -0,0 +1,21 @@
+export interface TuiTaskDef {
+  /** 0 based step number */
+  step: number
+  /** The parent task to this task. */
+  parent?: string
+  /** Title of this task. */
+  title: string
+  /** Reactive content */
+  content?: string
+  /**
+   * Whether this task is enabled or not. Disabled tasks don't show up in the
+   * list
+   */
+  enabled?: boolean | (() => boolean)
+  /** The task to run. Will be passed an instance of TUI when called */
+  task: () => Promise<unknown> | void
+}
+
+export function isAwaitable(promise: unknown): promise is Promise<unknown> {
+  return typeof promise !== 'undefined' && 'then' in promise
+}

From 8466e752f637403c4f0b440928385ca51d136bcf Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Sat, 6 Jan 2024 13:20:00 +0100
Subject: [PATCH 14/18] chore(ci): Update task names to say "node 20" (#9805)

---
 .github/workflows/ci.yml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 61c51cbebd7a..336f8f802a1f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -90,7 +90,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 18 latest
+    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -144,7 +144,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 18 latest
+    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -157,7 +157,7 @@ jobs:
       matrix:
         bundler: [vite, webpack]
 
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 18 latest
+    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -235,7 +235,7 @@ jobs:
       matrix:
         bundler: [vite, webpack]
 
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 18 latest
+    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -249,7 +249,7 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 18 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -427,7 +427,7 @@ jobs:
       #
       # ```
       # env:
-      #   RECORD_REPLAY_METADATA_TEST_RUN_TITLE: 🔄  Smoke tests / ${{ matrix.os }} / node 18 latest
+      #   RECORD_REPLAY_METADATA_TEST_RUN_TITLE: 🔄  Smoke tests / ${{ matrix.os }} / node 20 latest
       #   RECORD_REPLAY_TEST_METRICS: 1
       # ```
       #
@@ -446,7 +446,7 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 18 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -459,7 +459,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🔭 Telemetry check / ${{ matrix.os }} / node 18 latest
+    name: 🔭 Telemetry check / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -506,7 +506,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🔭 Telemetry check / ${{ matrix.os }} / node 18 latest
+    name: 🔭 Telemetry check / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:

From 6fbc5b837c1a19d6989dca8480f1abfe48d5f326 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Sat, 6 Jan 2024 14:33:01 +0100
Subject: [PATCH 15/18] chore(cli): More robust isAwaitable (#9806)

---
 tasks/test-project/typing.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tasks/test-project/typing.ts b/tasks/test-project/typing.ts
index 9528b57ef432..d4b15fb30e89 100644
--- a/tasks/test-project/typing.ts
+++ b/tasks/test-project/typing.ts
@@ -17,5 +17,10 @@ export interface TuiTaskDef {
 }
 
 export function isAwaitable(promise: unknown): promise is Promise<unknown> {
-  return typeof promise !== 'undefined' && 'then' in promise
+  return (
+    !!promise &&
+    typeof promise === 'object' &&
+    'then' in promise &&
+    typeof promise.then === 'function'
+  )
 }

From 93b04f8583b3b78a1f33195248bb7e3ebc4cd3bc Mon Sep 17 00:00:00 2001
From: Dominic Saadi <dominiceliassaadi@gmail.com>
Date: Sat, 6 Jan 2024 15:03:44 -0800
Subject: [PATCH 16/18] chore(esm): convert crwa to esm and bundle (#9786)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow up to https://github.com/redwoodjs/redwood/pull/9783. This PR
converts the `create-redwood-app` package to ESM and bundles all its
dependencies. I started with `create-redwood-app` because the
requirements for making it ESM were relatively trivial compared to the
other packages since it just needs to be run by `yarn create`, and yarn
create just runs a bin.

For `create-redwood-app` I'm just using esbuild. Why not use tsup?
1. We're just distributing a bin. We're not distributing a dual-module
package with types
2. tsup hasn't been committed to in over a month and a half, whereas
esbuild releases often and is committed to more-or-less daily. That
doesn't automatically disqualify it (OSS is hard), but makes me wary.
I'll consider it for packages that distribute more than a bin

More on bundling. Bundling this package has benefits, namely decreasing
the install time—yarn doesn't have to fetch its dependencies, there are
none. But I'm mostly doing it as an exercise because we need to do it
more. For background on the shims (`jsBanner`) see
https://github.com/evanw/esbuild/issues/1921. It's nothing bespoke and
it's what tsup[^tsup] and Vite[^vite] would've done anyway.

Other notes:

- Updates the package's `README.md`; this could be updated more but I
didn't want to spend too much time on it

- Adds e2e tests for the node version check

Two new e2e tests make sure we're checking node version correctly. I
can't use nvm since 1. it's not easily scriptable (it's a shell built-in
or something) and 2. it doesn't seem like we all use it, so I just added
these tests to CI and use the GitHub action to change the node version

- Fixes a bug I introduced in
https://github.com/redwoodjs/redwood/pull/9728

The node version check would throw if it didn't pass because
`engines.yarn` was removed. This wasn't released

- Converted files to just `.js` since Node recognized them as ESM from
`type` in `package.json`

- Reordered `yarn create-redwood-app`'s options in help; I tried to put
the ones that were more likely to be used first

- Removed the header from `--help` and `--version`

[^tsup]:
https://github.com/egoist/tsup/blob/8c26e63c92711d60c05aedd3cdc358530ba266c5/assets/esm_shims.js
[^vite]:
https://github.com/vitejs/vite/blob/8de7bd2b68db27b83d9484cc8d4e26436615168e/packages/vite/rollup.config.ts#L288-L295
---
 .github/workflows/ci.yml                      |  26 ++-
 packages/create-redwood-app/README.md         |  72 ++++---
 packages/create-redwood-app/build.mjs         |  23 ---
 packages/create-redwood-app/jest.config.js    |   5 +-
 packages/create-redwood-app/package.json      |  23 ++-
 packages/create-redwood-app/scripts/build.js  |  34 ++++
 ...tUpTestProject.mjs => setUpTestProject.js} |   0
 packages/create-redwood-app/scripts/tsToJS.js | 113 +++++++++++
 .../create-redwood-app/scripts/tsToJS.mjs     | 126 -------------
 .../src/create-redwood-app.js                 | 175 +++++++-----------
 packages/create-redwood-app/src/telemetry.js  |   2 +-
 .../tests/{e2e.test.mjs => e2e.test.js}       |  35 ++--
 .../create-redwood-app/tests/e2e_prompts.sh   |   4 +-
 .../tests/e2e_prompts_git.sh                  |   2 +-
 .../create-redwood-app/tests/e2e_prompts_m.sh |   4 +-
 .../tests/e2e_prompts_node_greater.sh         |  48 +++++
 .../tests/e2e_prompts_node_less.sh            |  30 +++
 .../tests/e2e_prompts_overwrite.sh            |   6 +-
 .../tests/e2e_prompts_ts.sh                   |   2 +-
 .../{templates.test.mjs => templates.test.js} |   4 +-
 20 files changed, 385 insertions(+), 349 deletions(-)
 delete mode 100644 packages/create-redwood-app/build.mjs
 create mode 100644 packages/create-redwood-app/scripts/build.js
 rename packages/create-redwood-app/scripts/{setUpTestProject.mjs => setUpTestProject.js} (100%)
 create mode 100644 packages/create-redwood-app/scripts/tsToJS.js
 delete mode 100644 packages/create-redwood-app/scripts/tsToJS.mjs
 rename packages/create-redwood-app/tests/{e2e.test.mjs => e2e.test.js} (74%)
 create mode 100755 packages/create-redwood-app/tests/e2e_prompts_node_greater.sh
 create mode 100755 packages/create-redwood-app/tests/e2e_prompts_node_less.sh
 rename packages/create-redwood-app/tests/{templates.test.mjs => templates.test.js} (99%)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 336f8f802a1f..923978293a20 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -750,11 +750,13 @@ jobs:
         env:
           PROJECT_PATH: ${{ env.PROJECT_PATH }}
 
-      - name: Prompt tests
+      - name: Install expect
         run: |
           sudo apt-get update
           sudo apt-get install expect
 
+      - name: Prompt tests
+        run: |
           ./tests/e2e_prompts.sh
           ./tests/e2e_prompts_git.sh
           ./tests/e2e_prompts_m.sh
@@ -764,6 +766,28 @@ jobs:
         env:
           PROJECT_PATH: ${{ env.PROJECT_PATH }}
 
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Prompt tests
+        run: ./tests/e2e_prompts_node_less.sh
+        working-directory: ./packages/create-redwood-app
+        env:
+          PROJECT_PATH: ${{ env.PROJECT_PATH }}
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+
+      - name: Prompt tests
+        run: ./tests/e2e_prompts_node_greater.sh
+        working-directory: ./packages/create-redwood-app
+        env:
+          PROJECT_PATH: ${{ env.PROJECT_PATH }}
+
   crwa-skip:
     needs: detect-changes
     if: needs.detect-changes.outputs.onlydocs == 'true'
diff --git a/packages/create-redwood-app/README.md b/packages/create-redwood-app/README.md
index ea65f31b707d..3719968f56f5 100644
--- a/packages/create-redwood-app/README.md
+++ b/packages/create-redwood-app/README.md
@@ -18,39 +18,35 @@
 
 <h2 align="center">Ship today with architecture for tomorrow.</h2>
 
-Redwood is an opinionated, edge-ready framework for modern multi-client applications, built on React, GraphQL, and Prisma with full TypeScript support and ready to go with zero config.
+Redwood is an opinionated framework for modern multi-client applications, built on React, GraphQL, and Prisma with full TypeScript support and ready to go with zero config.
 
 Want great developer experience and easy scaling? How about an integrated front- and back-end test suite, boilerplate code generators, component design, logging, API security + auth, and serverless or traditional deploy support? Redwood is here! Redwood works with the components and development workflow you love but with simple conventions and helpers to make your experience even better.
 
-<br>
-
 <h2>Quick Start</h2>
 
-Redwood requires Node.js >=14.x <=16.x and Yarn v1.15 (or newer).
-```console
-yarn create redwood-app redwood-project
-cd redwood-project
+Redwood requires Node.js =20.x.
+
+```bash
+yarn create redwood-app my-redwood-app
+cd my-redwood-app
+yarn install
 yarn redwood dev
 ```
 
 <h3>Resources</h3>
 
-- The [Redwood Tutorial](https://redwoodjs.com/docs/tutorial): The best way to learn Redwood
+- The [Redwood Tutorial](https://redwoodjs.com/docs/tutorial): the best way to learn Redwood
 - The [Redwood CLI](https://redwoodjs.com/docs/cli-commands): code generators, DB helpers, setup commands, and more
 - [Documentation](https://redwoodjs.com/docs) and [How To's](https://redwoodjs.com/how-to/custom-function)
 - Join the Community [Forums](https://community.redwoodjs.com) and [Chat](https://discord.gg/redwoodjs)
 
-<br>
-
-<h1>Contributing to create-redwood-app</h1>
+<h2>Contributing to create-redwood-app</h2>
 
-_Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contributing). And don't hesitate to ask for help on the forums and chat_
+_Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contributing). And don't hesitate to ask for help on the forums and chat_.
 
 **Table of Contents**
 <!-- toc -->
 - [Description](#description)
-- [Package Leads](#package-leads)
-- [Roadmap](#roadmap)
 - [Local Development](#local-development)
   - [Installation Script](#installation-script)
   - [Template Codebase](#template-codebase)
@@ -60,55 +56,45 @@ _Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contrib
 ## Description
 
 This package creates and installs a Redwood project, which is the entry point for anyone using Redwood. It has two parts:
-- The installation script `create-redwood-app.js`
-- Project template code in the `template/` directory
-
-> _For information about contributing to the Redwood Framework in general, [please start here](https://redwoodjs.com/docs/contributing)._
-
-## Package Leads
-- [@peterp](https://github.com/peterp)
-- [@thedavidprice](https://github.com/thedavidprice)
-
-## Roadmap
-
-v1 Priorities:
-- convert `template/` codebase to TypeScript
-- add option to install as either TypeScript or JavaScript project (defaults to TypeScript)
-- add package tests, which may be accomplished by including in Cypress E2E CI
+- The installation script [`src/create-redwood-app.js`](./src/create-redwood-app.js)
+- Project template code in the [`templates/`](./templates/) directory
 
 ## Local Development
 
 ### Installation Script
-The installation script is built with [Yargs](https://github.com/yargs/yargs)
+
+The installation script is built with [Yargs](https://github.com/yargs/yargs).
 
 ### Template Codebase
-The project codebase in `template/` uses [Yarn Workspace v1](https://classic.yarnpkg.com/en/docs/workspaces/) for a monorepo project containing the API and Web Sides. Redwood packages are included in `template/package.json`, `template/web/package.json`, and `template/api/package.json`, respectively.
 
-### How to run create-redwood-app from your local repo and create a project
+The project codebase in [`templates/`](./templates/) uses [Yarn Workspaces](https://yarnpkg.com/features/workspaces) for a monorepo project containing the API and Web Sides. Redwood packages are included in `templates/ts/package.json`, `templates/ts/web/package.json`, and `templates/ts/api/package.json`, respectively.
+
+### How to run `create-redwood-app` from your local repo and create a project
+
 First, run the following commands in the root of the monorepo:
+
 ```bash
 yarn install
 yarn build
 ```
 
-Then, we need to navigate to the create redwood app package and build the script:
+Then, navigate to the create redwood app package:
+
 ```bash
 cd packages/create-redwood-app
-yarn build
 ```
 
-_Note:_ You can also use `yarn build:watch` instead of `yarn build` to watch for changes and rebuild automatically.
-
-This will generate the `create-redwood-app.js` file inside the `dist` directory.
+Run `yarn node` on the built file (`dist/create-redwood-app.js`) and pass in the path to the new project:
 
-To use the script, run `node` on that file (dist/create-redwood-app.js) and pass in the path to the new project:
 ```bash
-node dist/create-redwood-app.js /path/to/new/redwood-app
+yarn node ./dist/create-redwood-app.js /path/to/new/redwood-app
 ```
 
-> Note: the new project will install with the most recent major Redwood package version by default
+> [!NOTE]
+> the new project will install with the most recent major Redwood package version by default.
 
 ### How to run other published versions for debugging
+
 By default yarn create will pick the latest stable version to run, but you can specify a different version via yarn too!
 
 To try the canary version, run:
@@ -121,12 +107,16 @@ Note that this will still create a project with the latest stable version, but r
 You can specify any tag or version instead of `@canary`
 
 ### Develop using the new project
+
 There are three options for developing with the installed project:
 
 **1. Upgrade the project to use the latest canary release**
+
 ```bash
 cd /path/to/new/redwood-app
 yarn rw upgrade -t canary
 ```
+
 **2. Use the workflow and tools for local package development**
-- [Local Development Instructions](https://github.com/redwoodjs/redwood/blob/main/CONTRIBUTING.md#local-development)
+
+- [Local Development Instructions](https://github.com/redwoodjs/redwood/blob/main/CONTRIBUTING.md)
diff --git a/packages/create-redwood-app/build.mjs b/packages/create-redwood-app/build.mjs
deleted file mode 100644
index 3ed59c69cd9b..000000000000
--- a/packages/create-redwood-app/build.mjs
+++ /dev/null
@@ -1,23 +0,0 @@
-import fs from 'node:fs'
-
-import * as esbuild from 'esbuild'
-
-const result = await esbuild.build({
-  entryPoints: ['src/create-redwood-app.js'],
-  outfile: 'dist/create-redwood-app.js',
-
-  bundle: true,
-  minify: true,
-
-  platform: 'node',
-  target: ['node20'],
-  packages: 'external',
-
-  logLevel: 'info',
-
-  // For visualizing the bundle.
-  // See https://esbuild.github.io/api/#metafile and https://esbuild.github.io/analyze/.
-  metafile: true,
-})
-
-fs.writeFileSync('meta.json', JSON.stringify(result.metafile))
diff --git a/packages/create-redwood-app/jest.config.js b/packages/create-redwood-app/jest.config.js
index 2c638b714e5b..99951968fbc0 100644
--- a/packages/create-redwood-app/jest.config.js
+++ b/packages/create-redwood-app/jest.config.js
@@ -1,8 +1,5 @@
 /** @type {import('jest').Config} */
-const config = {
-  testMatch: ['<rootDir>/tests/*.test.mjs'],
+export default {
   testPathIgnorePatterns: ['/node_modules/', '<rootDir>/templates/'],
   transform: {},
 }
-
-module.exports = config
diff --git a/packages/create-redwood-app/package.json b/packages/create-redwood-app/package.json
index e90e7e89148e..1ea46667c57b 100644
--- a/packages/create-redwood-app/package.json
+++ b/packages/create-redwood-app/package.json
@@ -7,34 +7,41 @@
     "directory": "packages/create-redwood-app"
   },
   "license": "MIT",
+  "type": "module",
   "bin": "./dist/create-redwood-app.js",
   "files": [
     "dist",
     "templates"
   ],
   "scripts": {
-    "build": "yarn node ./build.mjs",
+    "build": "node ./scripts/build.js",
     "build:pack": "yarn pack -o create-redwood-app.tgz",
     "build:watch": "nodemon --watch src --ignore dist,template --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
-    "set-up-test-project": "node ./scripts/setUpTestProject.mjs",
+    "set-up-test-project": "node ./scripts/setUpTestProject.js",
     "test": "node --experimental-vm-modules $(yarn bin jest) templates",
     "test:e2e": "node --experimental-vm-modules $(yarn bin jest) e2e",
-    "ts-to-js": "yarn node ./scripts/tsToJS.mjs"
+    "ts-to-js": "yarn node ./scripts/tsToJS.js"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.22.20",
+    "@babel/plugin-transform-typescript": "^7.22.15",
     "@opentelemetry/api": "1.7.0",
     "@opentelemetry/exporter-trace-otlp-http": "0.45.1",
     "@opentelemetry/resources": "1.18.1",
     "@opentelemetry/sdk-trace-node": "1.18.1",
     "@opentelemetry/semantic-conventions": "1.18.1",
     "@redwoodjs/tui": "6.0.7",
+    "@types/babel__core": "7.20.4",
     "chalk": "4.1.2",
     "check-node-version": "4.2.1",
     "ci-info": "4.0.0",
     "envinfo": "7.11.0",
+    "esbuild": "0.19.9",
     "execa": "5.1.1",
     "fs-extra": "11.2.0",
+    "jest": "29.7.0",
+    "klaw-sync": "6.0.0",
     "semver": "7.5.4",
     "systeminformation": "5.21.20",
     "terminal-link": "2.1.1",
@@ -42,13 +49,5 @@
     "uuid": "9.0.1",
     "yargs": "17.7.2"
   },
-  "devDependencies": {
-    "@babel/core": "^7.22.20",
-    "@babel/plugin-transform-typescript": "^7.22.15",
-    "@types/babel__core": "7.20.4",
-    "esbuild": "0.19.9",
-    "jest": "29.7.0",
-    "klaw-sync": "6.0.0"
-  },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }
diff --git a/packages/create-redwood-app/scripts/build.js b/packages/create-redwood-app/scripts/build.js
new file mode 100644
index 000000000000..6694591a9998
--- /dev/null
+++ b/packages/create-redwood-app/scripts/build.js
@@ -0,0 +1,34 @@
+/* eslint-env node */
+
+import * as esbuild from 'esbuild'
+import fs from 'fs-extra'
+
+const jsBanner = `\
+#!/usr/bin/env node
+
+const require = (await import("node:module")).createRequire(import.meta.url);
+const __filename = (await import("node:url")).fileURLToPath(import.meta.url);
+const __dirname = (await import("node:path")).dirname(__filename);
+`
+
+const result = await esbuild.build({
+  entryPoints: ['src/create-redwood-app.js'],
+  outdir: 'dist',
+
+  platform: 'node',
+  target: ['node20'],
+  format: 'esm',
+  bundle: true,
+  banner: {
+    js: jsBanner,
+  },
+
+  minify: true,
+
+  logLevel: 'info',
+  metafile: true,
+})
+
+await fs.writeJSON(new URL('./meta.json', import.meta.url), result.metafile, {
+  spaces: 2,
+})
diff --git a/packages/create-redwood-app/scripts/setUpTestProject.mjs b/packages/create-redwood-app/scripts/setUpTestProject.js
similarity index 100%
rename from packages/create-redwood-app/scripts/setUpTestProject.mjs
rename to packages/create-redwood-app/scripts/setUpTestProject.js
diff --git a/packages/create-redwood-app/scripts/tsToJS.js b/packages/create-redwood-app/scripts/tsToJS.js
new file mode 100644
index 000000000000..7e5c881330d9
--- /dev/null
+++ b/packages/create-redwood-app/scripts/tsToJS.js
@@ -0,0 +1,113 @@
+/* eslint-env node */
+
+import { fileURLToPath } from 'node:url'
+
+import { transformFileSync } from '@babel/core'
+import { format } from 'prettier'
+import { fs, glob, path } from 'zx'
+
+const TS_TEMPLATE_PATH = fileURLToPath(
+  new URL('../templates/ts', import.meta.url)
+)
+
+// Remove `node_modules`, `.yarn/install-state.gz`.
+console.log('Removing `node_modules` in the TS template')
+const tsTemplateNodeModulesPath = path.join(TS_TEMPLATE_PATH, 'node_modules')
+await fs.rm(tsTemplateNodeModulesPath, { recursive: true, force: true })
+
+console.log("Removing yarn's `install-state.gz` in the TS template")
+const tsTemplateYarnInstallStatePath = path.join(
+  TS_TEMPLATE_PATH,
+  '.yarn',
+  'install-state.gz'
+)
+await fs.rm(tsTemplateYarnInstallStatePath, { force: true })
+
+// Clean and copy the TS template to the JS template.
+const JS_TEMPLATE_PATH = fileURLToPath(
+  new URL('../templates/js', import.meta.url)
+)
+
+console.log('Removing the JS template')
+await fs.rm(JS_TEMPLATE_PATH, { recursive: true, force: true })
+console.log('Copying the TS template to the JS template')
+await fs.copy(TS_TEMPLATE_PATH, JS_TEMPLATE_PATH)
+
+// Find files and transform.
+const filePaths = await glob(['{api,web,scripts}/**/*.{ts,tsx}'], {
+  cwd: JS_TEMPLATE_PATH,
+  absolute: true,
+})
+
+console.group('Transforming files in the JS template')
+
+const { default: prettierConfig } = await import(
+  new URL('../templates/ts/prettier.config.js', import.meta.url)
+)
+
+for (const filePath of filePaths) {
+  console.log(`• ${filePath}`)
+
+  const result = transformFileSync(filePath, {
+    cwd: TS_TEMPLATE_PATH,
+    configFile: false,
+    plugins: [
+      [
+        '@babel/plugin-transform-typescript',
+        {
+          isTSX: true,
+          allExtensions: true,
+        },
+      ],
+    ],
+    retainLines: true,
+  })
+
+  if (!result) {
+    throw new Error(`Error: Couldn't transform ${filePath}`)
+  }
+
+  const formattedCode = format(result.code, {
+    ...prettierConfig,
+    parser: 'babel',
+  })
+
+  await fs.writeFile(
+    filePath.replace('.tsx', '.jsx').replace('.ts', '.js'),
+    formattedCode,
+    'utf-8'
+  )
+
+  await fs.rm(filePath)
+}
+
+console.groupEnd()
+
+console.group(
+  'Transforming `tsconfig.json`s in the JS template to `jsconfig.json`s'
+)
+
+const tsConfigFilePaths = await glob(['{api,web,scripts}/**/tsconfig.json'], {
+  cwd: JS_TEMPLATE_PATH,
+  absolute: true,
+})
+
+for (const tsConfigFilePath of tsConfigFilePaths) {
+  console.log(`• ${tsConfigFilePath}`)
+
+  const jsConfigFilePath = path.join(
+    path.dirname(tsConfigFilePath),
+    'jsconfig.json'
+  )
+
+  await fs.rename(tsConfigFilePath, jsConfigFilePath)
+
+  const jsConfig = await fs.readJSON(jsConfigFilePath)
+
+  // This property has no meaning in JS projects.
+  delete jsConfig.compilerOptions.allowJs
+
+  await fs.writeJSON(jsConfigFilePath, jsConfig, { spaces: 2 })
+}
+
+console.groupEnd()
diff --git a/packages/create-redwood-app/scripts/tsToJS.mjs b/packages/create-redwood-app/scripts/tsToJS.mjs
deleted file mode 100644
index 990386cc8600..000000000000
--- a/packages/create-redwood-app/scripts/tsToJS.mjs
+++ /dev/null
@@ -1,126 +0,0 @@
-#!/usr/bin/env node
-/* eslint-env node */
-
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-import { transformFileSync } from '@babel/core'
-import fg from 'fast-glob'
-import fs from 'fs-extra'
-import { format } from 'prettier'
-
-const [TS_TEMPLATE_FILEPATH, JS_TEMPLATE_FILEPATH] = [
-  new URL('../templates/ts', import.meta.url),
-  new URL('../templates/js', import.meta.url),
-].map(fileURLToPath)
-
-const { default: prettierConfig } = await import(
-  new URL('../templates/ts/prettier.config.js', import.meta.url)
-)
-
-// Handle node_modules, .yarn/install-state.gz.
-const tsTemplateNodeModulesPath = path.join(
-  TS_TEMPLATE_FILEPATH,
-  'node_modules'
-)
-
-if (fs.existsSync(tsTemplateNodeModulesPath)) {
-  console.log('Removing node modules in TS template')
-  fs.rmSync(tsTemplateNodeModulesPath, { recursive: true })
-}
-
-const tsTemplateYarnInstallState = path.join(
-  TS_TEMPLATE_FILEPATH,
-  '.yarn',
-  'install-state.gz'
-)
-
-if (fs.existsSync(tsTemplateYarnInstallState)) {
-  console.log('Removing .yarn/install-state.gz in TS template')
-  fs.rmSync(tsTemplateYarnInstallState, { recursive: true })
-}
-
-// Clean and copy the TS template to the JS template.
-console.log('Cleaning JS template')
-fs.rmSync(JS_TEMPLATE_FILEPATH, { recursive: true })
-
-console.log('Copying TS template to JS template')
-fs.copySync(TS_TEMPLATE_FILEPATH, JS_TEMPLATE_FILEPATH)
-
-// Find files and transform.
-const apiWebFilePaths = fg.sync('{api,web}/**/*.{ts,tsx}', {
-  cwd: JS_TEMPLATE_FILEPATH,
-  absolute: true,
-})
-
-const scriptFilePaths = fg.sync('scripts/**/*.ts', {
-  cwd: JS_TEMPLATE_FILEPATH,
-  absolute: true,
-})
-
-console.group('Transforming TS files in JS template to JS')
-
-for (const filePath of [...apiWebFilePaths, ...scriptFilePaths]) {
-  console.log('Transforming', filePath)
-
-  const result = transformFileSync(filePath, {
-    cwd: TS_TEMPLATE_FILEPATH,
-    configFile: false,
-    plugins: [
-      [
-        '@babel/plugin-transform-typescript',
-        {
-          isTSX: true,
-          allExtensions: true,
-        },
-      ],
-    ],
-    retainLines: true,
-  })
-
-  if (!result) {
-    throw new Error(`Babel transform for ${filePath} failed`)
-  }
-
-  const formattedCode = format(result.code, {
-    ...prettierConfig,
-    parser: 'babel',
-  })
-
-  fs.writeFileSync(
-    filePath.replace('.tsx', '.jsx').replace('.ts', '.js'),
-    formattedCode,
-    'utf-8'
-  )
-
-  fs.rmSync(filePath)
-}
-
-console.groupEnd()
-
-console.group('Transforming tsconfig files to jsconfig')
-
-const tsConfigFilePaths = fg.sync('{api,web,scripts}/**/tsconfig.json', {
-  cwd: JS_TEMPLATE_FILEPATH,
-  absolute: true,
-})
-
-for (const tsConfigFilePath of tsConfigFilePaths) {
-  console.log('Transforming', tsConfigFilePath)
-
-  const jsConfigFilePath = path.join(
-    path.dirname(tsConfigFilePath),
-    'jsconfig.json'
-  )
-
-  fs.renameSync(tsConfigFilePath, jsConfigFilePath)
-
-  const jsConfig = fs.readJSONSync(jsConfigFilePath)
-
-  // This property has no meaning in JS projects.
-  delete jsConfig.compilerOptions.allowJs
-
-  fs.writeJSONSync(jsConfigFilePath, jsConfig, { spaces: 2 })
-}
-
-console.groupEnd()
diff --git a/packages/create-redwood-app/src/create-redwood-app.js b/packages/create-redwood-app/src/create-redwood-app.js
index 2f7e30405aeb..71817907bea5 100644
--- a/packages/create-redwood-app/src/create-redwood-app.js
+++ b/packages/create-redwood-app/src/create-redwood-app.js
@@ -1,6 +1,5 @@
-#!/usr/bin/env node
-
-import path from 'path'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import checkNodeVersionCb from 'check-node-version'
@@ -14,19 +13,28 @@ import yargs from 'yargs/yargs'
 
 import { RedwoodTUI, ReactiveTUIContent, RedwoodStyling } from '@redwoodjs/tui'
 
-import { name, version } from '../package'
+import { name, version } from '../package.json'
 
 import {
   UID,
   startTelemetry,
   shutdownTelemetry,
   recordErrorViaTelemetry,
-} from './telemetry'
+} from './telemetry.js'
 
 const INITIAL_COMMIT_MESSAGE = 'Initial commit'
 
-// Telemetry
-const { telemetry } = Parser(hideBin(process.argv))
+// Telemetry can be disabled in two ways:
+// - by passing `--telemetry false`  or `--no-telemetry`
+// - by setting the `REDWOOD_DISABLE_TELEMETRY` env var to `1`
+const { telemetry } = Parser(hideBin(process.argv), {
+  boolean: ['telemetry'],
+  default: {
+    telemetry:
+      process.env.REDWOOD_DISABLE_TELEMETRY === undefined ||
+      process.env.REDWOOD_DISABLE_TELEMETRY === '',
+  },
+})
 
 const tui = new RedwoodTUI()
 
@@ -67,7 +75,7 @@ async function executeCompatibilityCheck(templateDir) {
   })
   tui.startReactive(tuiContent)
 
-  const [checksPassed, checksData] = await checkNodeAndYarnVersion(templateDir)
+  const [checksPassed, checksData] = await checkNodeVersion(templateDir)
 
   if (checksPassed) {
     tuiContent.update({
@@ -87,11 +95,6 @@ async function executeCompatibilityCheck(templateDir) {
       semver.minVersion(checksData.node.wanted.raw)
     )
 
-    const foundYarnVersionIsLessThanRequired = semver.lt(
-      checksData.yarn.version.version,
-      semver.minVersion(checksData.yarn.wanted.raw)
-    )
-
     if (foundNodeVersionIsLessThanRequired) {
       tui.stopReactive(true)
       tui.displayError(
@@ -127,41 +130,6 @@ async function executeCompatibilityCheck(templateDir) {
       process.exit(1)
     }
 
-    if (foundYarnVersionIsLessThanRequired) {
-      tui.stopReactive(true)
-      tui.displayError(
-        'Compatibility checks failed',
-        [
-          `  You need to upgrade the version of yarn you're using.`,
-          `  You're using ${checksData.yarn.version.version} and we currently support node ${checksData.yarn.wanted.range}.`,
-          '',
-          `  Please use tools like corepack to change to a compatible version.`,
-          `  See: ${terminalLink(
-            'How to - Using Yarn',
-            'https://redwoodjs.com/docs/how-to/using-yarn',
-            {
-              fallback: () =>
-                'How to - Using Yarn https://redwoodjs.com/docs/how-to/using-yarn',
-            }
-          )}`,
-          `  See: ${terminalLink(
-            'Tutorial - Prerequisites',
-            'https://redwoodjs.com/docs/tutorial/chapter1/prerequisites',
-            {
-              fallback: () =>
-                'Tutorial - Prerequisites https://redwoodjs.com/docs/tutorial/chapter1/prerequisites',
-            }
-          )}`,
-          '',
-          ...USE_GITPOD_TEXT,
-        ].join('\n')
-      )
-
-      recordErrorViaTelemetry('Compatibility checks failed')
-      await shutdownTelemetry()
-      process.exit(1)
-    }
-
     tui.stopReactive(true)
     tui.displayWarning(
       'Compatibility checks failed',
@@ -220,9 +188,9 @@ async function executeCompatibilityCheck(templateDir) {
  * This type has to be updated if the engines field in the create redwood app template package.json is updated.
  * @returns [boolean, Record<'node' | 'yarn', any>]
  */
-function checkNodeAndYarnVersion(templateDir) {
+function checkNodeVersion(templateDir) {
   return new Promise((resolve) => {
-    const { engines } = require(path.join(templateDir, 'package.json'))
+    const { engines } = fs.readJSONSync(path.join(templateDir, 'package.json'))
 
     checkNodeVersionCb(engines, (_error, result) => {
       return resolve([result.isSatisfied, result.versions])
@@ -671,57 +639,58 @@ async function handleYarnInstallPreference(yarnInstallFlag) {
  *  - TODO - Add a list of what this function does
  */
 async function createRedwoodApp() {
-  // Introductory message
-  tui.drawText(
-    [
-      `${RedwoodStyling.redwood('-'.repeat(66))}`,
-      `${' '.repeat(16)}🌲⚡️ ${RedwoodStyling.header(
-        'Welcome to RedwoodJS!'
-      )} ⚡️🌲`,
-      `${RedwoodStyling.redwood('-'.repeat(66))}`,
-    ].join('\n')
-  )
-
   const cli = yargs(hideBin(process.argv))
     .scriptName(name)
-    .usage('Usage: $0 <project directory> [option]')
-    .example('$0 newapp')
-    .option('typescript', {
-      alias: 'ts',
+    .usage('Usage: $0 <project directory>')
+    .example('$0 my-redwood-app')
+    .version(version)
+    .option('yes', {
+      alias: 'y',
       default: null,
       type: 'boolean',
-      describe: 'Generate a TypeScript project.',
+      describe: 'Skip prompts and use defaults',
     })
     .option('overwrite', {
       default: false,
       type: 'boolean',
       describe: "Create even if target directory isn't empty",
     })
-    .option('telemetry', {
-      default: true,
+    .option('typescript', {
+      alias: 'ts',
+      default: null,
       type: 'boolean',
-      describe:
-        'Enables sending telemetry events for this create command and all Redwood CLI commands https://telemetry.redwoodjs.com',
+      describe: 'Generate a TypeScript project',
     })
     .option('git-init', {
       alias: 'git',
       default: null,
       type: 'boolean',
-      describe: 'Initialize a git repository.',
+      describe: 'Initialize a git repository',
     })
     .option('commit-message', {
       alias: 'm',
       default: null,
       type: 'string',
-      describe: 'Commit message for the initial commit.',
+      describe: 'Commit message for the initial commit',
     })
-    .option('yes', {
-      alias: 'y',
-      default: null,
+    .option('telemetry', {
+      default: true,
       type: 'boolean',
-      describe: 'Skip prompts and use defaults.',
+      describe:
+        'Enables sending telemetry events for this create command and all Redwood CLI commands https://telemetry.redwoodjs.com',
     })
-    .version(version)
+
+  const parsedFlags = cli.parse()
+
+  tui.drawText(
+    [
+      `${RedwoodStyling.redwood('-'.repeat(66))}`,
+      `${' '.repeat(16)}🌲⚡️ ${RedwoodStyling.header(
+        'Welcome to RedwoodJS!'
+      )} ⚡️🌲`,
+      `${RedwoodStyling.redwood('-'.repeat(66))}`,
+    ].join('\n')
+  )
 
   const _isYarnBerryOrNewer = isYarnBerryOrNewer()
 
@@ -734,8 +703,6 @@ async function createRedwoodApp() {
     })
   }
 
-  const parsedFlags = cli.parse()
-
   // Extract the args as provided by the user in the command line
   // TODO: Make all flags have the 'flag' suffix
   const args = parsedFlags._
@@ -743,7 +710,6 @@ async function createRedwoodApp() {
     parsedFlags['yarn-install'] ?? !_isYarnBerryOrNewer ? parsedFlags.yes : null
   const typescriptFlag = parsedFlags.typescript ?? parsedFlags.yes
   const overwrite = parsedFlags.overwrite
-  // telemetry, // Extracted above to check if telemetry is disabled before we even reach this point
   const gitInitFlag = parsedFlags['git-init'] ?? parsedFlags.yes
   const commitMessageFlag =
     parsedFlags['commit-message'] ??
@@ -756,7 +722,7 @@ async function createRedwoodApp() {
   // Get the directory for installation from the args
   let targetDir = String(args).replace(/,/g, '-')
 
-  const templatesDir = path.resolve(__dirname, '../templates')
+  const templatesDir = fileURLToPath(new URL('../templates', import.meta.url))
 
   // Engine check
   await executeCompatibilityCheck(path.join(templatesDir, 'ts'))
@@ -845,32 +811,29 @@ async function createRedwoodApp() {
   )
 }
 
-;(async () => {
-  // Conditionally start telemetry
-  if (telemetry !== 'false' && !process.env.REDWOOD_DISABLE_TELEMETRY) {
-    try {
-      await startTelemetry()
-    } catch (error) {
-      console.error('Telemetry startup error')
-      console.error(error)
-    }
-  }
-
-  // Execute create redwood app within a span
-  const tracer = trace.getTracer('redwoodjs')
-  await tracer.startActiveSpan('create-redwood-app', async (span) => {
-    await createRedwoodApp()
-
-    // Span housekeeping
-    span?.setStatus({ code: SpanStatusCode.OK })
-    span?.end()
-  })
-
-  // Shutdown telemetry, ensures data is sent before the process exits
+if (telemetry) {
   try {
-    await shutdownTelemetry()
+    await startTelemetry()
   } catch (error) {
-    console.error('Telemetry shutdown error')
+    console.error('Telemetry startup error')
     console.error(error)
   }
-})()
+}
+
+// Execute create redwood app within a span
+const tracer = trace.getTracer('redwoodjs')
+await tracer.startActiveSpan('create-redwood-app', async (span) => {
+  await createRedwoodApp()
+
+  // Span housekeeping
+  span?.setStatus({ code: SpanStatusCode.OK })
+  span?.end()
+})
+
+// Shutdown telemetry, ensures data is sent before the process exits
+try {
+  await shutdownTelemetry()
+} catch (error) {
+  console.error('Telemetry shutdown error')
+  console.error(error)
+}
diff --git a/packages/create-redwood-app/src/telemetry.js b/packages/create-redwood-app/src/telemetry.js
index 2f183e021840..471261101029 100644
--- a/packages/create-redwood-app/src/telemetry.js
+++ b/packages/create-redwood-app/src/telemetry.js
@@ -12,7 +12,7 @@ import envinfo from 'envinfo'
 import system from 'systeminformation'
 import { v4 as uuidv4 } from 'uuid'
 
-import { name as packageName, version as packageVersion } from '../package'
+import { name as packageName, version as packageVersion } from '../package.json'
 
 /**
  * @type NodeTracerProvider
diff --git a/packages/create-redwood-app/tests/e2e.test.mjs b/packages/create-redwood-app/tests/e2e.test.js
similarity index 74%
rename from packages/create-redwood-app/tests/e2e.test.mjs
rename to packages/create-redwood-app/tests/e2e.test.js
index 488f3d5178c2..7ddee4eace96 100644
--- a/packages/create-redwood-app/tests/e2e.test.mjs
+++ b/packages/create-redwood-app/tests/e2e.test.js
@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 /* eslint-env node */
 
 import { cd, fs, $ } from 'zx'
@@ -7,36 +6,31 @@ const projectPath = await fs.realpath(process.env.PROJECT_PATH)
 
 cd(projectPath)
 
-describe('crwa', () => {
+describe('create-redwood-app', () => {
   test('--help', async () => {
     const p = await $`yarn create-redwood-app --help`
 
     expect(p.exitCode).toEqual(0)
     expect(p.stdout).toMatchInlineSnapshot(`
-      "------------------------------------------------------------------
-                      🌲⚡️ Welcome to RedwoodJS! ⚡️🌲
-      ------------------------------------------------------------------
-      Usage: create-redwood-app <project directory> [option]
+      "Usage: create-redwood-app <project directory>
 
       Options:
             --help              Show help                                    [boolean]
-            --typescript, --ts  Generate a TypeScript project.
-                                                             [boolean] [default: null]
+            --version           Show version number                          [boolean]
+        -y, --yes               Skip prompts and use defaults[boolean] [default: null]
             --overwrite         Create even if target directory isn't empty
                                                             [boolean] [default: false]
+            --typescript, --ts  Generate a TypeScript project[boolean] [default: null]
+            --git-init, --git   Initialize a git repository  [boolean] [default: null]
+        -m, --commit-message    Commit message for the initial commit
+                                                              [string] [default: null]
             --telemetry         Enables sending telemetry events for this create
                                 command and all Redwood CLI commands
                                 https://telemetry.redwoodjs.com
                                                              [boolean] [default: true]
-            --git-init, --git   Initialize a git repository. [boolean] [default: null]
-        -m, --commit-message    Commit message for the initial commit.
-                                                              [string] [default: null]
-        -y, --yes               Skip prompts and use defaults.
-                                                             [boolean] [default: null]
-            --version           Show version number                          [boolean]
 
       Examples:
-        create-redwood-app newapp
+        create-redwood-app my-redwood-app
       [?25l[?25h"
     `)
     expect(p.stderr).toMatchInlineSnapshot(`"[?25l[?25h"`)
@@ -47,10 +41,7 @@ describe('crwa', () => {
 
     expect(p.exitCode).toEqual(0)
     expect(p.stdout).toMatchInlineSnapshot(`
-      "------------------------------------------------------------------
-                      🌲⚡️ Welcome to RedwoodJS! ⚡️🌲
-      ------------------------------------------------------------------
-      6.0.7
+      "6.0.7
       [?25l[?25h"
     `)
     expect(p.stderr).toMatchInlineSnapshot(`"[?25l[?25h"`)
@@ -59,10 +50,6 @@ describe('crwa', () => {
   test('--yes, -y', async () => {
     const p = await $`yarn create-redwood-app ./redwood-app --yes`
 
-    // await $`yarn create-redwood-app redwood-app -y`
-    // # `yarn pack` seems to ignore `.yarnrc.yml`
-    // # cp "$SCRIPT_DIR/templates/ts/.yarnrc.yml" "$CRWA_ESM_TESTING_DIR"
-
     expect(p.exitCode).toEqual(0)
     expect(p.stdout).toMatchInlineSnapshot(`
       "------------------------------------------------------------------
@@ -96,7 +83,7 @@ describe('crwa', () => {
     await fs.rm('./redwood-app', { recursive: true, force: true })
   })
 
-  test.failing('fails on unknown options', async () => {
+  it.failing('fails on unknown options', async () => {
     try {
       await $`yarn create-redwood-app --unknown-options`.timeout(2500)
       // Fail the test if the function didn't throw.
diff --git a/packages/create-redwood-app/tests/e2e_prompts.sh b/packages/create-redwood-app/tests/e2e_prompts.sh
index 3099ee4c5744..c017c7b184fc 100755
--- a/packages/create-redwood-app/tests/e2e_prompts.sh
+++ b/packages/create-redwood-app/tests/e2e_prompts.sh
@@ -17,11 +17,11 @@ expect "Where would you like to create your Redwood app?"
 send "$projectDirectory\n"
 
 expect "Select your preferred language"
-# TypeScript
+# ❯ TypeScript
 send "\n"
 
 expect "Do you want to initialize a git repo?"
-# Yes
+# ❯ Yes
 send "\n"
 
 expect "Enter a commit message"
diff --git a/packages/create-redwood-app/tests/e2e_prompts_git.sh b/packages/create-redwood-app/tests/e2e_prompts_git.sh
index e43f514a2bce..655896cc138c 100755
--- a/packages/create-redwood-app/tests/e2e_prompts_git.sh
+++ b/packages/create-redwood-app/tests/e2e_prompts_git.sh
@@ -17,7 +17,7 @@ expect "Where would you like to create your Redwood app?"
 send "$projectDirectory\n"
 
 expect "Select your preferred language"
-# TypeScript
+# ❯ TypeScript
 send "\n"
 
 expect "Enter a commit message"
diff --git a/packages/create-redwood-app/tests/e2e_prompts_m.sh b/packages/create-redwood-app/tests/e2e_prompts_m.sh
index c9c24613e0b1..30d5e61e6ce3 100755
--- a/packages/create-redwood-app/tests/e2e_prompts_m.sh
+++ b/packages/create-redwood-app/tests/e2e_prompts_m.sh
@@ -17,11 +17,11 @@ expect "Where would you like to create your Redwood app?"
 send "$projectDirectory\n"
 
 expect "Select your preferred language"
-# TypeScript
+# ❯ TypeScript
 send "\n"
 
 expect "Do you want to initialize a git repo?"
-# Yes
+# ❯ Yes
 send "\n"
 
 expect eof
diff --git a/packages/create-redwood-app/tests/e2e_prompts_node_greater.sh b/packages/create-redwood-app/tests/e2e_prompts_node_greater.sh
new file mode 100755
index 000000000000..73a737735458
--- /dev/null
+++ b/packages/create-redwood-app/tests/e2e_prompts_node_greater.sh
@@ -0,0 +1,48 @@
+#!/usr/bin/expect
+
+# You have to set your Node version to 21+ before running this test.
+
+set projectPath $env(PROJECT_PATH)
+
+if {$projectPath eq ""} {
+    puts "PROJECT_PATH is not set"
+    exit
+}
+
+cd $projectPath
+
+set projectDirectory "redwood-app-prompt-node-greater-test"
+
+spawn yarn create-redwood-app
+
+expect "How would you like to proceed?"
+# ❯ Override error and continue install
+send "\n"
+
+expect "Where would you like to create your Redwood app?"
+send "$projectDirectory\n"
+
+expect "Select your preferred language"
+# ❯ TypeScript
+send "\n"
+
+expect "Do you want to initialize a git repo?"
+# ❯ Yes
+send "\n"
+
+expect "Enter a commit message"
+send "first\n"
+
+expect eof
+catch wait result
+set exitStatus [lindex $result 3]
+
+if {$exitStatus == 0} {
+    puts "Success"
+    exec rm -rf $projectDirectory
+    exit 0
+} else {
+    puts "Error: The process failed with exit status $exitStatus"
+    exec rm -rf $projectDirectory
+    exit 1
+}
diff --git a/packages/create-redwood-app/tests/e2e_prompts_node_less.sh b/packages/create-redwood-app/tests/e2e_prompts_node_less.sh
new file mode 100755
index 000000000000..d8187de802fe
--- /dev/null
+++ b/packages/create-redwood-app/tests/e2e_prompts_node_less.sh
@@ -0,0 +1,30 @@
+#!/usr/bin/expect
+
+# You have to set your Node version to 18 before running this one.
+
+set projectPath $env(PROJECT_PATH)
+
+if {$projectPath eq ""} {
+    puts "PROJECT_PATH is not set"
+    exit
+}
+
+cd $projectPath
+
+set projectDirectory "redwood-app-prompt-node-less-test"
+
+spawn yarn create-redwood-app
+
+expect eof
+catch wait result
+set exitStatus [lindex $result 3]
+
+if {$exitStatus == 1} {
+    puts "Success"
+    exec rm -rf $projectDirectory
+    exit 0
+} else {
+    puts "Error: The process didn't fail with exit status $exitStatus"
+    exec rm -rf $projectDirectory
+    exit 1
+}
diff --git a/packages/create-redwood-app/tests/e2e_prompts_overwrite.sh b/packages/create-redwood-app/tests/e2e_prompts_overwrite.sh
index ad8d890f0100..dd828aa1a7bf 100755
--- a/packages/create-redwood-app/tests/e2e_prompts_overwrite.sh
+++ b/packages/create-redwood-app/tests/e2e_prompts_overwrite.sh
@@ -20,18 +20,18 @@ expect "Where would you like to create your Redwood app?"
 send "$projectDirectory\n"
 
 expect "Select your preferred language"
-# TypeScript
+# ❯ TypeScript
 send "\n"
 
 expect "Do you want to initialize a git repo?"
-# Yes
+# ❯ Yes
 send "\n"
 
 expect "Enter a commit message"
 send "first\n"
 
 expect "How would you like to proceed?"
-# Quit install
+# ❯ Quit install
 send "\n"
 
 expect eof
diff --git a/packages/create-redwood-app/tests/e2e_prompts_ts.sh b/packages/create-redwood-app/tests/e2e_prompts_ts.sh
index 8a8f17c52847..7a32631c8c8a 100755
--- a/packages/create-redwood-app/tests/e2e_prompts_ts.sh
+++ b/packages/create-redwood-app/tests/e2e_prompts_ts.sh
@@ -17,7 +17,7 @@ expect "Where would you like to create your Redwood app?"
 send "$projectDirectory\n"
 
 expect "Do you want to initialize a git repo?"
-# Yes
+# ❯ Yes
 send "\n"
 
 expect "Enter a commit message"
diff --git a/packages/create-redwood-app/tests/templates.test.mjs b/packages/create-redwood-app/tests/templates.test.js
similarity index 99%
rename from packages/create-redwood-app/tests/templates.test.mjs
rename to packages/create-redwood-app/tests/templates.test.js
index a1bbfb76e13e..f8ef6ddf4f6c 100644
--- a/packages/create-redwood-app/tests/templates.test.mjs
+++ b/packages/create-redwood-app/tests/templates.test.js
@@ -1,5 +1,5 @@
+import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import path from 'path'
 
 import klawSync from 'klaw-sync'
 
@@ -7,7 +7,7 @@ const TS_TEMPLATE_DIR = fileURLToPath(
   new URL('../templates/ts', import.meta.url)
 )
 
-describe('template', () => {
+describe('TS template', () => {
   it('files should not have changed unintentionally', () => {
     expect(getDirectoryStructure(TS_TEMPLATE_DIR)).toMatchInlineSnapshot(`
       [

From 5210e06938568a584805a398678814d417a9a002 Mon Sep 17 00:00:00 2001
From: Dominic Saadi <dominiceliassaadi@gmail.com>
Date: Sun, 7 Jan 2024 06:30:55 -0800
Subject: [PATCH 17/18] fix(server): error early on incompatible config
 (apiHost and apiUrl) (#9808)

I was working on Redwood's server config with @Josh-Walker-GM. One of
the more unfortunate footguns is when you're serving the web side alone
while the api side is somewhere else, on a completely different host. If
you don't pass `apiHost`, and `apiUrl` isn't fully qualified, what
happens is that the web side requests itself, resulting in network
responses like this:

<img width="1532" alt="image"
src="https://github.com/redwoodjs/redwood/assets/32992335/21c6f3ec-5614-4336-9967-1ab4c25ea7db">

An easy fix that would go a long way is just erroring out if we detect
the config is incompatible and not starting the server at all:

```
# In redwood.toml, apiUrl is `/.redwood/functions`, a relative URL, and apiHost isn't passed the at the CLI:
% yarn rw serve web
Error: If you don't provide apiHost, apiUrl needs to be a fully-qualified URL. But apiUrl is /.redwood/functions.
```

We used a specific exit code because `yarn rw serve web` is a bin that's
calling a bin `yarn rw-server-web`. We plan to fix that by deduping code
across packages, so this specific exit code is just a stopgap till we
get that work done. The reason we're doing this fix first is that again,
it's easy and would solve a big problem.

We referenced this doc on exit code conventions which stated that 64-113
was up for grabs: https://tldp.org/LDP/abs/html/exitcodes.html.
---
 packages/cli/src/commands/serveWebHandler.js | 47 +++++++++++++-------
 packages/web-server/src/server.ts            | 28 +++++++++++-
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/packages/cli/src/commands/serveWebHandler.js b/packages/cli/src/commands/serveWebHandler.js
index ae3c33972132..28fb9af714c8 100644
--- a/packages/cli/src/commands/serveWebHandler.js
+++ b/packages/cli/src/commands/serveWebHandler.js
@@ -2,6 +2,8 @@ import execa from 'execa'
 
 import { getPaths } from '@redwoodjs/project-config'
 
+import { exitWithError } from '../lib/exit'
+
 export const webSsrServerHandler = async () => {
   await execa('yarn', ['rw-serve-fe'], {
     cwd: getPaths().web.base,
@@ -11,21 +13,34 @@ export const webSsrServerHandler = async () => {
 }
 
 export const webServerHandler = async (argv) => {
-  await execa(
-    'yarn',
-    [
-      'rw-web-server',
-      '--port',
-      argv.port,
-      '--socket',
-      argv.socket,
-      '--api-host',
-      argv.apiHost,
-    ],
-    {
-      cwd: getPaths().base,
-      stdio: 'inherit',
-      shell: true,
+  try {
+    await execa(
+      'yarn',
+      [
+        'rw-web-server',
+        '--port',
+        argv.port,
+        '--socket',
+        argv.socket,
+        '--api-host',
+        argv.apiHost,
+      ],
+      {
+        cwd: getPaths().base,
+        stdio: 'inherit',
+        shell: true,
+      }
+    )
+  } catch (e) {
+    // `@redwoodjs/web-server` uses a custom error exit code to tell this handler that an error has already been handled.
+    // While any other exit code than `0` is considered an error, there seems to be some conventions around some of them
+    // like `127`, etc. We chose 64 because it's in the range where there deliberately aren't any previous conventions.
+    // See https://tldp.org/LDP/abs/html/exitcodes.html.
+    if (e.exitCode === 64) {
+      process.exitCode = 1
+      return
     }
-  )
+
+    exitWithError(e)
+  }
 }
diff --git a/packages/web-server/src/server.ts b/packages/web-server/src/server.ts
index d6a09b2eccc4..dcc5ea955405 100644
--- a/packages/web-server/src/server.ts
+++ b/packages/web-server/src/server.ts
@@ -18,7 +18,15 @@ interface Opts {
   apiHost?: string
 }
 
-// no help option...
+function isFullyQualifiedUrl(url: string) {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(url)
+    return true
+  } catch (e) {
+    return false
+  }
+}
 
 async function serve() {
   // Parse server file args
@@ -39,6 +47,24 @@ async function serve() {
   const port = options.port ? parseInt(options.port) : redwoodConfig.web.port
   const apiUrl = redwoodConfig.web.apiUrl
 
+  if (!options.apiHost && !isFullyQualifiedUrl(apiUrl)) {
+    console.error(
+      `${chalk.red('Error')}: If you don't provide ${chalk.magenta(
+        'apiHost'
+      )}, ${chalk.magenta(
+        'apiUrl'
+      )} needs to be a fully-qualified URL. But ${chalk.magenta(
+        'apiUrl'
+      )} is ${chalk.yellow(apiUrl)}.`
+    )
+    // We're using a custom error exit code here to tell `@redwoodjs/cli` that this error has been handled.
+    // While any other exit code than `0` is considered an error, there seems to be some conventions around some of them
+    // like `127`, etc. We chose 64 because it's in the range where there deliberately aren't any previous conventions.
+    // See https://tldp.org/LDP/abs/html/exitcodes.html.
+    process.exitCode = 64
+    return
+  }
+
   const tsServer = Date.now()
 
   // Load .env files

From 80e4a4f56909f525eb6735aa93de4ecf42db3089 Mon Sep 17 00:00:00 2001
From: David Thyresson <dthyresson@gmail.com>
Date: Mon, 8 Jan 2024 05:08:55 -0500
Subject: [PATCH 18/18] chore: Improved Possible Types DX and Framework
 integration for GraphQL Fragments with Union and Interface support (#9594)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
---
 .github/workflows/ci.yml                      |  90 ++++
 .../{web => }/.editorconfig                   |   0
 .../fragment-test-project/.env.defaults       |  19 +
 .../fragment-test-project/.env.example        |   4 +
 __fixtures__/fragment-test-project/.gitignore |  22 +
 .../fragment-test-project/.redwood/README.md  |  44 ++
 .../.redwood/schema.graphql                   | 102 ----
 .../.vscode/extensions.json                   |  16 +
 .../fragment-test-project/.vscode/launch.json |  56 ++
 .../.vscode/settings.json                     |  11 +
 .../fragment-test-project/.vscode/tasks.json  |  29 +
 .../fragment-test-project/.yarnrc.yml         |  15 +
 __fixtures__/fragment-test-project/README.md  | 124 ++++-
 .../migration.sql                             |  34 ++
 .../migration.sql                             |   8 +
 .../migration.sql                             |  28 +
 .../api/db/migrations/migration_lock.toml     |   3 +
 .../api/db/schema.prisma                      |  59 ++-
 .../fragment-test-project/api/package.json    |   5 +-
 .../fragment-test-project/api/src/.keep       |   0
 .../api/src/__tests__/context.test.ts         |  14 +
 .../requireAuth/requireAuth.test.ts           |   4 +-
 .../api/src/functions/auth.ts                 | 202 +++++++
 .../api/src/functions/graphql.ts              |   6 +
 .../api/src/graphql/contacts.sdl.ts           |  32 ++
 .../api/src/graphql/posts.sdl.ts              |  33 ++
 .../api/src/graphql/produces.sdl.ts           |  54 ++
 .../api/src/graphql/stalls.sdl.ts             |  27 +-
 .../api/src/graphql/users.sdl.ts              |  25 +
 .../fragment-test-project/api/src/lib/auth.ts | 128 ++++-
 .../fragment-test-project/api/src/lib/db.ts   |   4 +-
 .../api/src/lib/persistedOperations.json      |   4 -
 .../services/contacts/contacts.scenarios.ts   |  12 +
 .../src/services/contacts/contacts.test.ts    |  59 +++
 .../api/src/services/contacts/contacts.ts     |  37 ++
 .../api/src/services/fruit.ts                 |  29 -
 .../api/src/services/groceries.ts             |   6 +-
 .../api/src/services/posts/posts.scenarios.ts |  38 ++
 .../api/src/services/posts/posts.test.ts      |  55 ++
 .../api/src/services/posts/posts.ts           |  42 ++
 .../services/produces/produces.scenarios.ts   |  27 +
 .../src/services/produces/produces.test.ts    |  67 +++
 .../api/src/services/produces/produces.ts     |  47 ++
 .../api/src/services/stalls.ts                |  21 -
 .../src/services/stalls/stalls.scenarios.ts   |  11 +
 .../api/src/services/stalls/stalls.test.ts    |  50 ++
 .../api/src/services/stalls/stalls.ts         |  45 ++
 .../api/src/services/users/users.scenarios.ts |  26 +
 .../api/src/services/users/users.test.ts      |  10 +
 .../api/src/services/users/users.ts           |  17 +
 .../api/src/services/vegetables.ts            |  22 -
 .../fragment-test-project/jest.config.js      |   8 +
 .../fragment-test-project/package.json        |  23 +
 .../fragment-test-project/prettier.config.js  |  20 +
 .../fragment-test-project/redwood.toml        |  18 +-
 .../fragment-test-project/scripts/seed.ts     | 195 +++++++
 .../scripts/tsconfig.json                     |  42 ++
 .../web/config/postcss.config.js              |   8 +
 .../web/config/tailwind.config.js             |   8 +
 .../fragment-test-project/web/package.json    |  22 +-
 .../web/public/README.md                      |  35 ++
 .../web/public/favicon.png                    | Bin 0 -> 1741 bytes
 .../web/public/robots.txt                     |   2 +
 .../fragment-test-project/web/src/App.tsx     |  20 +-
 .../web/src/Redwood.stories.mdx               |  15 +
 .../fragment-test-project/web/src/Routes.tsx  |  41 +-
 .../fragment-test-project/web/src/auth.ts     |   5 +
 .../src/components/Author/Author.stories.tsx  |  35 ++
 .../web/src/components/Author/Author.test.tsx |  19 +
 .../web/src/components/Author/Author.tsx      |  16 +
 .../components/AuthorCell/AuthorCell.mock.ts  |   8 +
 .../AuthorCell/AuthorCell.stories.tsx         |  35 ++
 .../components/AuthorCell/AuthorCell.test.tsx |  42 ++
 .../src/components/AuthorCell/AuthorCell.tsx  |  39 ++
 .../components/BlogPost/BlogPost.stories.tsx  |  26 +
 .../src/components/BlogPost/BlogPost.test.tsx |  14 +
 .../web/src/components/BlogPost/BlogPost.tsx  |  41 ++
 .../BlogPostCell/BlogPostCell.mock.ts         |  15 +
 .../BlogPostCell/BlogPostCell.stories.tsx     |  35 ++
 .../BlogPostCell/BlogPostCell.test.tsx        |  42 ++
 .../components/BlogPostCell/BlogPostCell.tsx  |  46 ++
 .../BlogPostsCell/BlogPostsCell.mock.ts       |  41 ++
 .../BlogPostsCell/BlogPostsCell.stories.tsx   |  35 ++
 .../BlogPostsCell/BlogPostsCell.test.tsx      |  42 ++
 .../BlogPostsCell/BlogPostsCell.tsx           |  43 ++
 .../web/src/components/{Card => }/Card.tsx    |   0
 .../components/Contact/Contact/Contact.tsx    |  98 ++++
 .../Contact/ContactCell/ContactCell.tsx       |  40 ++
 .../Contact/ContactForm/ContactForm.tsx       | 101 ++++
 .../components/Contact/Contacts/Contacts.tsx  | 102 ++++
 .../Contact/ContactsCell/ContactsCell.tsx     |  48 ++
 .../EditContactCell/EditContactCell.tsx       |  89 ++++
 .../Contact/NewContact/NewContact.tsx         |  55 ++
 .../components/{Fruit.tsx => FruitInfo.tsx}   |  12 +-
 .../Post/EditPostCell/EditPostCell.tsx        |  78 +++
 .../src/components/Post/NewPost/NewPost.tsx   |  52 ++
 .../web/src/components/Post/Post/Post.tsx     |  98 ++++
 .../src/components/Post/PostCell/PostCell.tsx |  38 ++
 .../src/components/Post/PostForm/PostForm.tsx | 102 ++++
 .../web/src/components/Post/Posts/Posts.tsx   | 102 ++++
 .../components/Post/PostsCell/PostsCell.tsx   |  45 ++
 .../{Produce.tsx => ProduceInfo.tsx}          |   8 +-
 .../components/{Stall.tsx => StallInfo.tsx}   |   6 +-
 .../{Vegetable.tsx => VegetableInfo.tsx}      |  12 +-
 .../WaterfallBlogPostCell.mock.ts             |  15 +
 .../WaterfallBlogPostCell.stories.tsx         |  35 ++
 .../WaterfallBlogPostCell.test.tsx            |  42 ++
 .../WaterfallBlogPostCell.tsx                 |  67 +++
 .../web/src/entry.client.tsx                  |   6 +
 .../web/src/graphql/persistedOperations.json  |   4 -
 .../web/src/graphql/possible-types.ts         |  12 -
 .../web/src/graphql/possibleTypes.ts          |  30 +-
 .../fragment-test-project/web/src/index.css   |  13 +
 .../layouts/BlogLayout/BlogLayout.stories.tsx |  13 +
 .../layouts/BlogLayout/BlogLayout.test.tsx    |  14 +
 .../web/src/layouts/BlogLayout/BlogLayout.tsx |  80 +++
 .../layouts/ScaffoldLayout/ScaffoldLayout.tsx |  37 ++
 .../web/src/lib/formatters.test.tsx           | 192 +++++++
 .../web/src/lib/formatters.tsx                |  58 ++
 .../src/pages/AboutPage/AboutPage.stories.tsx |  13 +
 .../src/pages/AboutPage/AboutPage.test.tsx    |  14 +
 .../web/src/pages/AboutPage/AboutPage.tsx     |  13 +
 .../BlogPostPage/BlogPostPage.routeHooks.ts   |   5 +
 .../BlogPostPage/BlogPostPage.stories.tsx     |  17 +
 .../pages/BlogPostPage/BlogPostPage.test.tsx  |  14 +
 .../src/pages/BlogPostPage/BlogPostPage.tsx   |  20 +
 .../pages/Contact/ContactPage/ContactPage.tsx |  11 +
 .../Contact/ContactsPage/ContactsPage.tsx     |   7 +
 .../EditContactPage/EditContactPage.tsx       |  11 +
 .../Contact/NewContactPage/NewContactPage.tsx |   7 +
 .../ContactUsPage/ContactUsPage.stories.tsx   |  13 +
 .../ContactUsPage/ContactUsPage.test.tsx      |  14 +
 .../src/pages/ContactUsPage/ContactUsPage.tsx | 108 ++++
 .../pages/DoublePage/DoublePage.stories.tsx   |  13 +
 .../src/pages/DoublePage/DoublePage.test.tsx  |  14 +
 .../web/src/pages/DoublePage/DoublePage.tsx   |  25 +
 .../ForgotPasswordPage/ForgotPasswordPage.tsx |  94 ++++
 .../GroceriesPage/GroceriesPage.stories.tsx   |  13 +
 .../GroceriesPage/GroceriesPage.test.tsx      |  14 +
 .../src/pages/GroceriesPage/GroceriesPage.tsx |  32 +-
 .../src/pages/HomePage/HomePage.stories.tsx   |  13 +
 .../web/src/pages/HomePage/HomePage.test.tsx  |  14 +
 .../web/src/pages/HomePage/HomePage.tsx       |  10 +
 .../web/src/pages/LoginPage/LoginPage.tsx     | 134 +++++
 .../pages/Post/EditPostPage/EditPostPage.tsx  |  11 +
 .../pages/Post/NewPostPage/NewPostPage.tsx    |   7 +
 .../web/src/pages/Post/PostPage/PostPage.tsx  |  11 +
 .../src/pages/Post/PostsPage/PostsPage.tsx    |   7 +
 .../pages/ProfilePage/ProfilePage.stories.tsx |  13 +
 .../pages/ProfilePage/ProfilePage.test.tsx    |  21 +
 .../web/src/pages/ProfilePage/ProfilePage.tsx |  55 ++
 .../ResetPasswordPage/ResetPasswordPage.tsx   | 121 +++++
 .../web/src/pages/SignupPage/SignupPage.tsx   | 148 ++++++
 .../WaterfallPage/WaterfallPage.routeHooks.ts |   3 +
 .../WaterfallPage/WaterfallPage.stories.tsx   |  17 +
 .../WaterfallPage/WaterfallPage.test.tsx      |  14 +
 .../src/pages/WaterfallPage/WaterfallPage.tsx |  11 +
 .../web/src/scaffold.css                      | 243 +++++++++
 .../fragment-test-project/web/tsconfig.json   |   5 +-
 .../web/types/graphql.d.ts                    | 353 ++++++++++++-
 .../web/types/possible-types.ts               |  20 -
 .../fragment-test-project/web/vite.config.ts  |  27 +-
 __fixtures__/test-project/scripts/seed.ts     |  26 +-
 package.json                                  |   1 +
 packages/cli/src/commands/buildHandler.js     |  19 +
 .../templates/js/web/src/App.jsx              |   9 +-
 .../js/web/src/graphql/possibleTypes.js       |   5 -
 .../templates/ts/web/src/App.tsx              |   9 +-
 .../ts/web/src/graphql/possibleTypes.ts       |  11 -
 .../tests/templates.test.js                   |   4 -
 .../internal/src/generate/clientPreset.ts     |   1 +
 packages/vite/src/index.ts                    |   1 -
 packages/web/src/apollo/index.tsx             |   2 +
 .../web/src/components/cell/createCell.tsx    |   4 +-
 .../fragments-dev/playwright.config.ts        |  25 +
 .../fragments-dev/tests/fragments.spec.ts     |  17 +
 .../fragments-serve/playwright.config.ts      |  21 +
 .../fragments-serve/tests/fragments.spec.ts   |  17 +
 tasks/test-project/add-gql-fragments.ts       |  29 +
 tasks/test-project/codemods/groceriesPage.ts  | 208 ++++++++
 tasks/test-project/codemods/models.js         |  28 +-
 tasks/test-project/codemods/producesSdl.ts    |   5 +
 tasks/test-project/codemods/seed.js           |  26 +-
 tasks/test-project/codemods/seedFragments.ts  |  83 +++
 .../rebuild-fragments-test-project-fixture.ts | 495 ++++++++++++++++++
 .../rebuild-test-project-fixture.ts           |   2 +-
 tasks/test-project/tasks.js                   | 122 ++++-
 .../templates/api/groceries.sdl.ts            |  49 ++
 tasks/test-project/templates/api/groceries.ts |  32 ++
 tasks/test-project/templates/web/Card.tsx     |   9 +
 .../test-project/templates/web/FruitInfo.tsx  |  37 ++
 .../templates/web/ProduceInfo.tsx             |  28 +
 .../test-project/templates/web/StallInfo.tsx  |  26 +
 .../templates/web/VegetableInfo.tsx           |  37 ++
 tasks/test-project/tui-tasks.js               | 118 +++++
 195 files changed, 7373 insertions(+), 426 deletions(-)
 rename __fixtures__/fragment-test-project/{web => }/.editorconfig (100%)
 create mode 100644 __fixtures__/fragment-test-project/.env.defaults
 create mode 100644 __fixtures__/fragment-test-project/.env.example
 create mode 100644 __fixtures__/fragment-test-project/.gitignore
 create mode 100644 __fixtures__/fragment-test-project/.redwood/README.md
 delete mode 100644 __fixtures__/fragment-test-project/.redwood/schema.graphql
 create mode 100644 __fixtures__/fragment-test-project/.vscode/extensions.json
 create mode 100644 __fixtures__/fragment-test-project/.vscode/launch.json
 create mode 100644 __fixtures__/fragment-test-project/.vscode/settings.json
 create mode 100644 __fixtures__/fragment-test-project/.vscode/tasks.json
 create mode 100644 __fixtures__/fragment-test-project/.yarnrc.yml
 create mode 100644 __fixtures__/fragment-test-project/api/db/migrations/20220101120000_create_post_user/migration.sql
 create mode 100644 __fixtures__/fragment-test-project/api/db/migrations/20220102120000_create_contact/migration.sql
 create mode 100644 __fixtures__/fragment-test-project/api/db/migrations/20240106111257_create_produce_stall/migration.sql
 create mode 100644 __fixtures__/fragment-test-project/api/db/migrations/migration_lock.toml
 delete mode 100644 __fixtures__/fragment-test-project/api/src/.keep
 create mode 100644 __fixtures__/fragment-test-project/api/src/__tests__/context.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/functions/auth.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/graphql/contacts.sdl.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/graphql/posts.sdl.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/graphql/produces.sdl.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/graphql/users.sdl.ts
 delete mode 100644 __fixtures__/fragment-test-project/api/src/lib/persistedOperations.json
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/contacts/contacts.scenarios.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/contacts/contacts.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/contacts/contacts.ts
 delete mode 100644 __fixtures__/fragment-test-project/api/src/services/fruit.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/posts/posts.scenarios.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/posts/posts.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/posts/posts.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/produces/produces.scenarios.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/produces/produces.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/produces/produces.ts
 delete mode 100644 __fixtures__/fragment-test-project/api/src/services/stalls.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/stalls/stalls.scenarios.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/stalls/stalls.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/stalls/stalls.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/users/users.scenarios.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/users/users.test.ts
 create mode 100644 __fixtures__/fragment-test-project/api/src/services/users/users.ts
 delete mode 100644 __fixtures__/fragment-test-project/api/src/services/vegetables.ts
 create mode 100644 __fixtures__/fragment-test-project/jest.config.js
 create mode 100644 __fixtures__/fragment-test-project/package.json
 create mode 100644 __fixtures__/fragment-test-project/prettier.config.js
 create mode 100644 __fixtures__/fragment-test-project/scripts/seed.ts
 create mode 100644 __fixtures__/fragment-test-project/scripts/tsconfig.json
 create mode 100644 __fixtures__/fragment-test-project/web/config/postcss.config.js
 create mode 100644 __fixtures__/fragment-test-project/web/config/tailwind.config.js
 create mode 100644 __fixtures__/fragment-test-project/web/public/README.md
 create mode 100644 __fixtures__/fragment-test-project/web/public/favicon.png
 create mode 100644 __fixtures__/fragment-test-project/web/public/robots.txt
 create mode 100644 __fixtures__/fragment-test-project/web/src/Redwood.stories.mdx
 create mode 100644 __fixtures__/fragment-test-project/web/src/auth.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Author/Author.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Author/Author.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Author/Author.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.mock.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.mock.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.mock.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx
 rename __fixtures__/fragment-test-project/web/src/components/{Card => }/Card.tsx (100%)
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/Contact/Contact.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/ContactCell/ContactCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/ContactForm/ContactForm.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/Contacts/Contacts.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Contact/NewContact/NewContact.tsx
 rename __fixtures__/fragment-test-project/web/src/components/{Fruit.tsx => FruitInfo.tsx} (74%)
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/NewPost/NewPost.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/Post/Post.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/PostCell/PostCell.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/PostForm/PostForm.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/Posts/Posts.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/Post/PostsCell/PostsCell.tsx
 rename __fixtures__/fragment-test-project/web/src/components/{Produce.tsx => ProduceInfo.tsx} (73%)
 rename __fixtures__/fragment-test-project/web/src/components/{Stall.tsx => StallInfo.tsx} (83%)
 rename __fixtures__/fragment-test-project/web/src/components/{Vegetable.tsx => VegetableInfo.tsx} (74%)
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.mock.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.tsx
 delete mode 100644 __fixtures__/fragment-test-project/web/src/graphql/persistedOperations.json
 delete mode 100644 __fixtures__/fragment-test-project/web/src/graphql/possible-types.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/lib/formatters.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/lib/formatters.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.routeHooks.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Contact/ContactPage/ContactPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Contact/ContactsPage/ContactsPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Contact/EditContactPage/EditContactPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Contact/NewContactPage/NewContactPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/LoginPage/LoginPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Post/EditPostPage/EditPostPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Post/NewPostPage/NewPostPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Post/PostPage/PostPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/Post/PostsPage/PostsPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/SignupPage/SignupPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.routeHooks.ts
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.test.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.tsx
 create mode 100644 __fixtures__/fragment-test-project/web/src/scaffold.css
 delete mode 100644 __fixtures__/fragment-test-project/web/types/possible-types.ts
 delete mode 100644 packages/create-redwood-app/templates/js/web/src/graphql/possibleTypes.js
 delete mode 100644 packages/create-redwood-app/templates/ts/web/src/graphql/possibleTypes.ts
 create mode 100644 tasks/smoke-tests/fragments-dev/playwright.config.ts
 create mode 100644 tasks/smoke-tests/fragments-dev/tests/fragments.spec.ts
 create mode 100644 tasks/smoke-tests/fragments-serve/playwright.config.ts
 create mode 100644 tasks/smoke-tests/fragments-serve/tests/fragments.spec.ts
 create mode 100755 tasks/test-project/add-gql-fragments.ts
 create mode 100644 tasks/test-project/codemods/groceriesPage.ts
 create mode 100644 tasks/test-project/codemods/producesSdl.ts
 create mode 100644 tasks/test-project/codemods/seedFragments.ts
 create mode 100755 tasks/test-project/rebuild-fragments-test-project-fixture.ts
 create mode 100644 tasks/test-project/templates/api/groceries.sdl.ts
 create mode 100644 tasks/test-project/templates/api/groceries.ts
 create mode 100644 tasks/test-project/templates/web/Card.tsx
 create mode 100644 tasks/test-project/templates/web/FruitInfo.tsx
 create mode 100644 tasks/test-project/templates/web/ProduceInfo.tsx
 create mode 100644 tasks/test-project/templates/web/StallInfo.tsx
 create mode 100644 tasks/test-project/templates/web/VegetableInfo.tsx

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 923978293a20..8d439012c71e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -702,6 +702,96 @@ jobs:
     steps:
       - run: echo "Skipped"
 
+  fragments-smoke-tests:
+    needs: check
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+
+    name: 📄 Fragments Smoke tests / ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    env:
+      REDWOOD_CI: 1
+      REDWOOD_VERBOSE_TELEMETRY: 1
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: 🐈 Set up yarn cache
+        uses: ./.github/actions/set-up-yarn-cache
+
+      - name: 🐈 Yarn install
+        run: yarn install --inline-builds
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: 🔨 Build
+        run: yarn build
+
+      - name: 🌲 Set up test project
+        id: set-up-test-project
+        uses: ./.github/actions/set-up-test-project
+        with:
+          bundler: vite
+          canary: true
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: Run Fragments codemods on test project
+        run: npx -y tsx ./tasks/test-project/add-gql-fragments ${{ steps.set-up-test-project.outputs.test-project-path }}
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 🎭 Install playwright dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Fragments dev smoke tests
+        working-directory: ./tasks/smoke-tests/fragments-dev
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Build for production
+        working-directory: ${{ steps.set-up-test-project.outputs.test-project-path }}
+        run: yarn rw build
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Run Fragments serve smoke tests
+        working-directory: ./tasks/smoke-tests/fragments-serve
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+  fragments-smoke-tests-skip:
+    needs: detect-changes
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+
+    name: 📄 Fragments Smoke tests / ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - run: echo "Skipped"
+
   crwa:
     needs: check
 
diff --git a/__fixtures__/fragment-test-project/web/.editorconfig b/__fixtures__/fragment-test-project/.editorconfig
similarity index 100%
rename from __fixtures__/fragment-test-project/web/.editorconfig
rename to __fixtures__/fragment-test-project/.editorconfig
diff --git a/__fixtures__/fragment-test-project/.env.defaults b/__fixtures__/fragment-test-project/.env.defaults
new file mode 100644
index 000000000000..fb88fb33b334
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.env.defaults
@@ -0,0 +1,19 @@
+# These environment variables will be used by default if you do not create any
+# yourself in .env. This file should be safe to check into your version control
+# system. Any custom values should go in .env and .env should *not* be checked
+# into version control.
+
+# schema.prisma defaults
+DATABASE_URL=file:./dev.db
+
+# location of the test database for api service scenarios (defaults to ./.redwood/test.db if not set)
+# TEST_DATABASE_URL=file:./.redwood/test.db
+
+# disables Prisma CLI update notifier
+PRISMA_HIDE_UPDATE_MESSAGE=true
+
+# Option to override the current environment's default api-side log level
+# See: https://redwoodjs.com/docs/logger for level options, defaults to "trace" otherwise.
+# Most applications want "debug" or "info" during dev, "trace" when you have issues and "warn" in production.
+# Ordered by how verbose they are: trace | debug | info | warn | error | silent
+# LOG_LEVEL=debug
diff --git a/__fixtures__/fragment-test-project/.env.example b/__fixtures__/fragment-test-project/.env.example
new file mode 100644
index 000000000000..2a2de6c026ca
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.env.example
@@ -0,0 +1,4 @@
+# DATABASE_URL=file:./dev.db
+# TEST_DATABASE_URL=file:./.redwood/test.db
+# PRISMA_HIDE_UPDATE_MESSAGE=true
+# LOG_LEVEL=trace
diff --git a/__fixtures__/fragment-test-project/.gitignore b/__fixtures__/fragment-test-project/.gitignore
new file mode 100644
index 000000000000..9b8149560d9b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.gitignore
@@ -0,0 +1,22 @@
+.idea
+.DS_Store
+.env
+.netlify
+.redwood/*
+!.redwood/README.md
+dev.db*
+dist
+dist-babel
+node_modules
+yarn-error.log
+web/public/mockServiceWorker.js
+web/types/graphql.d.ts
+api/types/graphql.d.ts
+api/src/lib/generateGraphiQLHeader.*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/__fixtures__/fragment-test-project/.redwood/README.md b/__fixtures__/fragment-test-project/.redwood/README.md
new file mode 100644
index 000000000000..f22b586a47cc
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.redwood/README.md
@@ -0,0 +1,44 @@
+# .redwood
+
+## What is this directory?
+
+Redwood uses this `.redwood` directory to store transitory data that aids in the smooth and convenient operation of your Redwood project.
+
+## Do I need to do anything with this directory?
+
+No. You shouldn't have to create, edit or delete anything in this directory in your day-to-day work with Redwood.
+
+You don't need to commit any other contents of this directory to your version control system. It's ignored by default.
+
+## What's in this directory?
+
+### Files
+
+| Name              | Description |
+| :---------------- | :------- |
+| commandCache.json | This file contains mappings to assist the Redwood CLI in efficiently executing commands. |
+| schema.graphql    | This is the GraphQL schema which has been automatically generated from your Redwood project. |
+| studio.db         | The sqlite database used by the experimental `rw exp studio` feature. |
+| telemetry.txt     | Contains a unique ID used for telemetry. This value is rotated every 24 hours to protect your project's anonymity. |
+| test.db           | The sqlite database used when running tests. |
+
+### Directories
+
+| Name        | Description |
+| :---------- | :------- |
+| locks       | Stores temporary files that Redwood uses to keep track of the execution of async/background tasks between processes.  |
+| logs        | Stores log files for background tasks such as update checking. |
+| prebuild    | Stores transpiled JavaScript that is generated as part of Redwood's build process. |
+| telemetry   | Stores the recent telemetry that the Redwood CLI has generated. You may inspect these files to see everything Redwood is anonymously collecting. |
+| types       | Stores the results of type generation. |
+| updateCheck | Stores a file which contains the results of checking for Redwood updates. |
+
+We try to keep this README up to date but you may, from time to time, find other files or directories in this `.redwood` directory that have not yet been documented here. This is likely nothing to worry about but feel free to let us know and we'll update this list.
+
+### Telemetry
+
+RedwoodJS collects completely anonymous telemetry data about general usage. For transparency, that data is viewable in the respective directories and files. To learn more and manage your project's settings, visit [telemetry.redwoodjs.com](https://telemetry.redwoodjs.com).
+
+### Have any questions?
+
+Feel free to reach out to us in the [RedwoodJS Community](https://community.redwoodjs.com/) forum if you have any questions.
diff --git a/__fixtures__/fragment-test-project/.redwood/schema.graphql b/__fixtures__/fragment-test-project/.redwood/schema.graphql
deleted file mode 100644
index 1cd2ea849879..000000000000
--- a/__fixtures__/fragment-test-project/.redwood/schema.graphql
+++ /dev/null
@@ -1,102 +0,0 @@
-"""
-Use to check whether or not a user is authenticated and is associated
-with an optional set of roles.
-"""
-directive @requireAuth(roles: [String]) on FIELD_DEFINITION
-
-"""Use to skip authentication checks and allow public access."""
-directive @skipAuth on FIELD_DEFINITION
-
-scalar BigInt
-
-scalar Date
-
-scalar DateTime
-
-type Fruit implements Grocery {
-  id: ID!
-
-  """Seedless is only for fruits"""
-  isSeedless: Boolean
-  name: String!
-  nutrients: String
-  price: Int!
-  quantity: Int!
-  region: String!
-
-  """Ripeness is only for fruits"""
-  ripenessIndicators: String
-  stall: Stall!
-}
-
-union Groceries = Fruit | Vegetable
-
-interface Grocery {
-  id: ID!
-  name: String!
-  nutrients: String
-  price: Int!
-  quantity: Int!
-  region: String!
-  stall: Stall!
-}
-
-scalar JSON
-
-scalar JSONObject
-
-"""About the Redwood queries."""
-type Query {
-  fruitById(id: ID!): Fruit
-  fruits: [Fruit!]!
-  groceries: [Groceries!]!
-
-  """Fetches the Redwood root schema."""
-  redwood: Redwood
-  stallById(id: ID!): Stall
-  stalls: [Stall!]!
-  vegetableById(id: ID!): Vegetable
-  vegetables: [Vegetable!]!
-}
-
-"""
-The RedwoodJS Root Schema
-
-Defines details about RedwoodJS such as the current user and version information.
-"""
-type Redwood {
-  """The current user."""
-  currentUser: JSON
-
-  """The version of Prisma."""
-  prismaVersion: String
-
-  """The version of Redwood."""
-  version: String
-}
-
-type Stall {
-  fruits: [Fruit]
-  id: ID!
-  name: String!
-  stallNumber: String!
-  vegetables: [Vegetable]
-}
-
-scalar Time
-
-type Vegetable implements Grocery {
-  id: ID!
-
-  """Pickled is only for vegetables"""
-  isPickled: Boolean
-  name: String!
-  nutrients: String
-  price: Int!
-  quantity: Int!
-  region: String!
-  stall: Stall!
-
-  """Veggie Family is only for vegetables"""
-  vegetableFamily: String
-}
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/.vscode/extensions.json b/__fixtures__/fragment-test-project/.vscode/extensions.json
new file mode 100644
index 000000000000..6e458a923135
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.vscode/extensions.json
@@ -0,0 +1,16 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "ofhumanbondage.react-proptypes-intellisense",
+    "mgmcdermott.vscode-language-babel",
+    "wix.vscode-import-cost",
+    "pflannery.vscode-versionlens",
+    "editorconfig.editorconfig",
+    "prisma.prisma",
+    "graphql.vscode-graphql",
+    "csstools.postcss",
+    "bradlc.vscode-tailwindcss"
+  ],
+  "unwantedRecommendations": []
+}
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/.vscode/launch.json b/__fixtures__/fragment-test-project/.vscode/launch.json
new file mode 100644
index 000000000000..340be43c34da
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.vscode/launch.json
@@ -0,0 +1,56 @@
+{
+  "version": "0.3.0",
+  "configurations": [
+    {
+      "command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
+      "name": "Run Dev Server",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "name": "Attach API debugger",
+      "port": 18911, // you can change this port, see https://redwoodjs.com/docs/project-configuration-dev-test-build#debugger-configuration
+      "request": "attach",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node",
+      "localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
+      "remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
+      "sourceMaps": true,
+      "restart": true,
+      "preLaunchTask": "WaitForDevServer",
+    },
+    {
+      "name": "Launch Web debugger",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:8910",
+      "webRoot": "${workspaceRoot}/web/src",
+      "preLaunchTask": "WaitForDevServer",
+    },
+    {
+      "command": "yarn redwood test api",
+      "name": "Test api",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "yarn redwood test web",
+      "name": "Test web",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+  ],
+  "compounds": [
+    {
+      "name": "Start Debug",
+      "configurations": [
+        "Run Dev Server",
+        "Attach API debugger",
+        "Launch Web debugger"
+      ],
+      "stopAll": true
+    }
+  ]
+}
diff --git a/__fixtures__/fragment-test-project/.vscode/settings.json b/__fixtures__/fragment-test-project/.vscode/settings.json
new file mode 100644
index 000000000000..6887d360eb96
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "editor.tabSize": 2,
+  "files.trimTrailingWhitespace": true,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[prisma]": {
+    "editor.formatOnSave": true
+  }
+}
diff --git a/__fixtures__/fragment-test-project/.vscode/tasks.json b/__fixtures__/fragment-test-project/.vscode/tasks.json
new file mode 100644
index 000000000000..549249ec6324
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.vscode/tasks.json
@@ -0,0 +1,29 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "WaitForDevServer",
+      "group": "none",
+      "type": "shell",
+      "command": "bash",
+        "args": [
+          "-c",
+          "while ! echo -n > /dev/tcp/localhost/18911; do sleep 1; done;"
+      ],
+      "windows": {
+        "command": "powershell",
+        "args": [
+          "-NoProfile",
+          "-ExecutionPolicy", "Bypass",
+          "while (-not (Test-NetConnection -ComputerName localhost -Port 18911)) { Start-Sleep -Seconds 1 };"
+        ]
+      },
+      "presentation": {
+        "reveal": "silent",
+        "revealProblems": "onProblem",
+        "panel": "shared",
+        "close": true
+      }
+    },
+  ]
+}
diff --git a/__fixtures__/fragment-test-project/.yarnrc.yml b/__fixtures__/fragment-test-project/.yarnrc.yml
new file mode 100644
index 000000000000..e8c5d50aa786
--- /dev/null
+++ b/__fixtures__/fragment-test-project/.yarnrc.yml
@@ -0,0 +1,15 @@
+# Yarn's manifest file. You can configure yarn here.
+# See https://yarnpkg.com/configuration/yarnrc.
+
+# For `node_modules` (see `nodeLinker` below), this is almost always the preferred option.
+compressionLevel: 0
+
+enableGlobalCache: true
+
+# Lets yarn use hardlinks inside `node_modules` to dedupe packages.
+# For a more pnpm-like experience, consider `hardlinks-global` where hardlinks point to a global store.
+nmMode: hardlinks-local
+
+# How to install Node packages.
+# Heads up: right now, Redwood expects this to be `node-modules`.
+nodeLinker: node-modules
diff --git a/__fixtures__/fragment-test-project/README.md b/__fixtures__/fragment-test-project/README.md
index 861af7d9e65e..60a38fe2c6ac 100644
--- a/__fixtures__/fragment-test-project/README.md
+++ b/__fixtures__/fragment-test-project/README.md
@@ -1,4 +1,122 @@
-# Project to Test GraphQL Fragments
+# README
 
-* Has unions and interfaces to test: https://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces
-* Generates "possible types" for Apollo Client, see: https://www.apollographql.com/docs/react/data/fragments/#defining-possibletypes-manually
+Welcome to [RedwoodJS](https://redwoodjs.com)!
+
+> **Prerequisites**
+>
+> - Redwood requires [Node.js](https://nodejs.org/en/) (=20.x) and [Yarn](https://yarnpkg.com/)
+> - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
+
+Start by installing dependencies:
+
+```
+yarn install
+```
+
+Then start the development server:
+
+```
+yarn redwood dev
+```
+
+Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.
+
+> **The Redwood CLI**
+>
+> Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:
+>
+> ```
+> yarn redwood --help
+> ```
+>
+> For all the details, see the [CLI reference](https://redwoodjs.com/docs/cli-commands).
+
+## Prisma and the database
+
+Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the [`schema.prisma`](api/db/schema.prisma) file in `api/db` and replace the `UserExample` model with the following `Post` model:
+
+```prisma
+model Post {
+  id        Int      @id @default(autoincrement())
+  title     String
+  body      String
+  createdAt DateTime @default(now())
+}
+```
+
+Redwood uses [Prisma](https://www.prisma.io/), a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma [Migrate](https://www.prisma.io/migrate) uses that schema to make database migrations hassle-free:
+
+```
+yarn rw prisma migrate dev
+
+# ...
+
+? Enter a name for the new migration: › create posts
+```
+
+> `rw` is short for `redwood`
+
+You'll be prompted for the name of your migration. `create posts` will do.
+
+Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our `Post` model:
+
+```
+yarn redwood generate scaffold post
+```
+
+Navigate to [http://localhost:8910/posts/new](http://localhost:8910/posts/new), fill in the title and body, and click "Save".
+
+Did we just create a post in the database? Yup! With `yarn rw generate scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
+
+## Frontend first with Storybook
+
+Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:
+
+```
+yarn rw storybook
+```
+
+Seeing "Couldn't find any stories"? That's because you need a `*.stories.{tsx,jsx}` file. The Redwood CLI makes getting one easy enough—try generating a [Cell](https://redwoodjs.com/docs/cells), Redwood's data-fetching abstraction:
+
+```
+yarn rw generate cell examplePosts
+```
+
+The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's `setup ui` command has your favorite styling library:
+
+```
+yarn rw setup ui --help
+```
+
+## Testing with Jest
+
+It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:
+
+```
+yarn rw test
+```
+
+To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing#mocking-graphql-calls).
+
+## Ship it
+
+Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:
+
+```
+yarn rw setup deploy --help
+```
+
+Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third-party auth providers:
+
+```
+yarn rw setup auth --help
+```
+
+## Next Steps
+
+The best way to learn Redwood is by going through the comprehensive [tutorial](https://redwoodjs.com/docs/tutorial/foreword) and joining the community (via the [Discourse forum](https://community.redwoodjs.com) or the [Discord server](https://discord.gg/redwoodjs)).
+
+## Quick Links
+
+- Stay updated: read [Forum announcements](https://community.redwoodjs.com/c/announcements/5), follow us on [Twitter](https://twitter.com/redwoodjs), and subscribe to the [newsletter](https://redwoodjs.com/newsletter)
+- [Learn how to contribute](https://redwoodjs.com/docs/contributing)
diff --git a/__fixtures__/fragment-test-project/api/db/migrations/20220101120000_create_post_user/migration.sql b/__fixtures__/fragment-test-project/api/db/migrations/20220101120000_create_post_user/migration.sql
new file mode 100644
index 000000000000..9dd73df9b6ac
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/db/migrations/20220101120000_create_post_user/migration.sql
@@ -0,0 +1,34 @@
+-- CreateTable
+CREATE TABLE "UserExample" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "email" TEXT NOT NULL,
+    "name" TEXT
+);
+
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "body" TEXT NOT NULL,
+    "authorId" INTEGER NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "email" TEXT NOT NULL,
+    "hashedPassword" TEXT NOT NULL,
+    "fullName" TEXT NOT NULL,
+    "salt" TEXT NOT NULL,
+    "resetToken" TEXT,
+    "resetTokenExpiresAt" DATETIME,
+    "roles" TEXT
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserExample_email_key" ON "UserExample"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
diff --git a/__fixtures__/fragment-test-project/api/db/migrations/20220102120000_create_contact/migration.sql b/__fixtures__/fragment-test-project/api/db/migrations/20220102120000_create_contact/migration.sql
new file mode 100644
index 000000000000..8d7bd91beb4d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/db/migrations/20220102120000_create_contact/migration.sql
@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "Contact" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
diff --git a/__fixtures__/fragment-test-project/api/db/migrations/20240106111257_create_produce_stall/migration.sql b/__fixtures__/fragment-test-project/api/db/migrations/20240106111257_create_produce_stall/migration.sql
new file mode 100644
index 000000000000..f7f6352f3e01
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/db/migrations/20240106111257_create_produce_stall/migration.sql
@@ -0,0 +1,28 @@
+-- CreateTable
+CREATE TABLE "Produce" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "quantity" INTEGER NOT NULL,
+    "price" INTEGER NOT NULL,
+    "nutrients" TEXT,
+    "region" TEXT NOT NULL,
+    "isSeedless" BOOLEAN,
+    "ripenessIndicators" TEXT,
+    "vegetableFamily" TEXT,
+    "isPickled" BOOLEAN,
+    "stallId" TEXT NOT NULL,
+    CONSTRAINT "Produce_stallId_fkey" FOREIGN KEY ("stallId") REFERENCES "Stall" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Stall" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "stallNumber" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Produce_name_key" ON "Produce"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Stall_stallNumber_key" ON "Stall"("stallNumber");
diff --git a/__fixtures__/fragment-test-project/api/db/migrations/migration_lock.toml b/__fixtures__/fragment-test-project/api/db/migrations/migration_lock.toml
new file mode 100644
index 000000000000..e5e5c4705ab0
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/db/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/api/db/schema.prisma b/__fixtures__/fragment-test-project/api/db/schema.prisma
index 20b2df54078c..bf7e70169a1b 100644
--- a/__fixtures__/fragment-test-project/api/db/schema.prisma
+++ b/__fixtures__/fragment-test-project/api/db/schema.prisma
@@ -1,7 +1,12 @@
+// Don't forget to tell Prisma about your edits to this file using
+// `yarn rw prisma migrate dev` or `yarn rw prisma db push`.
+// `migrate` is like committing while `push` is for prototyping.
+// Read more about both here:
+// https://www.prisma.io/docs/orm/prisma-migrate
+
 datasource db {
-  provider  = "sqlite"
-  url       = env("DATABASE_URL")
-  directUrl = env("DIRECT_URL")
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
 }
 
 generator client {
@@ -9,11 +14,42 @@ generator client {
   binaryTargets = "native"
 }
 
-model Stall {
-  id          String    @id @default(cuid())
-  name        String
-  stallNumber String    @unique
-  produce     Produce[]
+// Define your own datamodels here and run `yarn redwood prisma migrate dev`
+// to create migrations for them and apply to your dev DB.
+// TODO: Please remove the following example:
+model UserExample {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}
+
+model Post {
+  id        Int      @id @default(autoincrement())
+  title     String
+  body      String
+  authorId  Int
+  author    User     @relation(fields: [authorId], references: [id])
+  createdAt DateTime @default(now())
+}
+
+model User {
+  id                  Int       @id @default(autoincrement())
+  email               String    @unique
+  hashedPassword      String
+  fullName            String
+  salt                String
+  resetToken          String?
+  resetTokenExpiresAt DateTime?
+  roles               String?
+  posts               Post[]
+}
+
+model Contact {
+  id        Int      @id @default(autoincrement())
+  name      String
+  email     String
+  message   String
+  createdAt DateTime @default(now())
 }
 
 model Produce {
@@ -34,3 +70,10 @@ model Produce {
   stall              Stall    @relation(fields: [stallId], references: [id], onDelete: Cascade)
   stallId            String
 }
+
+model Stall {
+  id          String    @id @default(cuid())
+  name        String
+  stallNumber String    @unique
+  produce     Produce[]
+}
diff --git a/__fixtures__/fragment-test-project/api/package.json b/__fixtures__/fragment-test-project/api/package.json
index 4a05d2980285..1fe562e03fbe 100644
--- a/__fixtures__/fragment-test-project/api/package.json
+++ b/__fixtures__/fragment-test-project/api/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "6.2.0",
-    "@redwoodjs/graphql-server": "6.2.0"
+    "@redwoodjs/api": "6.0.7",
+    "@redwoodjs/auth-dbauth-api": "6.0.7",
+    "@redwoodjs/graphql-server": "6.0.7"
   }
 }
diff --git a/__fixtures__/fragment-test-project/api/src/.keep b/__fixtures__/fragment-test-project/api/src/.keep
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/__fixtures__/fragment-test-project/api/src/__tests__/context.test.ts b/__fixtures__/fragment-test-project/api/src/__tests__/context.test.ts
new file mode 100644
index 000000000000..972c4756e85d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/__tests__/context.test.ts
@@ -0,0 +1,14 @@
+test('Set a mock user on the context', async () => {
+  const user = {
+    id: 0o7,
+    name: 'Bond, James Bond',
+    email: 'totallyNotASpy@example.com',
+    roles: 'secret_agent',
+  }
+  mockCurrentUser(user)
+  expect(context.currentUser).toStrictEqual(user)
+})
+
+test('Context is isolated between tests', () => {
+  expect(context).toStrictEqual({})
+})
diff --git a/__fixtures__/fragment-test-project/api/src/directives/requireAuth/requireAuth.test.ts b/__fixtures__/fragment-test-project/api/src/directives/requireAuth/requireAuth.test.ts
index 0f01aa367a85..abd5e1864a95 100644
--- a/__fixtures__/fragment-test-project/api/src/directives/requireAuth/requireAuth.test.ts
+++ b/__fixtures__/fragment-test-project/api/src/directives/requireAuth/requireAuth.test.ts
@@ -11,7 +11,9 @@ describe('requireAuth directive', () => {
   it('requireAuth has stub implementation. Should not throw when current user', () => {
     // If you want to set values in context, pass it through e.g.
     // mockRedwoodDirective(requireAuth, { context: { currentUser: { id: 1, name: 'Lebron McGretzky' } }})
-    const mockExecution = mockRedwoodDirective(requireAuth, { context: {} })
+    const mockExecution = mockRedwoodDirective(requireAuth, {
+      context: { currentUser: { id: 1, roles: 'ADMIN', email: 'b@zinga.com' } },
+    })
 
     expect(mockExecution).not.toThrowError()
   })
diff --git a/__fixtures__/fragment-test-project/api/src/functions/auth.ts b/__fixtures__/fragment-test-project/api/src/functions/auth.ts
new file mode 100644
index 000000000000..d71b437e9802
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/functions/auth.ts
@@ -0,0 +1,202 @@
+import type { APIGatewayProxyEvent, Context } from 'aws-lambda'
+
+import { DbAuthHandler } from '@redwoodjs/auth-dbauth-api'
+import type { DbAuthHandlerOptions, UserType } from '@redwoodjs/auth-dbauth-api'
+
+import { cookieName } from 'src/lib/auth'
+import { db } from 'src/lib/db'
+
+export const handler = async (
+  event: APIGatewayProxyEvent,
+  context: Context
+) => {
+  const forgotPasswordOptions: DbAuthHandlerOptions['forgotPassword'] = {
+    // handler() is invoked after verifying that a user was found with the given
+    // username. This is where you can send the user an email with a link to
+    // reset their password. With the default dbAuth routes and field names, the
+    // URL to reset the password will be:
+    //
+    // https://example.com/reset-password?resetToken=${user.resetToken}
+    //
+    // Whatever is returned from this function will be returned from
+    // the `forgotPassword()` function that is destructured from `useAuth()`.
+    // You could use this return value to, for example, show the email
+    // address in a toast message so the user will know it worked and where
+    // to look for the email.
+    //
+    // Note that this return value is sent to the client in *plain text*
+    // so don't include anything you wouldn't want prying eyes to see. The
+    // `user` here has been sanitized to only include the fields listed in
+    // `allowedUserFields` so it should be safe to return as-is.
+    handler: (user, _resetToken) => {
+      // TODO: Send user an email/message with a link to reset their password,
+      // including the `resetToken`. The URL should look something like:
+      // `http://localhost:8910/reset-password?resetToken=${resetToken}`
+
+      return user
+    },
+
+    // How long the resetToken is valid for, in seconds (default is 24 hours)
+    expires: 60 * 60 * 24,
+
+    errors: {
+      // for security reasons you may want to be vague here rather than expose
+      // the fact that the email address wasn't found (prevents fishing for
+      // valid email addresses)
+      usernameNotFound: 'Username not found',
+      // if the user somehow gets around client validation
+      usernameRequired: 'Username is required',
+    },
+  }
+
+  const loginOptions: DbAuthHandlerOptions['login'] = {
+    // handler() is called after finding the user that matches the
+    // username/password provided at login, but before actually considering them
+    // logged in. The `user` argument will be the user in the database that
+    // matched the username/password.
+    //
+    // If you want to allow this user to log in simply return the user.
+    //
+    // If you want to prevent someone logging in for another reason (maybe they
+    // didn't validate their email yet), throw an error and it will be returned
+    // by the `logIn()` function from `useAuth()` in the form of:
+    // `{ message: 'Error message' }`
+    handler: (user) => {
+      return user
+    },
+
+    errors: {
+      usernameOrPasswordMissing: 'Both username and password are required',
+      usernameNotFound: 'Username ${username} not found',
+      // For security reasons you may want to make this the same as the
+      // usernameNotFound error so that a malicious user can't use the error
+      // to narrow down if it's the username or password that's incorrect
+      incorrectPassword: 'Incorrect password for ${username}',
+    },
+
+    // How long a user will remain logged in, in seconds
+    expires: 60 * 60 * 24 * 365 * 10,
+  }
+
+  const resetPasswordOptions: DbAuthHandlerOptions['resetPassword'] = {
+    // handler() is invoked after the password has been successfully updated in
+    // the database. Returning anything truthy will automatically log the user
+    // in. Return `false` otherwise, and in the Reset Password page redirect the
+    // user to the login page.
+    handler: (_user) => {
+      return true
+    },
+
+    // If `false` then the new password MUST be different from the current one
+    allowReusedPassword: true,
+
+    errors: {
+      // the resetToken is valid, but expired
+      resetTokenExpired: 'resetToken is expired',
+      // no user was found with the given resetToken
+      resetTokenInvalid: 'resetToken is invalid',
+      // the resetToken was not present in the URL
+      resetTokenRequired: 'resetToken is required',
+      // new password is the same as the old password (apparently they did not forget it)
+      reusedPassword: 'Must choose a new password',
+    },
+  }
+
+  interface UserAttributes {
+    'full-name': string
+  }
+
+  const signupOptions: DbAuthHandlerOptions<
+    UserType,
+    UserAttributes
+  >['signup'] = {
+    // Whatever you want to happen to your data on new user signup. Redwood will
+    // check for duplicate usernames before calling this handler. At a minimum
+    // you need to save the `username`, `hashedPassword` and `salt` to your
+    // user table. `userAttributes` contains any additional object members that
+    // were included in the object given to the `signUp()` function you got
+    // from `useAuth()`.
+    //
+    // If you want the user to be immediately logged in, return the user that
+    // was created.
+    //
+    // If this handler throws an error, it will be returned by the `signUp()`
+    // function in the form of: `{ error: 'Error message' }`.
+    //
+    // If this returns anything else, it will be returned by the
+    // `signUp()` function in the form of: `{ message: 'String here' }`.
+    handler: ({ username, hashedPassword, salt, userAttributes }) => {
+      return db.user.create({
+        data: {
+          email: username,
+          hashedPassword: hashedPassword,
+          salt: salt,
+          fullName: userAttributes['full-name'],
+        },
+      })
+    },
+
+    // Include any format checks for password here. Return `true` if the
+    // password is valid, otherwise throw a `PasswordValidationError`.
+    // Import the error along with `DbAuthHandler` from `@redwoodjs/api` above.
+    passwordValidation: (_password) => {
+      return true
+    },
+
+    errors: {
+      // `field` will be either "username" or "password"
+      fieldMissing: '${field} is required',
+      usernameTaken: 'Username `${username}` already in use',
+    },
+  }
+
+  const authHandler = new DbAuthHandler(event, context, {
+    // Provide prisma db client
+    db: db,
+
+    // The name of the property you'd call on `db` to access your user table.
+    // i.e. if your Prisma model is named `User` this value would be `user`, as in `db.user`
+    authModelAccessor: 'user',
+
+    // A map of what dbAuth calls a field to what your database calls it.
+    // `id` is whatever column you use to uniquely identify a user (probably
+    // something like `id` or `userId` or even `email`)
+    authFields: {
+      id: 'id',
+      username: 'email',
+      hashedPassword: 'hashedPassword',
+      salt: 'salt',
+      resetToken: 'resetToken',
+      resetTokenExpiresAt: 'resetTokenExpiresAt',
+    },
+
+    // A list of fields on your user object that are safe to return to the
+    // client when invoking a handler that returns a user (like forgotPassword
+    // and signup). This list should be as small as possible to be sure not to
+    // leak any sensitive information to the client.
+    allowedUserFields: ['id', 'email'],
+
+    // Specifies attributes on the cookie that dbAuth sets in order to remember
+    // who is logged in. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies
+    cookie: {
+      attributes: {
+        HttpOnly: true,
+        Path: '/',
+        SameSite: 'Strict',
+        Secure: process.env.NODE_ENV !== 'development',
+
+        // If you need to allow other domains (besides the api side) access to
+        // the dbAuth session cookie:
+        // Domain: 'example.com',
+      },
+      name: cookieName,
+    },
+
+    forgotPassword: forgotPasswordOptions,
+    login: loginOptions,
+    resetPassword: resetPasswordOptions,
+    signup: signupOptions,
+  })
+
+  return await authHandler.invoke()
+}
diff --git a/__fixtures__/fragment-test-project/api/src/functions/graphql.ts b/__fixtures__/fragment-test-project/api/src/functions/graphql.ts
index f395c3b0f852..e9c53e285fad 100644
--- a/__fixtures__/fragment-test-project/api/src/functions/graphql.ts
+++ b/__fixtures__/fragment-test-project/api/src/functions/graphql.ts
@@ -1,13 +1,19 @@
+import { createAuthDecoder } from '@redwoodjs/auth-dbauth-api'
 import { createGraphQLHandler } from '@redwoodjs/graphql-server'
 
 import directives from 'src/directives/**/*.{js,ts}'
 import sdls from 'src/graphql/**/*.sdl.{js,ts}'
 import services from 'src/services/**/*.{js,ts}'
 
+import { cookieName, getCurrentUser } from 'src/lib/auth'
 import { db } from 'src/lib/db'
 import { logger } from 'src/lib/logger'
 
+const authDecoder = createAuthDecoder(cookieName)
+
 export const handler = createGraphQLHandler({
+  authDecoder,
+  getCurrentUser,
   loggerConfig: { logger, options: {} },
   directives,
   sdls,
diff --git a/__fixtures__/fragment-test-project/api/src/graphql/contacts.sdl.ts b/__fixtures__/fragment-test-project/api/src/graphql/contacts.sdl.ts
new file mode 100644
index 000000000000..7dec262a579b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/graphql/contacts.sdl.ts
@@ -0,0 +1,32 @@
+export const schema = gql`
+  type Contact {
+    id: Int!
+    name: String!
+    email: String!
+    message: String!
+    createdAt: DateTime!
+  }
+
+  type Query {
+    contacts: [Contact!]! @requireAuth
+    contact(id: Int!): Contact @requireAuth
+  }
+
+  input CreateContactInput {
+    name: String!
+    email: String!
+    message: String!
+  }
+
+  input UpdateContactInput {
+    name: String
+    email: String
+    message: String
+  }
+
+  type Mutation {
+    createContact(input: CreateContactInput!): Contact @skipAuth
+    updateContact(id: Int!, input: UpdateContactInput!): Contact! @requireAuth
+    deleteContact(id: Int!): Contact! @requireAuth(roles: ["ADMIN"])
+  }
+`
diff --git a/__fixtures__/fragment-test-project/api/src/graphql/posts.sdl.ts b/__fixtures__/fragment-test-project/api/src/graphql/posts.sdl.ts
new file mode 100644
index 000000000000..09cf9b2cc6b2
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/graphql/posts.sdl.ts
@@ -0,0 +1,33 @@
+export const schema = gql`
+  type Post {
+    id: Int!
+    title: String!
+    body: String!
+    authorId: Int!
+    author: User!
+    createdAt: DateTime!
+  }
+
+  type Query {
+    posts: [Post!]! @skipAuth
+    post(id: Int!): Post @skipAuth
+  }
+
+  input CreatePostInput {
+    title: String!
+    body: String!
+    authorId: Int!
+  }
+
+  input UpdatePostInput {
+    title: String
+    body: String
+    authorId: Int
+  }
+
+  type Mutation {
+    createPost(input: CreatePostInput!): Post! @requireAuth
+    updatePost(id: Int!, input: UpdatePostInput!): Post! @requireAuth
+    deletePost(id: Int!): Post! @requireAuth
+  }
+`
diff --git a/__fixtures__/fragment-test-project/api/src/graphql/produces.sdl.ts b/__fixtures__/fragment-test-project/api/src/graphql/produces.sdl.ts
new file mode 100644
index 000000000000..1a3342f66270
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/graphql/produces.sdl.ts
@@ -0,0 +1,54 @@
+export const schema = gql`
+  type Produce {
+    id: String!
+    name: String!
+    quantity: Int!
+    price: Int!
+    nutrients: String
+    region: String!
+    isSeedless: Boolean
+    ripenessIndicators: String
+    vegetableFamily: String
+    isPickled: Boolean
+    stall: Stall!
+    stallId: String!
+  }
+
+  type Query {
+    produces: [Produce!]! @skipAuth
+    produce(id: String!): Produce @skipAuth
+  }
+
+  input CreateProduceInput {
+    name: String!
+    quantity: Int!
+    price: Int!
+    nutrients: String
+    region: String!
+    isSeedless: Boolean
+    ripenessIndicators: String
+    vegetableFamily: String
+    isPickled: Boolean
+    stallId: String!
+  }
+
+  input UpdateProduceInput {
+    name: String
+    quantity: Int
+    price: Int
+    nutrients: String
+    region: String
+    isSeedless: Boolean
+    ripenessIndicators: String
+    vegetableFamily: String
+    isPickled: Boolean
+    stallId: String
+  }
+
+  type Mutation {
+    createProduce(input: CreateProduceInput!): Produce! @skipAuth
+    updateProduce(id: String!, input: UpdateProduceInput!): Produce!
+      @skipAuth
+    deleteProduce(id: String!): Produce! @skipAuth
+  }
+`
diff --git a/__fixtures__/fragment-test-project/api/src/graphql/stalls.sdl.ts b/__fixtures__/fragment-test-project/api/src/graphql/stalls.sdl.ts
index ff159aa2df9a..c934eeb4a5fd 100644
--- a/__fixtures__/fragment-test-project/api/src/graphql/stalls.sdl.ts
+++ b/__fixtures__/fragment-test-project/api/src/graphql/stalls.sdl.ts
@@ -1,14 +1,29 @@
 export const schema = gql`
   type Stall {
-    id: ID!
-    stallNumber: String!
+    id: String!
     name: String!
-    fruits: [Fruit]
-    vegetables: [Vegetable]
+    stallNumber: String!
+    produce: [Produce]!
   }
 
   type Query {
-    stalls: [Stall!]! @skipAuth
-    stallById(id: ID!): Stall @skipAuth
+    stalls: [Stall!]! @requireAuth
+    stall(id: String!): Stall @requireAuth
+  }
+
+  input CreateStallInput {
+    name: String!
+    stallNumber: String!
+  }
+
+  input UpdateStallInput {
+    name: String
+    stallNumber: String
+  }
+
+  type Mutation {
+    createStall(input: CreateStallInput!): Stall! @requireAuth
+    updateStall(id: String!, input: UpdateStallInput!): Stall! @requireAuth
+    deleteStall(id: String!): Stall! @requireAuth
   }
 `
diff --git a/__fixtures__/fragment-test-project/api/src/graphql/users.sdl.ts b/__fixtures__/fragment-test-project/api/src/graphql/users.sdl.ts
new file mode 100644
index 000000000000..e2d1c0bed1d1
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/graphql/users.sdl.ts
@@ -0,0 +1,25 @@
+export const schema = gql`
+  type User {
+    id: Int!
+    email: String!
+    fullName: String!
+    roles: String
+    posts: [Post]!
+  }
+
+  type Query {
+    user(id: Int!): User @skipAuth
+  }
+
+  input CreateUserInput {
+    email: String!
+    fullName: String!
+    roles: String
+  }
+
+  input UpdateUserInput {
+    email: String
+    fullName: String
+    roles: String
+  }
+`
diff --git a/__fixtures__/fragment-test-project/api/src/lib/auth.ts b/__fixtures__/fragment-test-project/api/src/lib/auth.ts
index f98fe93a960c..4e8f9005ebe5 100644
--- a/__fixtures__/fragment-test-project/api/src/lib/auth.ts
+++ b/__fixtures__/fragment-test-project/api/src/lib/auth.ts
@@ -1,25 +1,121 @@
+import type { Decoded } from '@redwoodjs/api'
+import { AuthenticationError, ForbiddenError } from '@redwoodjs/graphql-server'
+
+import { db } from './db'
+
+/**
+ * The name of the cookie that dbAuth sets
+ *
+ * %port% will be replaced with the port the api server is running on.
+ * If you have multiple RW apps running on the same host, you'll need to
+ * make sure they all use unique cookie names
+ */
+export const cookieName = 'session_%port%'
+
 /**
- * Once you are ready to add authentication to your application
- * you'll build out requireAuth() with real functionality. For
- * now we just return `true` so that the calls in services
- * have something to check against, simulating a logged
- * in user that is allowed to access that service.
+ * The session object sent in as the first argument to getCurrentUser() will
+ * have a single key `id` containing the unique ID of the logged in user
+ * (whatever field you set as `authFields.id` in your auth function config).
+ * You'll need to update the call to `db` below if you use a different model
+ * name or unique field name, for example:
  *
- * See https://redwoodjs.com/docs/authentication for more info.
+ *   return await db.profile.findUnique({ where: { email: session.id } })
+ *                   ───┬───                       ──┬──
+ *      model accessor ─┘      unique id field name ─┘
+ *
+ * !! BEWARE !! Anything returned from this function will be available to the
+ * client--it becomes the content of `currentUser` on the web side (as well as
+ * `context.currentUser` on the api side). You should carefully add additional
+ * fields to the `select` object below once you've decided they are safe to be
+ * seen if someone were to open the Web Inspector in their browser.
  */
-export const isAuthenticated = () => {
-  return true
+export const getCurrentUser = async (session: Decoded) => {
+  if (!session || typeof session.id !== 'number') {
+    throw new Error('Invalid session')
+  }
+
+  return await db.user.findUnique({
+    where: { id: session.id },
+    select: { id: true, roles: true, email: true },
+  })
 }
 
-export const hasRole = ({ roles }) => {
-  return roles !== undefined
+/**
+ * The user is authenticated if there is a currentUser in the context
+ *
+ * @returns {boolean} - If the currentUser is authenticated
+ */
+export const isAuthenticated = (): boolean => {
+  return !!context.currentUser
+}
+
+/**
+ * When checking role membership, roles can be a single value, a list, or none.
+ * You can use Prisma enums too (if you're using them for roles), just import your enum type from `@prisma/client`
+ */
+type AllowedRoles = string | string[] | undefined
+
+/**
+ * Checks if the currentUser is authenticated (and assigned one of the given roles)
+ *
+ * @param roles: {@link AllowedRoles} - Checks if the currentUser is assigned one of these roles
+ *
+ * @returns {boolean} - Returns true if the currentUser is logged in and assigned one of the given roles,
+ * or when no roles are provided to check against. Otherwise returns false.
+ */
+export const hasRole = (roles: AllowedRoles): boolean => {
+  if (!isAuthenticated()) {
+    return false
+  }
+
+  const currentUserRoles = context.currentUser?.roles as string | string[]
+
+  if (typeof roles === 'string') {
+    if (typeof currentUserRoles === 'string') {
+      // roles to check is a string, currentUser.roles is a string
+      return currentUserRoles === roles
+    } else if (Array.isArray(currentUserRoles)) {
+      // roles to check is a string, currentUser.roles is an array
+      return currentUserRoles?.some((allowedRole) => roles === allowedRole)
+    }
+  }
+
+  if (Array.isArray(roles)) {
+    if (Array.isArray(currentUserRoles)) {
+      // roles to check is an array, currentUser.roles is an array
+      return currentUserRoles?.some((allowedRole) =>
+        roles.includes(allowedRole)
+      )
+    } else if (typeof currentUserRoles === 'string') {
+      // roles to check is an array, currentUser.roles is a string
+      return roles.some((allowedRole) => currentUserRoles === allowedRole)
+    }
+  }
+
+  // roles not found
+  return false
 }
 
-// This is used by the redwood directive
-// in ./api/src/directives/requireAuth
+/**
+ * Use requireAuth in your services to check that a user is logged in,
+ * whether or not they are assigned a role, and optionally raise an
+ * error if they're not.
+ *
+ * @param roles: {@link AllowedRoles} - When checking role membership, these roles grant access.
+ *
+ * @returns - If the currentUser is authenticated (and assigned one of the given roles)
+ *
+ * @throws {@link AuthenticationError} - If the currentUser is not authenticated
+ * @throws {@link ForbiddenError} If the currentUser is not allowed due to role permissions
+ *
+ * @see https://github.com/redwoodjs/redwood/tree/main/packages/auth for examples
+ */
+export const requireAuth = ({ roles }: { roles?: AllowedRoles } = {}) => {
+  if (!isAuthenticated()) {
+    throw new AuthenticationError("You don't have permission to do that.")
+  }
 
-// Roles are passed in by the requireAuth directive if you have auth setup
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-export const requireAuth = ({ roles }) => {
-  return isAuthenticated()
+  if (roles && !hasRole(roles)) {
+    throw new ForbiddenError("You don't have access to do that.")
+  }
 }
diff --git a/__fixtures__/fragment-test-project/api/src/lib/db.ts b/__fixtures__/fragment-test-project/api/src/lib/db.ts
index 6743f0c11d9a..5006d00aae49 100644
--- a/__fixtures__/fragment-test-project/api/src/lib/db.ts
+++ b/__fixtures__/fragment-test-project/api/src/lib/db.ts
@@ -11,11 +11,11 @@ import { logger } from './logger'
  * Instance of the Prisma Client
  */
 export const db = new PrismaClient({
-  log: emitLogLevels(['info', 'warn', 'error', 'query']),
+  log: emitLogLevels(['info', 'warn', 'error']),
 })
 
 handlePrismaLogging({
   db,
   logger,
-  logLevels: ['info', 'warn', 'error', 'query'],
+  logLevels: ['info', 'warn', 'error'],
 })
diff --git a/__fixtures__/fragment-test-project/api/src/lib/persistedOperations.json b/__fixtures__/fragment-test-project/api/src/lib/persistedOperations.json
deleted file mode 100644
index e5a8039db67f..000000000000
--- a/__fixtures__/fragment-test-project/api/src/lib/persistedOperations.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-   "GetGroceries": "9198a2438e6e5dbcf42362657baca24494a9f6cf83a6033983d2a978c1c1c703",
-   "GetProduce": "a8ee227d80bda6e1f785083aac537e8f1cd0340e0b52faaa27e18dbe4d629241"
-}
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.scenarios.ts b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.scenarios.ts
new file mode 100644
index 000000000000..37b062292193
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.scenarios.ts
@@ -0,0 +1,12 @@
+import type { Prisma, Contact } from '@prisma/client'
+
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.ContactCreateArgs>({
+  contact: {
+    one: { data: { name: 'String', email: 'String', message: 'String' } },
+    two: { data: { name: 'String', email: 'String', message: 'String' } },
+  },
+})
+
+export type StandardScenario = ScenarioData<Contact, 'contact'>
diff --git a/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.test.ts b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.test.ts
new file mode 100644
index 000000000000..8bb328e175e9
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.test.ts
@@ -0,0 +1,59 @@
+import type { Contact } from '@prisma/client'
+
+import {
+  contacts,
+  contact,
+  createContact,
+  updateContact,
+  deleteContact,
+} from './contacts'
+import type { StandardScenario } from './contacts.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('contacts', () => {
+  scenario('returns all contacts', async (scenario: StandardScenario) => {
+    const result = await contacts()
+
+    expect(result.length).toEqual(Object.keys(scenario.contact).length)
+  })
+
+  scenario('returns a single contact', async (scenario: StandardScenario) => {
+    const result = await contact({ id: scenario.contact.one.id })
+
+    expect(result).toEqual(scenario.contact.one)
+  })
+
+  scenario('creates a contact', async () => {
+    const result = await createContact({
+      input: { name: 'String', email: 'String', message: 'String' },
+    })
+
+    expect(result.name).toEqual('String')
+    expect(result.email).toEqual('String')
+    expect(result.message).toEqual('String')
+  })
+
+  scenario('updates a contact', async (scenario: StandardScenario) => {
+    const original = (await contact({ id: scenario.contact.one.id })) as Contact
+    const result = await updateContact({
+      id: original.id,
+      input: { name: 'String2' },
+    })
+
+    expect(result.name).toEqual('String2')
+  })
+
+  scenario('deletes a contact', async (scenario: StandardScenario) => {
+    const original = (await deleteContact({
+      id: scenario.contact.one.id,
+    })) as Contact
+    const result = await contact({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})
diff --git a/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.ts b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.ts
new file mode 100644
index 000000000000..453651e37b3c
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/contacts/contacts.ts
@@ -0,0 +1,37 @@
+import type { QueryResolvers, MutationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const contacts: QueryResolvers['contacts'] = () => {
+  return db.contact.findMany()
+}
+
+export const contact: QueryResolvers['contact'] = ({ id }) => {
+  return db.contact.findUnique({
+    where: { id },
+  })
+}
+
+export const createContact: MutationResolvers['createContact'] = ({
+  input,
+}) => {
+  return db.contact.create({
+    data: input,
+  })
+}
+
+export const updateContact: MutationResolvers['updateContact'] = ({
+  id,
+  input,
+}) => {
+  return db.contact.update({
+    data: input,
+    where: { id },
+  })
+}
+
+export const deleteContact: MutationResolvers['deleteContact'] = ({ id }) => {
+  return db.contact.delete({
+    where: { id },
+  })
+}
diff --git a/__fixtures__/fragment-test-project/api/src/services/fruit.ts b/__fixtures__/fragment-test-project/api/src/services/fruit.ts
deleted file mode 100644
index b94ff9c3796d..000000000000
--- a/__fixtures__/fragment-test-project/api/src/services/fruit.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { QueryResolvers } from 'types/graphql'
-
-import { db } from 'src/lib/db'
-import { logger } from 'src/lib/logger'
-
-const isFruit = { isSeedless: { not: null }, ripenessIndicators: { not: null } }
-
-export const fruits: QueryResolvers['fruits'] = async () => {
-  const result = await db.produce.findMany({
-    where: { ...isFruit },
-    include: { stall: true },
-    orderBy: { name: 'asc' },
-  })
-
-  logger.debug({ result }, 'frroooooots')
-
-  return result
-}
-
-export const fruitById: QueryResolvers['fruitById'] = async ({ id }) => {
-  const result = await db.produce.findUnique({
-    where: { id, ...isFruit },
-    include: { stall: true },
-  })
-
-  logger.debug({ result }, 'frroot')
-
-  return result
-}
diff --git a/__fixtures__/fragment-test-project/api/src/services/groceries.ts b/__fixtures__/fragment-test-project/api/src/services/groceries.ts
index 8a34942d27a3..09eb5de330ff 100644
--- a/__fixtures__/fragment-test-project/api/src/services/groceries.ts
+++ b/__fixtures__/fragment-test-project/api/src/services/groceries.ts
@@ -1,6 +1,8 @@
+import { Produce } from 'types/graphql'
+
 import { db } from 'src/lib/db'
 
-const isFruit = (grocery) => {
+const isFruit = (grocery: Produce) => {
   return grocery.isSeedless !== null && grocery.ripenessIndicators !== null
 }
 
@@ -11,7 +13,7 @@ export const groceries = async () => {
   })
 
   const avail = result.map((grocery) => {
-    if (isFruit) {
+    if (isFruit(grocery)) {
       return {
         ...grocery,
         __typename: 'Fruit',
diff --git a/__fixtures__/fragment-test-project/api/src/services/posts/posts.scenarios.ts b/__fixtures__/fragment-test-project/api/src/services/posts/posts.scenarios.ts
new file mode 100644
index 000000000000..9201d41f7c03
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/posts/posts.scenarios.ts
@@ -0,0 +1,38 @@
+import type { Prisma, Post } from '@prisma/client'
+
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.PostCreateArgs>({
+  post: {
+    one: {
+      data: {
+        title: 'String',
+        body: 'String',
+        author: {
+          create: {
+            email: 'String12',
+            hashedPassword: 'String',
+            fullName: 'String',
+            salt: 'String',
+          },
+        },
+      },
+    },
+    two: {
+      data: {
+        title: 'String',
+        body: 'String',
+        author: {
+          create: {
+            email: 'String68383',
+            hashedPassword: 'String',
+            fullName: 'String',
+            salt: 'String',
+          },
+        },
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<Post, 'post'>
diff --git a/__fixtures__/fragment-test-project/api/src/services/posts/posts.test.ts b/__fixtures__/fragment-test-project/api/src/services/posts/posts.test.ts
new file mode 100644
index 000000000000..fc316574f5ab
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/posts/posts.test.ts
@@ -0,0 +1,55 @@
+import type { Post } from '@prisma/client'
+
+import { posts, post, createPost, updatePost, deletePost } from './posts'
+import type { StandardScenario } from './posts.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('posts', () => {
+  scenario('returns all posts', async (scenario: StandardScenario) => {
+    const result = await posts()
+
+    expect(result.length).toEqual(Object.keys(scenario.post).length)
+  })
+
+  scenario('returns a single post', async (scenario: StandardScenario) => {
+    const result = await post({ id: scenario.post.one.id })
+
+    expect(result).toEqual(scenario.post.one)
+  })
+
+  scenario('creates a post', async (scenario: StandardScenario) => {
+    const result = await createPost({
+      input: {
+        title: 'String',
+        body: 'String',
+        authorId: scenario.post.two.authorId,
+      },
+    })
+
+    expect(result.title).toEqual('String')
+    expect(result.body).toEqual('String')
+    expect(result.authorId).toEqual(scenario.post.two.authorId)
+  })
+
+  scenario('updates a post', async (scenario: StandardScenario) => {
+    const original = (await post({ id: scenario.post.one.id })) as Post
+    const result = await updatePost({
+      id: original.id,
+      input: { title: 'String2' },
+    })
+
+    expect(result.title).toEqual('String2')
+  })
+
+  scenario('deletes a post', async (scenario: StandardScenario) => {
+    const original = (await deletePost({ id: scenario.post.one.id })) as Post
+    const result = await post({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})
diff --git a/__fixtures__/fragment-test-project/api/src/services/posts/posts.ts b/__fixtures__/fragment-test-project/api/src/services/posts/posts.ts
new file mode 100644
index 000000000000..eaeff31fb74b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/posts/posts.ts
@@ -0,0 +1,42 @@
+import type {
+  QueryResolvers,
+  MutationResolvers,
+  PostRelationResolvers,
+} from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const posts: QueryResolvers['posts'] = () => {
+  return db.post.findMany()
+}
+
+export const post: QueryResolvers['post'] = ({ id }) => {
+  return db.post.findUnique({
+    where: { id },
+  })
+}
+
+export const createPost: MutationResolvers['createPost'] = ({ input }) => {
+  return db.post.create({
+    data: input,
+  })
+}
+
+export const updatePost: MutationResolvers['updatePost'] = ({ id, input }) => {
+  return db.post.update({
+    data: input,
+    where: { id },
+  })
+}
+
+export const deletePost: MutationResolvers['deletePost'] = ({ id }) => {
+  return db.post.delete({
+    where: { id },
+  })
+}
+
+export const Post: PostRelationResolvers = {
+  author: (_obj, { root }) => {
+    return db.post.findUnique({ where: { id: root?.id } }).author()
+  },
+}
diff --git a/__fixtures__/fragment-test-project/api/src/services/produces/produces.scenarios.ts b/__fixtures__/fragment-test-project/api/src/services/produces/produces.scenarios.ts
new file mode 100644
index 000000000000..475e638a5d58
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/produces/produces.scenarios.ts
@@ -0,0 +1,27 @@
+import type { Prisma, Produce } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.ProduceCreateArgs>({
+  produce: {
+    one: {
+      data: {
+        name: 'String6430168',
+        quantity: 7893718,
+        price: 1113110,
+        region: 'String',
+        stall: { create: { name: 'String', stallNumber: 'String1437797' } },
+      },
+    },
+    two: {
+      data: {
+        name: 'String2325729',
+        quantity: 9170370,
+        price: 9020391,
+        region: 'String',
+        stall: { create: { name: 'String', stallNumber: 'String8553241' } },
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<Produce, 'produce'>
diff --git a/__fixtures__/fragment-test-project/api/src/services/produces/produces.test.ts b/__fixtures__/fragment-test-project/api/src/services/produces/produces.test.ts
new file mode 100644
index 000000000000..38e3457c1150
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/produces/produces.test.ts
@@ -0,0 +1,67 @@
+import type { Produce } from '@prisma/client'
+
+import {
+  produces,
+  produce,
+  createProduce,
+  updateProduce,
+  deleteProduce,
+} from './produces'
+import type { StandardScenario } from './produces.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('produces', () => {
+  scenario('returns all produces', async (scenario: StandardScenario) => {
+    const result = await produces()
+
+    expect(result.length).toEqual(Object.keys(scenario.produce).length)
+  })
+
+  scenario('returns a single produce', async (scenario: StandardScenario) => {
+    const result = await produce({ id: scenario.produce.one.id })
+
+    expect(result).toEqual(scenario.produce.one)
+  })
+
+  scenario('creates a produce', async (scenario: StandardScenario) => {
+    const result = await createProduce({
+      input: {
+        name: 'String9956690',
+        quantity: 4900208,
+        price: 6716153,
+        region: 'String',
+        stallId: scenario.produce.two.stallId,
+      },
+    })
+
+    expect(result.name).toEqual('String9956690')
+    expect(result.quantity).toEqual(4900208)
+    expect(result.price).toEqual(6716153)
+    expect(result.region).toEqual('String')
+    expect(result.stallId).toEqual(scenario.produce.two.stallId)
+  })
+
+  scenario('updates a produce', async (scenario: StandardScenario) => {
+    const original = (await produce({ id: scenario.produce.one.id })) as Produce
+    const result = await updateProduce({
+      id: original.id,
+      input: { name: 'String87087152' },
+    })
+
+    expect(result.name).toEqual('String87087152')
+  })
+
+  scenario('deletes a produce', async (scenario: StandardScenario) => {
+    const original = (await deleteProduce({
+      id: scenario.produce.one.id,
+    })) as Produce
+    const result = await produce({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})
diff --git a/__fixtures__/fragment-test-project/api/src/services/produces/produces.ts b/__fixtures__/fragment-test-project/api/src/services/produces/produces.ts
new file mode 100644
index 000000000000..5e99407a6d7b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/produces/produces.ts
@@ -0,0 +1,47 @@
+import type {
+  QueryResolvers,
+  MutationResolvers,
+  ProduceRelationResolvers,
+} from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const produces: QueryResolvers['produces'] = () => {
+  return db.produce.findMany()
+}
+
+export const produce: QueryResolvers['produce'] = ({ id }) => {
+  return db.produce.findUnique({
+    where: { id },
+  })
+}
+
+export const createProduce: MutationResolvers['createProduce'] = ({
+  input,
+}) => {
+  return db.produce.create({
+    data: input,
+  })
+}
+
+export const updateProduce: MutationResolvers['updateProduce'] = ({
+  id,
+  input,
+}) => {
+  return db.produce.update({
+    data: input,
+    where: { id },
+  })
+}
+
+export const deleteProduce: MutationResolvers['deleteProduce'] = ({ id }) => {
+  return db.produce.delete({
+    where: { id },
+  })
+}
+
+export const Produce: ProduceRelationResolvers = {
+  stall: (_obj, { root }) => {
+    return db.produce.findUnique({ where: { id: root?.id } }).stall()
+  },
+}
diff --git a/__fixtures__/fragment-test-project/api/src/services/stalls.ts b/__fixtures__/fragment-test-project/api/src/services/stalls.ts
deleted file mode 100644
index aa7d417fd10c..000000000000
--- a/__fixtures__/fragment-test-project/api/src/services/stalls.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { QueryResolvers } from 'types/graphql'
-
-import { db } from 'src/lib/db'
-
-export const stalls: QueryResolvers['stalls'] = async () => {
-  const result = await db.stall.findMany({
-    include: { produce: true },
-    orderBy: { name: 'asc' },
-  })
-
-  return result
-}
-
-export const stallById: QueryResolvers['stallById'] = async ({ id }) => {
-  const result = await db.stall.findUnique({
-    where: { id },
-    include: { produce: true },
-  })
-
-  return result
-}
diff --git a/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.scenarios.ts b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.scenarios.ts
new file mode 100644
index 000000000000..fd57beaade6e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.scenarios.ts
@@ -0,0 +1,11 @@
+import type { Prisma, Stall } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.StallCreateArgs>({
+  stall: {
+    one: { data: { name: 'String', stallNumber: 'String3227467' } },
+    two: { data: { name: 'String', stallNumber: 'String3142426' } },
+  },
+})
+
+export type StandardScenario = ScenarioData<Stall, 'stall'>
diff --git a/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.test.ts b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.test.ts
new file mode 100644
index 000000000000..e527a42691f6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.test.ts
@@ -0,0 +1,50 @@
+import type { Stall } from '@prisma/client'
+
+import { stalls, stall, createStall, updateStall, deleteStall } from './stalls'
+import type { StandardScenario } from './stalls.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('stalls', () => {
+  scenario('returns all stalls', async (scenario: StandardScenario) => {
+    const result = await stalls()
+
+    expect(result.length).toEqual(Object.keys(scenario.stall).length)
+  })
+
+  scenario('returns a single stall', async (scenario: StandardScenario) => {
+    const result = await stall({ id: scenario.stall.one.id })
+
+    expect(result).toEqual(scenario.stall.one)
+  })
+
+  scenario('creates a stall', async () => {
+    const result = await createStall({
+      input: { name: 'String', stallNumber: 'String7681055' },
+    })
+
+    expect(result.name).toEqual('String')
+    expect(result.stallNumber).toEqual('String7681055')
+  })
+
+  scenario('updates a stall', async (scenario: StandardScenario) => {
+    const original = (await stall({ id: scenario.stall.one.id })) as Stall
+    const result = await updateStall({
+      id: original.id,
+      input: { name: 'String2' },
+    })
+
+    expect(result.name).toEqual('String2')
+  })
+
+  scenario('deletes a stall', async (scenario: StandardScenario) => {
+    const original = (await deleteStall({ id: scenario.stall.one.id })) as Stall
+    const result = await stall({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})
diff --git a/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.ts b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.ts
new file mode 100644
index 000000000000..91c7ce00cda3
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/stalls/stalls.ts
@@ -0,0 +1,45 @@
+import type {
+  QueryResolvers,
+  MutationResolvers,
+  StallRelationResolvers,
+} from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const stalls: QueryResolvers['stalls'] = () => {
+  return db.stall.findMany()
+}
+
+export const stall: QueryResolvers['stall'] = ({ id }) => {
+  return db.stall.findUnique({
+    where: { id },
+  })
+}
+
+export const createStall: MutationResolvers['createStall'] = ({ input }) => {
+  return db.stall.create({
+    data: input,
+  })
+}
+
+export const updateStall: MutationResolvers['updateStall'] = ({
+  id,
+  input,
+}) => {
+  return db.stall.update({
+    data: input,
+    where: { id },
+  })
+}
+
+export const deleteStall: MutationResolvers['deleteStall'] = ({ id }) => {
+  return db.stall.delete({
+    where: { id },
+  })
+}
+
+export const Stall: StallRelationResolvers = {
+  produce: (_obj, { root }) => {
+    return db.stall.findUnique({ where: { id: root?.id } }).produce()
+  },
+}
diff --git a/__fixtures__/fragment-test-project/api/src/services/users/users.scenarios.ts b/__fixtures__/fragment-test-project/api/src/services/users/users.scenarios.ts
new file mode 100644
index 000000000000..fccdc7ae6d7e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/users/users.scenarios.ts
@@ -0,0 +1,26 @@
+import type { Prisma, User } from '@prisma/client'
+
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.UserCreateArgs>({
+  user: {
+    one: {
+      data: {
+        email: 'String8',
+        hashedPassword: 'String',
+        fullName: 'String',
+        salt: 'String',
+      },
+    },
+    two: {
+      data: {
+        email: 'String16',
+        hashedPassword: 'String',
+        fullName: 'String',
+        salt: 'String',
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<User, 'user'>
diff --git a/__fixtures__/fragment-test-project/api/src/services/users/users.test.ts b/__fixtures__/fragment-test-project/api/src/services/users/users.test.ts
new file mode 100644
index 000000000000..0e183cf8cc2d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/users/users.test.ts
@@ -0,0 +1,10 @@
+import { user } from './users'
+import type { StandardScenario } from './users.scenarios'
+
+describe('users', () => {
+  scenario('returns a single user', async (scenario: StandardScenario) => {
+    const result = await user({ id: scenario.user.one.id })
+
+    expect(result).toEqual(scenario.user.one)
+  })
+})
diff --git a/__fixtures__/fragment-test-project/api/src/services/users/users.ts b/__fixtures__/fragment-test-project/api/src/services/users/users.ts
new file mode 100644
index 000000000000..1160d12f8400
--- /dev/null
+++ b/__fixtures__/fragment-test-project/api/src/services/users/users.ts
@@ -0,0 +1,17 @@
+import type { QueryResolvers, UserRelationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export {}
+
+export const user: QueryResolvers['user'] = ({ id }) => {
+  return db.user.findUnique({
+    where: { id },
+  })
+}
+
+export const User: UserRelationResolvers = {
+  posts: (_obj, { root }) => {
+    return db.user.findUnique({ where: { id: root?.id } }).posts()
+  },
+}
diff --git a/__fixtures__/fragment-test-project/api/src/services/vegetables.ts b/__fixtures__/fragment-test-project/api/src/services/vegetables.ts
deleted file mode 100644
index 7caf39d47fea..000000000000
--- a/__fixtures__/fragment-test-project/api/src/services/vegetables.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { QueryResolvers } from 'types/graphql'
-
-import { db } from 'src/lib/db'
-
-const isVegetable = { vegetableFamily: { not: null }, isPickled: { not: null } }
-
-export const vegetables: QueryResolvers['vegetables'] = async () => {
-  return await db.produce.findMany({
-    where: { ...isVegetable },
-    include: { stall: true },
-    orderBy: { name: 'asc' },
-  })
-}
-
-export const vegetableById: QueryResolvers['vegetableById'] = async ({
-  id,
-}) => {
-  return await db.produce.findUnique({
-    where: { id, ...isVegetable },
-    include: { stall: true },
-  })
-}
diff --git a/__fixtures__/fragment-test-project/jest.config.js b/__fixtures__/fragment-test-project/jest.config.js
new file mode 100644
index 000000000000..c6b395cb762a
--- /dev/null
+++ b/__fixtures__/fragment-test-project/jest.config.js
@@ -0,0 +1,8 @@
+// This the Redwood root jest config
+// Each side, e.g. ./web/ and ./api/ has specific config that references this root
+// More info at https://redwoodjs.com/docs/project-configuration-dev-test-build
+
+module.exports = {
+  rootDir: '.',
+  projects: ['<rootDir>/{*,!(node_modules)/**/}/jest.config.js'],
+}
diff --git a/__fixtures__/fragment-test-project/package.json b/__fixtures__/fragment-test-project/package.json
new file mode 100644
index 000000000000..1ab4a33bedab
--- /dev/null
+++ b/__fixtures__/fragment-test-project/package.json
@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web"
+    ]
+  },
+  "devDependencies": {
+    "@redwoodjs/core": "6.0.7"
+  },
+  "eslintConfig": {
+    "extends": "@redwoodjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": "=20.x"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "yarn@4.0.2"
+}
diff --git a/__fixtures__/fragment-test-project/prettier.config.js b/__fixtures__/fragment-test-project/prettier.config.js
new file mode 100644
index 000000000000..e532314d54ac
--- /dev/null
+++ b/__fixtures__/fragment-test-project/prettier.config.js
@@ -0,0 +1,20 @@
+// https://prettier.io/docs/en/options.html
+/** @type {import('prettier').RequiredOptions} */
+module.exports = {
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'always',
+  overrides: [
+    {
+      files: 'Routes.*',
+      options: {
+        printWidth: 999,
+      },
+    },
+  ],
+  tailwindConfig: './web/config/tailwind.config.js',
+  plugins: [require('prettier-plugin-tailwindcss')],
+}
diff --git a/__fixtures__/fragment-test-project/redwood.toml b/__fixtures__/fragment-test-project/redwood.toml
index 32d7509275c0..e21a6085fa47 100644
--- a/__fixtures__/fragment-test-project/redwood.toml
+++ b/__fixtures__/fragment-test-project/redwood.toml
@@ -7,12 +7,18 @@
 
 [web]
   title = "Redwood App"
-  port = 8910
-  apiUrl = "/.redwood/functions" # you can customise graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
-  includeEnvironmentVariables = [] # any ENV vars that should be available to the web side, see https://redwoodjs.com/docs/environment-variables#web
-[graphql]
-  fragments = true
+  port = "${WEB_DEV_PORT:8910}"
+  apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
+  includeEnvironmentVariables = [
+    # Add any ENV vars that should be available to the web side to this array
+    # See https://redwoodjs.com/docs/environment-variables#web
+  ]
 [api]
-  port = 8911
+  port = "${API_DEV_PORT:8911}"
 [browser]
   open = true
+[notifications]
+  versionUpdates = ["latest"]
+
+[graphql]
+  fragments = true
diff --git a/__fixtures__/fragment-test-project/scripts/seed.ts b/__fixtures__/fragment-test-project/scripts/seed.ts
new file mode 100644
index 000000000000..899534721c78
--- /dev/null
+++ b/__fixtures__/fragment-test-project/scripts/seed.ts
@@ -0,0 +1,195 @@
+import type { Prisma } from '@prisma/client'
+import { db } from 'api/src/lib/db'
+
+export default async () => {
+  try {
+    const users = [
+      {
+        id: 1,
+        email: 'user.one@example.com',
+        hashedPassword: 'fake_hash',
+        fullName: 'User One',
+        salt: 'fake_salt',
+      },
+      {
+        id: 2,
+        email: 'user.two@example.com',
+        hashedPassword: 'fake_hash',
+        fullName: 'User Two',
+        salt: 'fake_salt',
+      },
+    ]
+
+    if ((await db.user.count()) === 0) {
+      await Promise.all(users.map((user) => db.user.create({ data: user })))
+    } else {
+      console.log('Users already seeded')
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  try {
+    const posts = [
+      {
+        title: 'Welcome to the blog!',
+        body: "I'm baby single- origin coffee kickstarter lo - fi paleo skateboard.Tumblr hashtag austin whatever DIY plaid knausgaard fanny pack messenger bag blog next level woke.Ethical bitters fixie freegan,helvetica pitchfork 90's tbh chillwave mustache godard subway tile ramps art party. Hammock sustainable twee yr bushwick disrupt unicorn, before they sold out direct trade chicharrones etsy polaroid hoodie. Gentrify offal hoodie fingerstache.",
+        authorId: 1,
+      },
+      {
+        title: 'A little more about me',
+        body: "Raclette shoreditch before they sold out lyft. Ethical bicycle rights meh prism twee. Tote bag ennui vice, slow-carb taiyaki crucifix whatever you probably haven't heard of them jianbing raw denim DIY hot chicken. Chillwave blog succulents freegan synth af ramps poutine wayfarers yr seitan roof party squid. Jianbing flexitarian gentrify hexagon portland single-origin coffee raclette gluten-free. Coloring book cloud bread street art kitsch lumbersexual af distillery ethical ugh thundercats roof party poke chillwave. 90's palo santo green juice subway tile, prism viral butcher selvage etsy pitchfork sriracha tumeric bushwick.",
+        authorId: 1,
+      },
+      {
+        title: 'What is the meaning of life?',
+        body: 'Meh waistcoat succulents umami asymmetrical, hoodie post-ironic paleo chillwave tote bag. Trust fund kitsch waistcoat vape, cray offal gochujang food truck cloud bread enamel pin forage. Roof party chambray ugh occupy fam stumptown. Dreamcatcher tousled snackwave, typewriter lyft unicorn pabst portland blue bottle locavore squid PBR&B tattooed.',
+        authorId: 2,
+      },
+    ]
+
+    if ((await db.post.count()) === 0) {
+      await Promise.all(
+        posts.map(async (post) => {
+          const newPost = await db.post.create({ data: post })
+
+          console.log(newPost)
+        })
+      )
+    } else {
+      console.log('Posts already seeded')
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  try {
+    const stalls = [
+      {
+        id: 'clr0zv6ow000012nvo6r09vog',
+        name: 'Salad Veggies',
+        stallNumber: '1',
+      },
+      {
+        id: 'clr0zvne2000112nvyhzf1ifk',
+        name: 'Pie Veggies',
+        stallNumber: '2',
+      },
+      {
+        id: 'clr0zvne3000212nv6boae9qw',
+        name: 'Root Veggies',
+        stallNumber: '3',
+      },
+    ]
+
+    if ((await db.stall.count()) === 0) {
+      await Promise.all(
+        stalls.map(async (stall) => {
+          const newStall = await db.stall.create({ data: stall })
+
+          console.log(newStall)
+        })
+      )
+    } else {
+      console.log('Stalls already seeded')
+    }
+
+    const produce = [
+      {
+        id: 'clr0zwyoq000312nvfsu1efcw',
+        name: 'Lettuce',
+        quantity: 10,
+        price: 2,
+        ripenessIndicators: null,
+        region: '',
+        isSeedless: false,
+        vegetableFamily: 'Asteraceae',
+        stallId: 'clr0zv6ow000012nvo6r09vog',
+      },
+      {
+        id: 'clr0zy32x000412nvsya5g8q0',
+        name: 'Strawberries',
+        quantity: 24,
+        price: 3,
+        ripenessIndicators: 'Vitamin C',
+        region: 'California',
+        isSeedless: false,
+        vegetableFamily: 'Soft',
+        stallId: 'clr0zvne2000112nvyhzf1ifk',
+      },
+    ]
+
+    if ((await db.produce.count()) === 0) {
+      await Promise.all(
+        produce.map(async (produce) => {
+          const newProduce = await db.produce.create({ data: produce })
+
+          console.log(newProduce)
+        })
+      )
+    } else {
+      console.log('Produce already seeded')
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  try {
+    //
+    // Manually seed via `yarn rw prisma db seed`
+    // Seeds automatically with `yarn rw prisma migrate dev` and `yarn rw prisma migrate reset`
+    //
+    // Update "const data = []" to match your data model and seeding needs
+    //
+    const data: Prisma.UserExampleCreateArgs['data'][] = [
+      // To try this example data with the UserExample model in schema.prisma,
+      // uncomment the lines below and run 'yarn rw prisma migrate dev'
+      //
+      // { name: 'alice', email: 'alice@example.com' },
+      // { name: 'mark', email: 'mark@example.com' },
+      // { name: 'jackie', email: 'jackie@example.com' },
+      // { name: 'bob', email: 'bob@example.com' },
+    ]
+    console.log(
+      "\nUsing the default './scripts/seed.{js,ts}' template\nEdit the file to add seed data\n"
+    )
+
+    // Note: if using PostgreSQL, using `createMany` to insert multiple records is much faster
+    // @see: https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#createmany
+    await Promise.all(
+      //
+      // Change to match your data model and seeding needs
+      //
+      data.map(async (data: Prisma.UserExampleCreateArgs['data']) => {
+        const record = await db.userExample.create({ data })
+        console.log(record)
+      })
+    )
+
+    // If using dbAuth and seeding users, you'll need to add a `hashedPassword`
+    // and associated `salt` to their record. Here's how to create them using
+    // the same algorithm that dbAuth uses internally:
+    //
+    //   import { hashPassword } from '@redwoodjs/auth-dbauth-api'
+    //
+    //   const users = [
+    //     { name: 'john', email: 'john@example.com', password: 'secret1' },
+    //     { name: 'jane', email: 'jane@example.com', password: 'secret2' }
+    //   ]
+    //
+    //   for (const user of users) {
+    //     const [hashedPassword, salt] = hashPassword(user.password)
+    //     await db.user.create({
+    //       data: {
+    //         name: user.name,
+    //         email: user.email,
+    //         hashedPassword,
+    //         salt
+    //       }
+    //     })
+    //   }
+  } catch (error) {
+    console.warn('Please define your seed data.')
+    console.error(error)
+  }
+}
diff --git a/__fixtures__/fragment-test-project/scripts/tsconfig.json b/__fixtures__/fragment-test-project/scripts/tsconfig.json
new file mode 100644
index 000000000000..babc7c436be6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/scripts/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "$api/*": [
+        "../api/*"
+      ],
+      "api/*": [
+        "../api/*"
+      ],
+      "$web/*": [
+        "../web/*"
+      ],
+      "web/*": [
+        "../web/*"
+      ],
+      "$web/src/*": [
+        "../web/src/*",
+        "../.redwood/types/mirror/web/src/*"
+      ],
+      "web/src/*": [
+        "../web/src/*",
+        "../.redwood/types/mirror/web/src/*"
+      ],
+      "types/*": ["../types/*", "../web/types/*", "../api/types/*"]
+    },
+    "typeRoots": ["../node_modules/@types"],
+    "jsx": "preserve"
+  },
+  "include": [
+    ".",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types"
+  ]
+}
diff --git a/__fixtures__/fragment-test-project/web/config/postcss.config.js b/__fixtures__/fragment-test-project/web/config/postcss.config.js
new file mode 100644
index 000000000000..ca420cad420e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/config/postcss.config.js
@@ -0,0 +1,8 @@
+const path = require('path')
+
+module.exports = {
+  plugins: [
+    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
+    require('autoprefixer'),
+  ],
+}
diff --git a/__fixtures__/fragment-test-project/web/config/tailwind.config.js b/__fixtures__/fragment-test-project/web/config/tailwind.config.js
new file mode 100644
index 000000000000..baf368f417d2
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/config/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/__fixtures__/fragment-test-project/web/package.json b/__fixtures__/fragment-test-project/web/package.json
index 1bffdb2f6902..089dd533bc0c 100644
--- a/__fixtures__/fragment-test-project/web/package.json
+++ b/__fixtures__/fragment-test-project/web/package.json
@@ -11,14 +11,22 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/forms": "6.2.0",
-    "@redwoodjs/router": "6.2.0",
-    "@redwoodjs/web": "6.2.0",
-    "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@redwoodjs/auth-dbauth-web": "6.0.7",
+    "@redwoodjs/forms": "6.0.7",
+    "@redwoodjs/router": "6.0.7",
+    "@redwoodjs/web": "6.0.7",
+    "humanize-string": "2.1.0",
+    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react-dom": "0.0.0-experimental-e5205658f-20230913"
   },
   "devDependencies": {
-    "@redwoodjs/vite": "6.2.0"
+    "@redwoodjs/vite": "6.0.7",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^7.3.4",
+    "prettier-plugin-tailwindcss": "0.4.1",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/__fixtures__/fragment-test-project/web/public/README.md b/__fixtures__/fragment-test-project/web/public/README.md
new file mode 100644
index 000000000000..618395f02033
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/public/README.md
@@ -0,0 +1,35 @@
+# Static Assets
+Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`.
+>Note: files will *not* hot reload while the development server is running. You'll need to manually stop/start to access file changes.
+
+### Example Use
+A file like `favicon.png` will be copied to `/dist/favicon.png`. A folder containing a file such as `static-files/my-logo.jpg` will be copied to `/dist/static-files/my-logo.jpg`. These can be referenced in your code directly without any special handling, e.g.
+```
+<link rel="icon" type="image/png" href="/favicon.png" />
+```
+and
+```
+<img src="/static-files/my-logo.jpg"> alt="Logo" />
+```
+
+
+## Best Practices
+Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.
+
+In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash.
+
+### Example Asset Import with Vite
+Instead of handling our logo image as a static file per the example above, we can do the following:
+```
+import React from "react"
+import logo from "./my-logo.jpg"
+
+
+function Header() {
+  return <img src={logo} alt="Logo" />
+}
+
+export default Header
+```
+
+See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)
diff --git a/__fixtures__/fragment-test-project/web/public/favicon.png b/__fixtures__/fragment-test-project/web/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47414294173cb0795dcafb8813599fc382282556
GIT binary patch
literal 1741
zcmV;;1~U1HP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000J*Nkl<ZSP7k1
z32anF82;wHU3RgYRZ=6^Zi}@dUIYV@7}(;SAc+S?M6{q$qXsVwYNef}3dAUh5(%IY
zXwVo$6OVuq6Iwyg#He_Ht<dfwSdgQorMTPnz44pZ?(w?2J)C6w=D+`$|C$Q?j}_c0
zJvFr(?}xx*ipKzZrK*T*6+)=NsuP0|a18IRo)6n9hr)Q5tiXN<Q6=rNEmBI`Me73?
zm;>u3dvWaK1Jt7p7xtk~lm38V(vb%~9Ec<RJFo>N4itP(!;||l>?RBBL}g^A8<`Fn
z=_ofw?w2~Qt#0f9Ac3O;;Nt1}TFWmPb1<jLel~XZh8p9Svt*sYpQkSo2-OZ4Px18S
zc<T}$rsn3L<}?#E^U8h$p}<^pc1Di09j%k%y;4*(z7AneW}^L=SrxGY-@;H=Lx$HP
zlz#)7JN|^|j36}rwrn!#H=tuavEVfdyuqKBT1V38d;~{aaFMb;nmps7b>YZ9hDBXZ
zTK55jh;jRpRArCUs~@6m!BMLSuZE&5;HTqrDc^;f)?K|FaV6o1RTFbt+uA;);7z?5
z9axBZCgX!V;dhWl*HZC&#7E&V7oz;oZ;*lOh^wZ2aYlLI<1rXkc0&HH!|5!S0|*s-
zM*~yi#Ef4dES_G+_-z+`S<%x__Ulk8{Z?I!;wv8DmN?3t1H$+<PRROo3>fJ*q^w!}
z8`oOx{i(WL4oLgKN0~^gQyJ3t#+tnIhR=h}6@BVu1&_1g7*O6j$-5z)KLsPi3dqCH
zq+n<+)2a$Afvr|B97(#s5f6-oU6qYHP<2rWEKfC)aEc=?j9nPwEyIiT4XC<!Hf&=(
zW%ClM1$1j(lomE3lkuu5d=9~ppP=-DA6asnQ981L*+0wSF|c`*8hv|v<$(hsbJHRy
zV=IjZNb6au0Cv|yn3;PD6_F1R%-aZ9MI>I%BScNpoU1Cro6M@BSt>YU4@z^JQPbj-
zbMl0tf(CkBNTVH0run?8E#6lyouay;Bf8|_ud%WyA2Dkqc}nAEGkyiO!|#6>OX~jC
z_3u?iQ>Xm%XNGGb_3~zzqyj(lHYRC##{sV_zNQl$KP40jQHRR#WeJ!akxfaL;HU(y
z@6A7KA;pjflPx?{&_wwQ<6?f(Uld(h*XSf+Ct`QR3EDfau;y#nNiKfJ`Ny24=O+_9
z{chAh!5R0T(`<1ayxDvCtBZ?9Rn)QBoddzqchGPN4C8rB2tQ(*#m6zlySN7XwxM)X
zNo%g}Q*?B_&%_K;!PvNxj9-D>BYn6zcIb@VGE=-?gP+zjpQ4x$*@_cm*TL-MtWeV+
z%v$Vh+2e#jDJ4Yc3NPgE9Uhr~V;6)j#bgMC+5!L2yYdX5ef->+k9d_?db{`}fWW+F
zU&GKd9pW?cv0e8pA%20do<zl8yC5eH(Y7?j34wk}<>i=OgaTV=d<XGK<C;si=4iC`
zY<uhQ;PeHvVTg?y?Ow(jiLyCi&&e?~zT0J7Gb(iz%kvwA3agPDOC-PJfTkaho|!?W
zIeMRQDNJe?YR}%<>LOHx7cgAQlYDkLWaAUksGbO`Z7+>qo}~5K=?ZI!b@vaF5}r7-
zyP2aiwSn}KbwGhrQ0A?W4L_Jwg?C#vAElLzpK~}}&ny0d@_GVhUqVEfXX9}XI8%B;
z;BYTG$dM}6WS8urD4fqn$733@mNss6jB7yHY*76e*L=X6apM|Dgg^tZhpge9{Ojy9
z{Sl&x=vUbHU+7KFQEas^U*jQ8^rj_XAzI=0y_<l!aXTRES?i)Ym4Oa%BCrZf+!dT&
zmJb<O>Nmx3ChT&K?_-b!N10g5+C9TqMGZ@!a>mh#`}nJM>Cu2v@32F*rQ(x05Xb64
zV-ML!u$4W31M7A@mi~3fnSOQSZ->>TC+02Mt+<Hub>0csMl0*2TCklB$VOH11pW{4
zD1)V+^h4n@OYlO&;Z!-dk{(LVtA%;(o#!>jYgG>s%eL0iXx~jJsrfL3rwo;cc52kP
zRnvwZId>`-FV`PUvUKk<zHr;i8;_?lTDE=VAdG9#d?>4gU&nzX&+gTEm1bNsCdaXc
zvaOny-3X43Fs?Jn;>*U?jaR1`9KIVP?p(?ulraQZc;T0UKos^SChGJoJYVu1%?E0v
zDGNOfZKPrPKtyFYEU~bZZ~rB{4X2ko>_VJlJw3rw-!>TIT6R!3;POq5yNZdnfu$Ao
j!CVlN4fQVi0D=DiS&&%ubg+{I00000NkvXXu0mjf8bDG2

literal 0
HcmV?d00001

diff --git a/__fixtures__/fragment-test-project/web/public/robots.txt b/__fixtures__/fragment-test-project/web/public/robots.txt
new file mode 100644
index 000000000000..eb0536286f30
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/__fixtures__/fragment-test-project/web/src/App.tsx b/__fixtures__/fragment-test-project/web/src/App.tsx
index f60aa1dfc22a..65419d60c7d6 100644
--- a/__fixtures__/fragment-test-project/web/src/App.tsx
+++ b/__fixtures__/fragment-test-project/web/src/App.tsx
@@ -1,22 +1,22 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import introspection from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
+import { AuthProvider, useAuth } from './auth'
+
+import './scaffold.css'
+import './index.css'
+
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider
-        graphQLClientConfig={{
-          cacheConfig: {
-            possibleTypes: introspection.possibleTypes,
-          },
-        }}
-      >
-        <Routes />
-      </RedwoodApolloProvider>
+      <AuthProvider>
+        <RedwoodApolloProvider useAuth={useAuth}>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>
 )
diff --git a/__fixtures__/fragment-test-project/web/src/Redwood.stories.mdx b/__fixtures__/fragment-test-project/web/src/Redwood.stories.mdx
new file mode 100644
index 000000000000..4481bff2fdc9
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/Redwood.stories.mdx
@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Redwood" />
+
+<p align="center">
+  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="200" />
+  <h1 align="center">Redwood</h1>
+</p>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
+250 amazing contributors (see end of file for a full list)._
+
+**Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/__fixtures__/fragment-test-project/web/src/Routes.tsx b/__fixtures__/fragment-test-project/web/src/Routes.tsx
index 71fc2e0f7098..a8b80e306513 100644
--- a/__fixtures__/fragment-test-project/web/src/Routes.tsx
+++ b/__fixtures__/fragment-test-project/web/src/Routes.tsx
@@ -7,13 +7,46 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Private, Set } from '@redwoodjs/router'
+
+import BlogLayout from 'src/layouts/BlogLayout'
+import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
+import HomePage from 'src/pages/HomePage'
+
+import { useAuth } from './auth'
 
 const Routes = () => {
   return (
-    <Router>
-      <Route path="/" page={GroceriesPage} name="home" />
-      <Route notfound page={NotFoundPage} />
+    <Router useAuth={useAuth}>
+      <Route path="/groceries" page={GroceriesPage} name="groceries" />
+      <Route path="/double" page={DoublePage} name="double" prerender />
+      <Route path="/login" page={LoginPage} name="login" />
+      <Route path="/signup" page={SignupPage} name="signup" />
+      <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
+      <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
+      <Set wrap={ScaffoldLayout} title="Contacts" titleTo="contacts" buttonLabel="New Contact" buttonTo="newContact">
+        <Route path="/contacts/new" page={ContactNewContactPage} name="newContact" prerender />
+        <Route path="/contacts/{id:Int}/edit" page={ContactEditContactPage} name="editContact" />
+        <Route path="/contacts/{id:Int}" page={ContactContactPage} name="contact" />
+        <Route path="/contacts" page={ContactContactsPage} name="contacts" />
+      </Set>
+      <Set wrap={ScaffoldLayout} title="Posts" titleTo="posts" buttonLabel="New Post" buttonTo="newPost">
+        <Route path="/posts/new" page={PostNewPostPage} name="newPost" />
+        <Route path="/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
+        <Route path="/posts/{id:Int}" page={PostPostPage} name="post" />
+        <Route path="/posts" page={PostPostsPage} name="posts" />
+      </Set>
+      <Set wrap={BlogLayout}>
+        <Route path="/waterfall/{id:Int}" page={WaterfallPage} prerender name="waterfall" />
+        <Private unauthenticated="login">
+          <Route path="/profile" page={ProfilePage} name="profile" />
+        </Private>
+        <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" prerender />
+        <Route path="/contact" page={ContactUsPage} name="contactUs" />
+        <Route path="/about" page={AboutPage} name="about" prerender />
+        <Route path="/" page={HomePage} name="home" prerender />
+        <Route notfound page={NotFoundPage} prerender />
+      </Set>
     </Router>
   )
 }
diff --git a/__fixtures__/fragment-test-project/web/src/auth.ts b/__fixtures__/fragment-test-project/web/src/auth.ts
new file mode 100644
index 000000000000..143e75bd61a2
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/auth.ts
@@ -0,0 +1,5 @@
+import { createDbAuthClient, createAuth } from '@redwoodjs/auth-dbauth-web'
+
+const dbAuthClient = createDbAuthClient()
+
+export const { AuthProvider, useAuth } = createAuth(dbAuthClient)
diff --git a/__fixtures__/fragment-test-project/web/src/components/Author/Author.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/Author/Author.stories.tsx
new file mode 100644
index 000000000000..662b48ec9883
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Author/Author.stories.tsx
@@ -0,0 +1,35 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Author from './Author'
+
+const meta: Meta<typeof Author> = {
+  component: Author,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Author>
+
+const author = {
+  email: 'story.user@email.com',
+  fullName: 'Story User',
+}
+
+export const Primary: Story = {
+  render: () => {
+    return <Author author={author} />
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Author/Author.test.tsx b/__fixtures__/fragment-test-project/web/src/components/Author/Author.test.tsx
new file mode 100644
index 000000000000..9dfa8c73830f
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Author/Author.test.tsx
@@ -0,0 +1,19 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Author from './Author'
+
+const author = {
+  email: 'test.user@email.com',
+  fullName: 'Test User',
+}
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Author', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Author author={author} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/Author/Author.tsx b/__fixtures__/fragment-test-project/web/src/components/Author/Author.tsx
new file mode 100644
index 000000000000..f59f8b98f106
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Author/Author.tsx
@@ -0,0 +1,16 @@
+interface Props {
+  author: {
+    email: string
+    fullName: string
+  }
+}
+
+const Author = ({ author }: Props) => {
+  return (
+    <span>
+      {author.fullName} ({author.email})
+    </span>
+  )
+}
+
+export default Author
diff --git a/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.mock.ts b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.mock.ts
new file mode 100644
index 000000000000..4473d93d09de
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.mock.ts
@@ -0,0 +1,8 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  author: {
+    id: 42,
+    email: 'fortytwo@42.com',
+    fullName: 'Forty Two',
+  },
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
new file mode 100644
index 000000000000..fd0a2b73376b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './AuthorCell'
+import { standard } from './AuthorCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/AuthorCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure: StoryObj<typeof Failure> = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.test.tsx b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.test.tsx
new file mode 100644
index 000000000000..ade2ee4f44c7
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Empty, Failure, Success } from './AuthorCell'
+import { standard } from './AuthorCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('AuthorCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success author={standard().author} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.tsx b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.tsx
new file mode 100644
index 000000000000..f4633be36fb3
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/AuthorCell/AuthorCell.tsx
@@ -0,0 +1,39 @@
+import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Author from 'src/components/Author'
+
+export const QUERY: TypedDocumentNode<
+  FindAuthorQuery,
+  FindAuthorQueryVariables
+> = gql`
+  query FindAuthorQuery($id: Int!) {
+    author: user(id: $id) {
+      email
+      fullName
+    }
+  }
+`
+
+export const Loading = () => <span>Loading...</span>
+
+export const Empty = () => <span>Empty</span>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindAuthorQueryVariables>) => (
+  <span style={{ color: 'red' }}>Error: {error?.message}</span>
+)
+
+export const Success = ({
+  author,
+}: CellSuccessProps<FindAuthorQuery, FindAuthorQueryVariables>) => (
+  <span className="author-cell">
+    <Author author={author} />
+  </span>
+)
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.stories.tsx
new file mode 100644
index 000000000000..c1d94a471350
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.stories.tsx
@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BlogPost from './BlogPost'
+
+const meta: Meta<typeof BlogPost> = {
+  component: BlogPost,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof BlogPost>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.test.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.test.tsx
new file mode 100644
index 000000000000..df026f691ddd
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import BlogPost from './BlogPost'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('BlogPost', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<BlogPost />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.tsx
new file mode 100644
index 000000000000..380053bc4899
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPost/BlogPost.tsx
@@ -0,0 +1,41 @@
+import { FindBlogPostQuery } from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+
+import Author from 'src/components/Author'
+
+interface Props extends FindBlogPostQuery {}
+
+const BlogPost = ({ blogPost }: Props) => {
+  return (
+    <article>
+      {blogPost && (
+        <>
+          <header className="mt-4">
+            <p className="text-sm">
+              {new Intl.DateTimeFormat('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              }).format(new Date(blogPost.createdAt))}{' '}
+              - By: <Author author={blogPost.author} />
+            </p>
+            <h2 className="mt-2 text-xl font-semibold">
+              <Link
+                className="hover:text-blue-600"
+                to={routes.blogPost({ id: blogPost.id })}
+              >
+                {blogPost.title}
+              </Link>
+            </h2>
+          </header>
+          <div className="mb-4 mt-2 font-light text-gray-900">
+            {blogPost.body}
+          </div>
+        </>
+      )}
+    </article>
+  )
+}
+
+export default BlogPost
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.mock.ts b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.mock.ts
new file mode 100644
index 000000000000..a42723a44fa3
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.mock.ts
@@ -0,0 +1,15 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  blogPost: {
+    id: 42,
+    title: 'Mocked title',
+    body: 'Mocked body',
+    createdAt: '2022-01-17T13:57:51.607Z',
+    authorId: 5,
+
+    author: {
+      email: 'five@5.com',
+      fullName: 'Five Lastname',
+    },
+  },
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
new file mode 100644
index 000000000000..361d13a91123
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './BlogPostCell'
+import { standard } from './BlogPostCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/BlogPostCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure: StoryObj<typeof Failure> = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.test.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.test.tsx
new file mode 100644
index 000000000000..0affa7cb9239
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Empty, Failure, Success } from './BlogPostCell'
+import { standard } from './BlogPostCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('BlogPostCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success blogPost={standard().blogPost} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.tsx
new file mode 100644
index 000000000000..a763bbbce76c
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostCell/BlogPostCell.tsx
@@ -0,0 +1,46 @@
+import type {
+  FindBlogPostQuery,
+  FindBlogPostQueryVariables,
+} from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import BlogPost from 'src/components/BlogPost'
+
+export const QUERY: TypedDocumentNode<
+  FindBlogPostQuery,
+  FindBlogPostQueryVariables
+> = gql`
+  query FindBlogPostQuery($id: Int!) {
+    blogPost: post(id: $id) {
+      id
+      title
+      body
+      author {
+        email
+        fullName
+      }
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindBlogPostQueryVariables>) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({
+  blogPost,
+}: CellSuccessProps<FindBlogPostQuery, FindBlogPostQueryVariables>) => (
+  <BlogPost blogPost={blogPost} />
+)
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.mock.ts b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.mock.ts
new file mode 100644
index 000000000000..d75f304b927b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.mock.ts
@@ -0,0 +1,41 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  blogPosts: [
+    {
+      id: 42,
+      title: 'Mocked title',
+      body: 'Mocked body',
+      createdAt: '2022-01-17T13:57:51.607Z',
+      authorId: 5,
+
+      author: {
+        email: 'five@5.com',
+        fullName: 'Five Lastname',
+      },
+    },
+    {
+      id: 43,
+      title: 'Mocked title',
+      body: 'Mocked body',
+      createdAt: '2022-01-17T13:57:51.607Z',
+      authorId: 5,
+
+      author: {
+        email: 'five@5.com',
+        fullName: 'Five Lastname',
+      },
+    },
+    {
+      id: 44,
+      title: 'Mocked title',
+      body: 'Mocked body',
+      createdAt: '2022-01-17T13:57:51.607Z',
+      authorId: 5,
+
+      author: {
+        email: 'five@5.com',
+        fullName: 'Five Lastname',
+      },
+    },
+  ],
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
new file mode 100644
index 000000000000..bbd0cb8b0f19
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './BlogPostsCell'
+import { standard } from './BlogPostsCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/BlogPostsCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure: StoryObj<typeof Failure> = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx
new file mode 100644
index 000000000000..223be46186c9
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Empty, Failure, Success } from './BlogPostsCell'
+import { standard } from './BlogPostsCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('BlogPostsCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success blogPosts={standard().blogPosts} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx
new file mode 100644
index 000000000000..0a9d4931792e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx
@@ -0,0 +1,43 @@
+import type { BlogPostsQuery, BlogPostsQueryVariables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import BlogPost from 'src/components/BlogPost'
+
+export const QUERY: TypedDocumentNode<
+  BlogPostsQuery,
+  BlogPostsQueryVariables
+> = gql`
+  query BlogPostsQuery {
+    blogPosts: posts {
+      id
+      title
+      body
+      author {
+        email
+        fullName
+      }
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ blogPosts }: CellSuccessProps<BlogPostsQuery>) => (
+  <div className="divide-grey-700 divide-y">
+    {blogPosts.map((post) => (
+      <BlogPost key={post.id} blogPost={post} />
+    ))}
+  </div>
+)
diff --git a/__fixtures__/fragment-test-project/web/src/components/Card/Card.tsx b/__fixtures__/fragment-test-project/web/src/components/Card.tsx
similarity index 100%
rename from __fixtures__/fragment-test-project/web/src/components/Card/Card.tsx
rename to __fixtures__/fragment-test-project/web/src/components/Card.tsx
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/Contact/Contact.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/Contact/Contact.tsx
new file mode 100644
index 000000000000..3864b6d57ae7
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/Contact/Contact.tsx
@@ -0,0 +1,98 @@
+import type {
+  DeleteContactMutation,
+  DeleteContactMutationVariables,
+  FindContactById,
+} from 'types/graphql'
+
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { timeTag } from 'src/lib/formatters'
+
+const DELETE_CONTACT_MUTATION: TypedDocumentNode<
+  DeleteContactMutation,
+  DeleteContactMutationVariables
+> = gql`
+  mutation DeleteContactMutation($id: Int!) {
+    deleteContact(id: $id) {
+      id
+    }
+  }
+`
+
+interface Props {
+  contact: NonNullable<FindContactById['contact']>
+}
+
+const Contact = ({ contact }: Props) => {
+  const [deleteContact] = useMutation(DELETE_CONTACT_MUTATION, {
+    onCompleted: () => {
+      toast.success('Contact deleted')
+      navigate(routes.contacts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onDeleteClick = (id: DeleteContactMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete contact ' + id + '?')) {
+      deleteContact({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            Contact {contact.id} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{contact.id}</td>
+            </tr>
+            <tr>
+              <th>Name</th>
+              <td>{contact.name}</td>
+            </tr>
+            <tr>
+              <th>Email</th>
+              <td>{contact.email}</td>
+            </tr>
+            <tr>
+              <th>Message</th>
+              <td>{contact.message}</td>
+            </tr>
+            <tr>
+              <th>Created at</th>
+              <td>{timeTag(contact.createdAt)}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.editContact({ id: contact.id })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(contact.id)}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default Contact
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/ContactCell/ContactCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactCell/ContactCell.tsx
new file mode 100644
index 000000000000..309a5423c034
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactCell/ContactCell.tsx
@@ -0,0 +1,40 @@
+import type { FindContactById, FindContactByIdVariables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Contact from 'src/components/Contact/Contact'
+
+export const QUERY: TypedDocumentNode<
+  FindContactById,
+  FindContactByIdVariables
+> = gql`
+  query FindContactById($id: Int!) {
+    contact: contact(id: $id) {
+      id
+      name
+      email
+      message
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Contact not found</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindContactByIdVariables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  contact,
+}: CellSuccessProps<FindContactById, FindContactByIdVariables>) => {
+  return <Contact contact={contact} />
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/ContactForm/ContactForm.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactForm/ContactForm.tsx
new file mode 100644
index 000000000000..f56f7f4a4219
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactForm/ContactForm.tsx
@@ -0,0 +1,101 @@
+import type { EditContactById, UpdateContactInput } from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormContact = NonNullable<EditContactById['contact']>
+
+interface ContactFormProps {
+  contact?: EditContactById['contact']
+  onSave: (data: UpdateContactInput, id?: FormContact['id']) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const ContactForm = (props: ContactFormProps) => {
+  const onSubmit = (data: FormContact) => {
+    props.onSave(data, props?.contact?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormContact> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="name"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Name
+        </Label>
+
+        <TextField
+          name="name"
+          defaultValue={props.contact?.name}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="name" className="rw-field-error" />
+
+        <Label
+          name="email"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Email
+        </Label>
+
+        <TextField
+          name="email"
+          defaultValue={props.contact?.email}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="email" className="rw-field-error" />
+
+        <Label
+          name="message"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Message
+        </Label>
+
+        <TextField
+          name="message"
+          defaultValue={props.contact?.message}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="message" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default ContactForm
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/Contacts/Contacts.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/Contacts/Contacts.tsx
new file mode 100644
index 000000000000..c0830231111e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/Contacts/Contacts.tsx
@@ -0,0 +1,102 @@
+import type {
+  DeleteContactMutation,
+  DeleteContactMutationVariables,
+  FindContacts,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { QUERY } from 'src/components/Contact/ContactsCell'
+import { timeTag, truncate } from 'src/lib/formatters'
+
+const DELETE_CONTACT_MUTATION: TypedDocumentNode<
+  DeleteContactMutation,
+  DeleteContactMutationVariables
+> = gql`
+  mutation DeleteContactMutation($id: Int!) {
+    deleteContact(id: $id) {
+      id
+    }
+  }
+`
+
+const ContactsList = ({ contacts }: FindContacts) => {
+  const [deleteContact] = useMutation(DELETE_CONTACT_MUTATION, {
+    onCompleted: () => {
+      toast.success('Contact deleted')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+    // This refetches the query on the list page. Read more about other ways to
+    // update the cache over here:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
+  })
+
+  const onDeleteClick = (id: DeleteContactMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete contact ' + id + '?')) {
+      deleteContact({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Message</th>
+            <th>Created at</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {contacts.map((contact) => (
+            <tr key={contact.id}>
+              <td>{truncate(contact.id)}</td>
+              <td>{truncate(contact.name)}</td>
+              <td>{truncate(contact.email)}</td>
+              <td>{truncate(contact.message)}</td>
+              <td>{timeTag(contact.createdAt)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.contact({ id: contact.id })}
+                    title={'Show contact ' + contact.id + ' detail'}
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editContact({ id: contact.id })}
+                    title={'Edit contact ' + contact.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete contact ' + contact.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(contact.id)}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default ContactsList
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx
new file mode 100644
index 000000000000..bf6c2edd0d7d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx
@@ -0,0 +1,48 @@
+import type { FindContacts, FindContactsVariables } from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Contacts from 'src/components/Contact/Contacts'
+
+export const QUERY: TypedDocumentNode<
+  FindContacts,
+  FindContactsVariables
+> = gql`
+  query FindContacts {
+    contacts {
+      id
+      name
+      email
+      message
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      {'No contacts yet. '}
+      <Link to={routes.newContact()} className="rw-link">
+        {'Create one?'}
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<FindContacts>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  contacts,
+}: CellSuccessProps<FindContacts, FindContactsVariables>) => {
+  return <Contacts contacts={contacts} />
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx
new file mode 100644
index 000000000000..f51c92b720a3
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx
@@ -0,0 +1,89 @@
+import type {
+  EditContactById,
+  UpdateContactInput,
+  UpdateContactMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import ContactForm from 'src/components/Contact/ContactForm'
+
+export const QUERY: TypedDocumentNode<EditContactById> = gql`
+  query EditContactById($id: Int!) {
+    contact: contact(id: $id) {
+      id
+      name
+      email
+      message
+      createdAt
+    }
+  }
+`
+
+const UPDATE_CONTACT_MUTATION: TypedDocumentNode<
+  EditContactById,
+  UpdateContactMutationVariables
+> = gql`
+  mutation UpdateContactMutation($id: Int!, $input: UpdateContactInput!) {
+    updateContact(id: $id, input: $input) {
+      id
+      name
+      email
+      message
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ contact }: CellSuccessProps<EditContactById>) => {
+  const [updateContact, { loading, error }] = useMutation(
+    UPDATE_CONTACT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Contact updated')
+        navigate(routes.contacts())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (
+    input: UpdateContactInput,
+    id: EditContactById['contact']['id']
+  ) => {
+    updateContact({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          Edit Contact {contact?.id}
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <ContactForm
+          contact={contact}
+          onSave={onSave}
+          error={error}
+          loading={loading}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Contact/NewContact/NewContact.tsx b/__fixtures__/fragment-test-project/web/src/components/Contact/NewContact/NewContact.tsx
new file mode 100644
index 000000000000..a5bfeefa18e6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Contact/NewContact/NewContact.tsx
@@ -0,0 +1,55 @@
+import type {
+  CreateContactMutation,
+  CreateContactInput,
+  CreateContactMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import ContactForm from 'src/components/Contact/ContactForm'
+
+const CREATE_CONTACT_MUTATION: TypedDocumentNode<
+  CreateContactMutation,
+  CreateContactMutationVariables
+> = gql`
+  mutation CreateContactMutation($input: CreateContactInput!) {
+    createContact(input: $input) {
+      id
+    }
+  }
+`
+
+const NewContact = () => {
+  const [createContact, { loading, error }] = useMutation(
+    CREATE_CONTACT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Contact created')
+        navigate(routes.contacts())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (input: CreateContactInput) => {
+    createContact({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">New Contact</h2>
+      </header>
+      <div className="rw-segment-main">
+        <ContactForm onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default NewContact
diff --git a/__fixtures__/fragment-test-project/web/src/components/Fruit.tsx b/__fixtures__/fragment-test-project/web/src/components/FruitInfo.tsx
similarity index 74%
rename from __fixtures__/fragment-test-project/web/src/components/Fruit.tsx
rename to __fixtures__/fragment-test-project/web/src/components/FruitInfo.tsx
index 8cdbb8f4bdd7..95015ee57764 100644
--- a/__fixtures__/fragment-test-project/web/src/components/Fruit.tsx
+++ b/__fixtures__/fragment-test-project/web/src/components/FruitInfo.tsx
@@ -2,8 +2,8 @@ import type { Fruit } from 'types/graphql'
 
 import { registerFragment } from '@redwoodjs/web/apollo'
 
-import Card from 'src/components/Card/Card'
-import Stall from 'src/components/Stall'
+import Card from 'src/components/Card'
+import StallInfo from 'src/components/StallInfo'
 
 const { useRegisteredFragment } = registerFragment(
   gql`
@@ -19,21 +19,19 @@ const { useRegisteredFragment } = registerFragment(
   `
 )
 
-const Fruit = ({ id }: { id: string }) => {
+const FruitInfo = ({ id }: { id: string }) => {
   const { data: fruit, complete } = useRegisteredFragment<Fruit>(id)
 
-  console.log(fruit)
-
   return (
     complete && (
       <Card>
         <h2 className="font-bold">Fruit Name: {fruit.name}</h2>
         <p>Seeds? {fruit.isSeedless ? 'Yes' : 'No'}</p>
         <p>Ripeness: {fruit.ripenessIndicators}</p>
-        <Stall id={fruit.stall.id} />
+        <StallInfo id={fruit.stall.id} />
       </Card>
     )
   )
 }
 
-export default Fruit
+export default FruitInfo
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx
new file mode 100644
index 000000000000..70f76473bb8e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx
@@ -0,0 +1,78 @@
+import type {
+  EditPostById,
+  UpdatePostInput,
+  UpdatePostMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import PostForm from 'src/components/Post/PostForm'
+
+export const QUERY: TypedDocumentNode<EditPostById> = gql`
+  query EditPostById($id: Int!) {
+    post: post(id: $id) {
+      id
+      title
+      body
+      authorId
+      createdAt
+    }
+  }
+`
+
+const UPDATE_POST_MUTATION: TypedDocumentNode<
+  EditPostById,
+  UpdatePostMutationVariables
+> = gql`
+  mutation UpdatePostMutation($id: Int!, $input: UpdatePostInput!) {
+    updatePost(id: $id, input: $input) {
+      id
+      title
+      body
+      authorId
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ post }: CellSuccessProps<EditPostById>) => {
+  const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post updated')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onSave = (input: UpdatePostInput, id: EditPostById['post']['id']) => {
+    updatePost({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          Edit Post {post?.id}
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <PostForm post={post} onSave={onSave} error={error} loading={loading} />
+      </div>
+    </div>
+  )
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/NewPost/NewPost.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/NewPost/NewPost.tsx
new file mode 100644
index 000000000000..3809b3b2f088
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/NewPost/NewPost.tsx
@@ -0,0 +1,52 @@
+import type {
+  CreatePostMutation,
+  CreatePostInput,
+  CreatePostMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import PostForm from 'src/components/Post/PostForm'
+
+const CREATE_POST_MUTATION: TypedDocumentNode<
+  CreatePostMutation,
+  CreatePostMutationVariables
+> = gql`
+  mutation CreatePostMutation($input: CreatePostInput!) {
+    createPost(input: $input) {
+      id
+    }
+  }
+`
+
+const NewPost = () => {
+  const [createPost, { loading, error }] = useMutation(CREATE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post created')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onSave = (input: CreatePostInput) => {
+    createPost({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">New Post</h2>
+      </header>
+      <div className="rw-segment-main">
+        <PostForm onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default NewPost
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/Post/Post.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/Post/Post.tsx
new file mode 100644
index 000000000000..cf9512556964
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/Post/Post.tsx
@@ -0,0 +1,98 @@
+import type {
+  DeletePostMutation,
+  DeletePostMutationVariables,
+  FindPostById,
+} from 'types/graphql'
+
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { timeTag } from 'src/lib/formatters'
+
+const DELETE_POST_MUTATION: TypedDocumentNode<
+  DeletePostMutation,
+  DeletePostMutationVariables
+> = gql`
+  mutation DeletePostMutation($id: Int!) {
+    deletePost(id: $id) {
+      id
+    }
+  }
+`
+
+interface Props {
+  post: NonNullable<FindPostById['post']>
+}
+
+const Post = ({ post }: Props) => {
+  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post deleted')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onDeleteClick = (id: DeletePostMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete post ' + id + '?')) {
+      deletePost({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            Post {post.id} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{post.id}</td>
+            </tr>
+            <tr>
+              <th>Title</th>
+              <td>{post.title}</td>
+            </tr>
+            <tr>
+              <th>Body</th>
+              <td>{post.body}</td>
+            </tr>
+            <tr>
+              <th>Author id</th>
+              <td>{post.authorId}</td>
+            </tr>
+            <tr>
+              <th>Created at</th>
+              <td>{timeTag(post.createdAt)}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.editPost({ id: post.id })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(post.id)}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default Post
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/PostCell/PostCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/PostCell/PostCell.tsx
new file mode 100644
index 000000000000..8c90134ccfef
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/PostCell/PostCell.tsx
@@ -0,0 +1,38 @@
+import type { FindPostById, FindPostByIdVariables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Post from 'src/components/Post/Post'
+
+export const QUERY: TypedDocumentNode<
+  FindPostById,
+  FindPostByIdVariables
+> = gql`
+  query FindPostById($id: Int!) {
+    post: post(id: $id) {
+      id
+      title
+      body
+      authorId
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Post not found</div>
+
+export const Failure = ({ error }: CellFailureProps<FindPostByIdVariables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  post,
+}: CellSuccessProps<FindPostById, FindPostByIdVariables>) => {
+  return <Post post={post} />
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/PostForm/PostForm.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/PostForm/PostForm.tsx
new file mode 100644
index 000000000000..02d4901a7f96
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/PostForm/PostForm.tsx
@@ -0,0 +1,102 @@
+import type { EditPostById, UpdatePostInput } from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  NumberField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormPost = NonNullable<EditPostById['post']>
+
+interface PostFormProps {
+  post?: EditPostById['post']
+  onSave: (data: UpdatePostInput, id?: FormPost['id']) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const PostForm = (props: PostFormProps) => {
+  const onSubmit = (data: FormPost) => {
+    props.onSave(data, props?.post?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormPost> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="title"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Title
+        </Label>
+
+        <TextField
+          name="title"
+          defaultValue={props.post?.title}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="title" className="rw-field-error" />
+
+        <Label
+          name="body"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Body
+        </Label>
+
+        <TextField
+          name="body"
+          defaultValue={props.post?.body}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="body" className="rw-field-error" />
+
+        <Label
+          name="authorId"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Author id
+        </Label>
+
+        <NumberField
+          name="authorId"
+          defaultValue={props.post?.authorId}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="authorId" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default PostForm
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/Posts/Posts.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/Posts/Posts.tsx
new file mode 100644
index 000000000000..dfe9766df104
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/Posts/Posts.tsx
@@ -0,0 +1,102 @@
+import type {
+  DeletePostMutation,
+  DeletePostMutationVariables,
+  FindPosts,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { QUERY } from 'src/components/Post/PostsCell'
+import { timeTag, truncate } from 'src/lib/formatters'
+
+const DELETE_POST_MUTATION: TypedDocumentNode<
+  DeletePostMutation,
+  DeletePostMutationVariables
+> = gql`
+  mutation DeletePostMutation($id: Int!) {
+    deletePost(id: $id) {
+      id
+    }
+  }
+`
+
+const PostsList = ({ posts }: FindPosts) => {
+  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post deleted')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+    // This refetches the query on the list page. Read more about other ways to
+    // update the cache over here:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
+  })
+
+  const onDeleteClick = (id: DeletePostMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete post ' + id + '?')) {
+      deletePost({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Title</th>
+            <th>Body</th>
+            <th>Author id</th>
+            <th>Created at</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {posts.map((post) => (
+            <tr key={post.id}>
+              <td>{truncate(post.id)}</td>
+              <td>{truncate(post.title)}</td>
+              <td>{truncate(post.body)}</td>
+              <td>{truncate(post.authorId)}</td>
+              <td>{timeTag(post.createdAt)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.post({ id: post.id })}
+                    title={'Show post ' + post.id + ' detail'}
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editPost({ id: post.id })}
+                    title={'Edit post ' + post.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete post ' + post.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(post.id)}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PostsList
diff --git a/__fixtures__/fragment-test-project/web/src/components/Post/PostsCell/PostsCell.tsx b/__fixtures__/fragment-test-project/web/src/components/Post/PostsCell/PostsCell.tsx
new file mode 100644
index 000000000000..c36d118aaf22
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/Post/PostsCell/PostsCell.tsx
@@ -0,0 +1,45 @@
+import type { FindPosts, FindPostsVariables } from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Posts from 'src/components/Post/Posts'
+
+export const QUERY: TypedDocumentNode<FindPosts, FindPostsVariables> = gql`
+  query FindPosts {
+    posts {
+      id
+      title
+      body
+      authorId
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      {'No posts yet. '}
+      <Link to={routes.newPost()} className="rw-link">
+        {'Create one?'}
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<FindPosts>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  posts,
+}: CellSuccessProps<FindPosts, FindPostsVariables>) => {
+  return <Posts posts={posts} />
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/Produce.tsx b/__fixtures__/fragment-test-project/web/src/components/ProduceInfo.tsx
similarity index 73%
rename from __fixtures__/fragment-test-project/web/src/components/Produce.tsx
rename to __fixtures__/fragment-test-project/web/src/components/ProduceInfo.tsx
index fe3798c80578..f06a68ad5e9d 100644
--- a/__fixtures__/fragment-test-project/web/src/components/Produce.tsx
+++ b/__fixtures__/fragment-test-project/web/src/components/ProduceInfo.tsx
@@ -2,7 +2,7 @@ import type { Produce } from 'types/graphql'
 
 import { registerFragment } from '@redwoodjs/web/apollo'
 
-import Card from 'src/components/Card/Card'
+import Card from 'src/components/Card'
 
 const { useRegisteredFragment } = registerFragment(
   gql`
@@ -13,11 +13,9 @@ const { useRegisteredFragment } = registerFragment(
   `
 )
 
-const Produce = ({ id }: { id: string }) => {
+const ProduceInfo = ({ id }: { id: string }) => {
   const { data, complete } = useRegisteredFragment<Produce>(id)
 
-  console.log('>>>>>>>>>>>Produce', data)
-
   return (
     complete && (
       <Card>
@@ -27,4 +25,4 @@ const Produce = ({ id }: { id: string }) => {
   )
 }
 
-export default Produce
+export default ProduceInfo
diff --git a/__fixtures__/fragment-test-project/web/src/components/Stall.tsx b/__fixtures__/fragment-test-project/web/src/components/StallInfo.tsx
similarity index 83%
rename from __fixtures__/fragment-test-project/web/src/components/Stall.tsx
rename to __fixtures__/fragment-test-project/web/src/components/StallInfo.tsx
index 3244714500bd..24b2fbb58d35 100644
--- a/__fixtures__/fragment-test-project/web/src/components/Stall.tsx
+++ b/__fixtures__/fragment-test-project/web/src/components/StallInfo.tsx
@@ -11,11 +11,9 @@ const { useRegisteredFragment } = registerFragment(
   `
 )
 
-const Stall = ({ id }: { id: string }) => {
+const StallInfo = ({ id }: { id: string }) => {
   const { data, complete } = useRegisteredFragment<Stall>(id)
 
-  console.log(data)
-
   return (
     complete && (
       <div>
@@ -25,4 +23,4 @@ const Stall = ({ id }: { id: string }) => {
   )
 }
 
-export default Stall
+export default StallInfo
diff --git a/__fixtures__/fragment-test-project/web/src/components/Vegetable.tsx b/__fixtures__/fragment-test-project/web/src/components/VegetableInfo.tsx
similarity index 74%
rename from __fixtures__/fragment-test-project/web/src/components/Vegetable.tsx
rename to __fixtures__/fragment-test-project/web/src/components/VegetableInfo.tsx
index 461cb9377f48..96f6208b19e9 100644
--- a/__fixtures__/fragment-test-project/web/src/components/Vegetable.tsx
+++ b/__fixtures__/fragment-test-project/web/src/components/VegetableInfo.tsx
@@ -2,8 +2,8 @@ import type { Vegetable } from 'types/graphql'
 
 import { registerFragment } from '@redwoodjs/web/apollo'
 
-import Card from 'src/components/Card/Card'
-import Stall from 'src/components/Stall'
+import Card from 'src/components/Card'
+import StallInfo from 'src/components/StallInfo'
 
 const { useRegisteredFragment } = registerFragment(
   gql`
@@ -19,21 +19,19 @@ const { useRegisteredFragment } = registerFragment(
   `
 )
 
-const Vegetable = ({ id }: { id: string }) => {
+const VegetableInfo = ({ id }: { id: string }) => {
   const { data: vegetable, complete } = useRegisteredFragment<Vegetable>(id)
 
-  console.log(vegetable)
-
   return (
     complete && (
       <Card>
         <h2 className="font-bold">Vegetable Name: {vegetable.name}</h2>
         <p>Pickled? {vegetable.isPickled ? 'Yes' : 'No'}</p>
         <p>Family: {vegetable.vegetableFamily}</p>
-        <Stall id={vegetable.stall.id} />
+        <StallInfo id={vegetable.stall.id} />
       </Card>
     )
   )
 }
 
-export default Vegetable
+export default VegetableInfo
diff --git a/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.mock.ts b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.mock.ts
new file mode 100644
index 000000000000..55dd744ca5a8
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.mock.ts
@@ -0,0 +1,15 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  waterfallBlogPost: {
+    id: 42,
+    title: 'Mocked title',
+    body: 'Mocked body',
+    createdAt: '2022-01-17T13:57:51.607Z',
+    authorId: 7,
+
+    author: {
+      email: 'se7en@7.com',
+      fullName: 'Se7en Lastname',
+    },
+  },
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
new file mode 100644
index 000000000000..7109babeb381
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './WaterfallBlogPostCell'
+import { standard } from './WaterfallBlogPostCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/WaterfallBlogPostCell',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure: StoryObj<typeof Failure> = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.test.tsx b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.test.tsx
new file mode 100644
index 000000000000..9217b98d4c30
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Empty, Failure, Success } from './WaterfallBlogPostCell'
+import { standard } from './WaterfallBlogPostCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('WaterfallBlogPostCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success waterfallBlogPost={standard().waterfallBlogPost} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.tsx b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.tsx
new file mode 100644
index 000000000000..210b9153ca46
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.tsx
@@ -0,0 +1,67 @@
+import type {
+  FindWaterfallBlogPostQuery,
+  FindWaterfallBlogPostQueryVariables,
+} from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import AuthorCell from 'src/components/AuthorCell'
+
+export const QUERY: TypedDocumentNode<
+  FindWaterfallBlogPostQuery,
+  FindWaterfallBlogPostQueryVariables
+> = gql`
+  query FindWaterfallBlogPostQuery($id: Int!) {
+    waterfallBlogPost: post(id: $id) {
+      id
+      title
+      body
+      authorId
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindWaterfallBlogPostQueryVariables>) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({
+  waterfallBlogPost,
+}: CellSuccessProps<
+  FindWaterfallBlogPostQuery,
+  FindWaterfallBlogPostQueryVariables
+>) => (
+  <article>
+    {waterfallBlogPost && (
+      <>
+        <header className="mt-4">
+          <p className="text-sm">
+            {new Intl.DateTimeFormat('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            }).format(new Date(waterfallBlogPost.createdAt))}{' '}
+            - By: <AuthorCell id={waterfallBlogPost.authorId} />
+          </p>
+          <h2 className="mt-2 text-xl font-semibold">
+            {waterfallBlogPost.title}
+          </h2>
+        </header>
+        <div className="mb-4 mt-2 font-light text-gray-900">
+          {waterfallBlogPost.body}
+        </div>
+      </>
+    )}
+  </article>
+)
diff --git a/__fixtures__/fragment-test-project/web/src/entry.client.tsx b/__fixtures__/fragment-test-project/web/src/entry.client.tsx
index ffee44f85869..d55036f35465 100644
--- a/__fixtures__/fragment-test-project/web/src/entry.client.tsx
+++ b/__fixtures__/fragment-test-project/web/src/entry.client.tsx
@@ -9,6 +9,12 @@ import App from './App'
  */
 const redwoodAppElement = document.getElementById('redwood-app')
 
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it exists in your 'web/src/index.html' file."
+  )
+}
+
 if (redwoodAppElement.children?.length > 0) {
   hydrateRoot(redwoodAppElement, <App />)
 } else {
diff --git a/__fixtures__/fragment-test-project/web/src/graphql/persistedOperations.json b/__fixtures__/fragment-test-project/web/src/graphql/persistedOperations.json
deleted file mode 100644
index e5a8039db67f..000000000000
--- a/__fixtures__/fragment-test-project/web/src/graphql/persistedOperations.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-   "GetGroceries": "9198a2438e6e5dbcf42362657baca24494a9f6cf83a6033983d2a978c1c1c703",
-   "GetProduce": "a8ee227d80bda6e1f785083aac537e8f1cd0340e0b52faaa27e18dbe4d629241"
-}
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/web/src/graphql/possible-types.ts b/__fixtures__/fragment-test-project/web/src/graphql/possible-types.ts
deleted file mode 100644
index 889b16ceebfb..000000000000
--- a/__fixtures__/fragment-test-project/web/src/graphql/possible-types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface PossibleTypesResultData {
-  possibleTypes: {
-    [key: string]: string[]
-  }
-}
-const result: PossibleTypesResultData = {
-  possibleTypes: {
-    Groceries: ['Fruit', 'Vegetable'],
-    Grocery: ['Fruit', 'Vegetable'],
-  },
-}
-export default result
diff --git a/__fixtures__/fragment-test-project/web/src/graphql/possibleTypes.ts b/__fixtures__/fragment-test-project/web/src/graphql/possibleTypes.ts
index 79a376225982..889b16ceebfb 100644
--- a/__fixtures__/fragment-test-project/web/src/graphql/possibleTypes.ts
+++ b/__fixtures__/fragment-test-project/web/src/graphql/possibleTypes.ts
@@ -1,20 +1,12 @@
-
-      export interface PossibleTypesResultData {
-        possibleTypes: {
-          [key: string]: string[]
-        }
-      }
-      const result: PossibleTypesResultData = {
-  "possibleTypes": {
-    "Groceries": [
-      "Fruit",
-      "Vegetable"
-    ],
-    "Grocery": [
-      "Fruit",
-      "Vegetable"
-    ]
+export interface PossibleTypesResultData {
+  possibleTypes: {
+    [key: string]: string[]
   }
-};
-      export default result;
-    
\ No newline at end of file
+}
+const result: PossibleTypesResultData = {
+  possibleTypes: {
+    Groceries: ['Fruit', 'Vegetable'],
+    Grocery: ['Fruit', 'Vegetable'],
+  },
+}
+export default result
diff --git a/__fixtures__/fragment-test-project/web/src/index.css b/__fixtures__/fragment-test-project/web/src/index.css
index e69de29bb2d1..b31cb3378fae 100644
--- a/__fixtures__/fragment-test-project/web/src/index.css
+++ b/__fixtures__/fragment-test-project/web/src/index.css
@@ -0,0 +1,13 @@
+/**
+ * START --- SETUP TAILWINDCSS EDIT
+ *
+ * `yarn rw setup ui tailwindcss` placed these directives here
+ * to inject Tailwind's styles into your CSS.
+ * For more information, see: https://tailwindcss.com/docs/installation
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/**
+ * END --- SETUP TAILWINDCSS EDIT
+ */
diff --git a/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
new file mode 100644
index 000000000000..43f3b5d106dc
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BlogLayout from './BlogLayout'
+
+const meta: Meta<typeof BlogLayout> = {
+  component: BlogLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof BlogLayout>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.test.tsx b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.test.tsx
new file mode 100644
index 000000000000..f1ebed53c0a1
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import BlogLayout from './BlogLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('BlogLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<BlogLayout />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.tsx b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
new file mode 100644
index 000000000000..7236aa4b1f07
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
@@ -0,0 +1,80 @@
+type BlogLayoutProps = {
+  children?: React.ReactNode
+}
+
+import { Link, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+const BlogLayout = ({ children }: BlogLayoutProps) => {
+  const { logOut, isAuthenticated } = useAuth()
+
+  return (
+    <>
+      <header className="relative flex items-center justify-between bg-blue-700 px-8 py-4 text-white">
+        <h1 className="text-3xl font-semibold tracking-tight">
+          <Link
+            className="text-blue-400 transition duration-100 hover:text-blue-100"
+            to={routes.home()}
+          >
+            Redwood Blog
+          </Link>
+        </h1>
+        <nav>
+          <ul className="relative flex items-center font-light">
+            <li>
+              <Link
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                to={routes.about()}
+              >
+                About
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                to={routes.contactUs()}
+              >
+                Contact Us
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                to={routes.posts()}
+              >
+                Admin
+              </Link>
+            </li>
+            {isAuthenticated && (
+              <li>
+                <Link
+                  className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  onClick={logOut}
+                  to={''}
+                >
+                  Log Out
+                </Link>
+              </li>
+            )}
+            {!isAuthenticated && (
+              <li>
+                <Link
+                  className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  to={routes.login()}
+                >
+                  Log In
+                </Link>
+              </li>
+            )}
+          </ul>
+        </nav>
+      </header>
+      <main className="mx-auto mt-3 max-w-4xl rounded-b bg-white p-12 shadow-lg">
+        {children}
+      </main>
+    </>
+  )
+}
+
+export default BlogLayout
diff --git a/__fixtures__/fragment-test-project/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx b/__fixtures__/fragment-test-project/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
new file mode 100644
index 000000000000..2912b56706d6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
@@ -0,0 +1,37 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Toaster } from '@redwoodjs/web/toast'
+
+type LayoutProps = {
+  title: string
+  titleTo: string
+  buttonLabel: string
+  buttonTo: string
+  children: React.ReactNode
+}
+
+const ScaffoldLayout = ({
+  title,
+  titleTo,
+  buttonLabel,
+  buttonTo,
+  children,
+}: LayoutProps) => {
+  return (
+    <div className="rw-scaffold">
+      <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+      <header className="rw-header">
+        <h1 className="rw-heading rw-heading-primary">
+          <Link to={routes[titleTo]()} className="rw-link">
+            {title}
+          </Link>
+        </h1>
+        <Link to={routes[buttonTo]()} className="rw-button rw-button-green">
+          <div className="rw-button-icon">+</div> {buttonLabel}
+        </Link>
+      </header>
+      <main className="rw-main">{children}</main>
+    </div>
+  )
+}
+
+export default ScaffoldLayout
diff --git a/__fixtures__/fragment-test-project/web/src/lib/formatters.test.tsx b/__fixtures__/fragment-test-project/web/src/lib/formatters.test.tsx
new file mode 100644
index 000000000000..56593386e4f2
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/lib/formatters.test.tsx
@@ -0,0 +1,192 @@
+import { render, waitFor, screen } from '@redwoodjs/testing/web'
+
+import {
+  formatEnum,
+  jsonTruncate,
+  truncate,
+  timeTag,
+  jsonDisplay,
+  checkboxInputTag,
+} from './formatters'
+
+describe('formatEnum', () => {
+  it('handles nullish values', () => {
+    expect(formatEnum(null)).toEqual('')
+    expect(formatEnum('')).toEqual('')
+    expect(formatEnum(undefined)).toEqual('')
+  })
+
+  it('formats a list of values', () => {
+    expect(
+      formatEnum(['RED', 'ORANGE', 'YELLOW', 'GREEN', 'BLUE', 'VIOLET'])
+    ).toEqual('Red, Orange, Yellow, Green, Blue, Violet')
+  })
+
+  it('formats a single value', () => {
+    expect(formatEnum('DARK_BLUE')).toEqual('Dark blue')
+  })
+
+  it('returns an empty string for values of the wrong type (for JS projects)', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(formatEnum(5)).toEqual('')
+  })
+})
+
+describe('truncate', () => {
+  it('truncates really long strings', () => {
+    expect(truncate('na '.repeat(1000) + 'batman').length).toBeLessThan(1000)
+    expect(truncate('na '.repeat(1000) + 'batman')).not.toMatch(/batman/)
+  })
+
+  it('does not modify short strings', () => {
+    expect(truncate('Short strinG')).toEqual('Short strinG')
+  })
+
+  it('adds ... to the end of truncated strings', () => {
+    expect(truncate('repeat'.repeat(1000))).toMatch(/\w\.\.\.$/)
+  })
+
+  it('accepts numbers', () => {
+    expect(truncate(123)).toEqual('123')
+    expect(truncate(0)).toEqual('0')
+    expect(truncate(0o000)).toEqual('0')
+  })
+
+  it('handles arguments of invalid type', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(truncate(false)).toEqual('false')
+
+    expect(truncate(undefined)).toEqual('')
+    expect(truncate(null)).toEqual('')
+  })
+})
+
+describe('jsonTruncate', () => {
+  it('truncates large json structures', () => {
+    expect(
+      jsonTruncate({
+        foo: 'foo',
+        bar: 'bar',
+        baz: 'baz',
+        kittens: 'kittens meow',
+        bazinga: 'Sheldon',
+        nested: {
+          foobar: 'I have no imagination',
+          two: 'Second nested item',
+        },
+        five: 5,
+        bool: false,
+      })
+    ).toMatch(/.+\n.+\w\.\.\.$/s)
+  })
+})
+
+describe('timeTag', () => {
+  it('renders a date', async () => {
+    render(<div>{timeTag(new Date('1970-08-20').toUTCString())}</div>)
+
+    await waitFor(() => screen.getByText(/1970.*00:00:00/))
+  })
+
+  it('can take an empty input string', async () => {
+    expect(timeTag('')).toEqual('')
+  })
+})
+
+describe('jsonDisplay', () => {
+  it('produces the correct output', () => {
+    expect(
+      jsonDisplay({
+        title: 'TOML Example (but in JSON)',
+        database: {
+          data: [['delta', 'phi'], [3.14]],
+          enabled: true,
+          ports: [8000, 8001, 8002],
+          temp_targets: {
+            case: 72.0,
+            cpu: 79.5,
+          },
+        },
+        owner: {
+          dob: '1979-05-27T07:32:00-08:00',
+          name: 'Tom Preston-Werner',
+        },
+        servers: {
+          alpha: {
+            ip: '10.0.0.1',
+            role: 'frontend',
+          },
+          beta: {
+            ip: '10.0.0.2',
+            role: 'backend',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      <pre>
+        <code>
+          {
+        "title": "TOML Example (but in JSON)",
+        "database": {
+          "data": [
+            [
+              "delta",
+              "phi"
+            ],
+            [
+              3.14
+            ]
+          ],
+          "enabled": true,
+          "ports": [
+            8000,
+            8001,
+            8002
+          ],
+          "temp_targets": {
+            "case": 72,
+            "cpu": 79.5
+          }
+        },
+        "owner": {
+          "dob": "1979-05-27T07:32:00-08:00",
+          "name": "Tom Preston-Werner"
+        },
+        "servers": {
+          "alpha": {
+            "ip": "10.0.0.1",
+            "role": "frontend"
+          },
+          "beta": {
+            "ip": "10.0.0.2",
+            "role": "backend"
+          }
+        }
+      }
+        </code>
+      </pre>
+    `)
+  })
+})
+
+describe('checkboxInputTag', () => {
+  it('can be checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeChecked()
+  })
+
+  it('can be unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).not.toBeChecked()
+  })
+
+  it('is disabled when checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+
+  it('is disabled when unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/lib/formatters.tsx b/__fixtures__/fragment-test-project/web/src/lib/formatters.tsx
new file mode 100644
index 000000000000..8ab9e806e3cd
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/lib/formatters.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+
+import humanize from 'humanize-string'
+
+const MAX_STRING_LENGTH = 150
+
+export const formatEnum = (values: string | string[] | null | undefined) => {
+  let output = ''
+
+  if (Array.isArray(values)) {
+    const humanizedValues = values.map((value) => humanize(value))
+    output = humanizedValues.join(', ')
+  } else if (typeof values === 'string') {
+    output = humanize(values)
+  }
+
+  return output
+}
+
+export const jsonDisplay = (obj: unknown) => {
+  return (
+    <pre>
+      <code>{JSON.stringify(obj, null, 2)}</code>
+    </pre>
+  )
+}
+
+export const truncate = (value: string | number) => {
+  let output = value?.toString() ?? ''
+
+  if (output.length > MAX_STRING_LENGTH) {
+    output = output.substring(0, MAX_STRING_LENGTH) + '...'
+  }
+
+  return output
+}
+
+export const jsonTruncate = (obj: unknown) => {
+  return truncate(JSON.stringify(obj, null, 2))
+}
+
+export const timeTag = (dateTime?: string) => {
+  let output: string | JSX.Element = ''
+
+  if (dateTime) {
+    output = (
+      <time dateTime={dateTime} title={dateTime}>
+        {new Date(dateTime).toUTCString()}
+      </time>
+    )
+  }
+
+  return output
+}
+
+export const checkboxInputTag = (checked: boolean) => {
+  return <input type="checkbox" checked={checked} disabled />
+}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
new file mode 100644
index 000000000000..b8259100eb85
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AboutPage from './AboutPage'
+
+const meta: Meta<typeof AboutPage> = {
+  component: AboutPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof AboutPage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.test.tsx
new file mode 100644
index 000000000000..571b85e65599
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import AboutPage from './AboutPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('AboutPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<AboutPage />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.tsx
new file mode 100644
index 000000000000..6428b03989d7
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/AboutPage/AboutPage.tsx
@@ -0,0 +1,13 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+const AboutPage = () => {
+  return (
+    <p className="font-light">
+      This site was created to demonstrate my mastery of Redwood: Look on my
+      works, ye mighty, and despair!
+    </p>
+  )
+}
+
+export default AboutPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.routeHooks.ts b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.routeHooks.ts
new file mode 100644
index 000000000000..389ac0183756
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.routeHooks.ts
@@ -0,0 +1,5 @@
+import { db } from '$api/src/lib/db'
+
+export async function routeParameters() {
+  return (await db.post.findMany({ take: 7 })).map((post) => ({ id: post.id }))
+}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
new file mode 100644
index 000000000000..b8abecc30483
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BlogPostPage from './BlogPostPage'
+
+const meta: Meta<typeof BlogPostPage> = {
+  component: BlogPostPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof BlogPostPage>
+
+export const Primary: Story = {
+  render: (args) => {
+    return <BlogPostPage id={42} {...args} />
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.test.tsx
new file mode 100644
index 000000000000..707f289b3be6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import BlogPostPage from './BlogPostPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('BlogPostPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<BlogPostPage id={42} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.tsx
new file mode 100644
index 000000000000..415fbe886478
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/BlogPostPage/BlogPostPage.tsx
@@ -0,0 +1,20 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+type BlogPostPageProps = {
+  id: number
+}
+
+import BlogPostCell from 'src/components/BlogPostCell'
+
+const BlogPostPage = ({ id }: BlogPostPageProps) => {
+  return (
+    <>
+      <Metadata title={`Post ${id}`} description={`Description ${id}`} og />
+
+      <BlogPostCell id={id} />
+    </>
+  )
+}
+
+export default BlogPostPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactPage/ContactPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactPage/ContactPage.tsx
new file mode 100644
index 000000000000..9af63b0a3d0e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactPage/ContactPage.tsx
@@ -0,0 +1,11 @@
+import ContactCell from 'src/components/Contact/ContactCell'
+
+type ContactPageProps = {
+  id: number
+}
+
+const ContactPage = ({ id }: ContactPageProps) => {
+  return <ContactCell id={id} />
+}
+
+export default ContactPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactsPage/ContactsPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactsPage/ContactsPage.tsx
new file mode 100644
index 000000000000..7bc4048094fe
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Contact/ContactsPage/ContactsPage.tsx
@@ -0,0 +1,7 @@
+import ContactsCell from 'src/components/Contact/ContactsCell'
+
+const ContactsPage = () => {
+  return <ContactsCell />
+}
+
+export default ContactsPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Contact/EditContactPage/EditContactPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Contact/EditContactPage/EditContactPage.tsx
new file mode 100644
index 000000000000..7241f71f7f34
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Contact/EditContactPage/EditContactPage.tsx
@@ -0,0 +1,11 @@
+import EditContactCell from 'src/components/Contact/EditContactCell'
+
+type ContactPageProps = {
+  id: number
+}
+
+const EditContactPage = ({ id }: ContactPageProps) => {
+  return <EditContactCell id={id} />
+}
+
+export default EditContactPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Contact/NewContactPage/NewContactPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Contact/NewContactPage/NewContactPage.tsx
new file mode 100644
index 000000000000..2d4cc9274eef
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Contact/NewContactPage/NewContactPage.tsx
@@ -0,0 +1,7 @@
+import NewContact from 'src/components/Contact/NewContact'
+
+const NewContactPage = () => {
+  return <NewContact />
+}
+
+export default NewContactPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.stories.tsx
new file mode 100644
index 000000000000..80eb779856a4
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ContactUsPage from './ContactUsPage'
+
+const meta: Meta<typeof ContactUsPage> = {
+  component: ContactUsPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactUsPage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.test.tsx
new file mode 100644
index 000000000000..8568edc66802
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ContactUsPage from './ContactUsPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('ContactUsPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ContactUsPage />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.tsx
new file mode 100644
index 000000000000..529d72d8bfbc
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ContactUsPage/ContactUsPage.tsx
@@ -0,0 +1,108 @@
+import { useForm } from 'react-hook-form'
+
+import {
+  Form,
+  TextField,
+  TextAreaField,
+  Submit,
+  FieldError,
+  Label,
+} from '@redwoodjs/forms'
+import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+
+const CREATE_CONTACT = gql`
+  mutation CreateContactMutation($input: CreateContactInput!) {
+    createContact(input: $input) {
+      id
+    }
+  }
+`
+
+const ContactUsPage = () => {
+  const formMethods = useForm()
+
+  const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
+    onCompleted: () => {
+      toast.success('Thank you for your submission!')
+      formMethods.reset()
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onSubmit = (data) => {
+    create({ variables: { input: data } })
+    console.log(data)
+  }
+
+  return (
+    <>
+      <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }} error={error}>
+        <Label
+          name="name"
+          className="block text-sm uppercase text-gray-700"
+          errorClassName="block uppercase text-sm text-red-700"
+        >
+          Name
+        </Label>
+        <TextField
+          name="name"
+          validation={{ required: true }}
+          className="rounded-sm border px-2 py-1 outline-none"
+          errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="name" className="block text-red-700" />
+
+        <Label
+          name="email"
+          className="mt-8 block text-sm uppercase text-gray-700"
+          errorClassName="block mt-8 text-red-700 uppercase text-sm"
+        >
+          Email
+        </Label>
+        <TextField
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /[^@]+@[^.]+..+/,
+              message: 'Please enter a valid email address',
+            },
+          }}
+          className="rounded-sm border px-2 py-1"
+          errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="email" className="block text-red-700" />
+
+        <Label
+          name="message"
+          className="mt-8 block text-sm uppercase text-gray-700"
+          errorClassName="block mt-8 text-red-700 uppercase text-sm"
+        >
+          Message
+        </Label>
+        <TextAreaField
+          name="message"
+          validation={{ required: true }}
+          className="block rounded-sm border px-2 py-1"
+          errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
+        />
+        <FieldError name="message" className="block text-red-700" />
+
+        <Submit
+          className="mt-8 block rounded bg-blue-700 px-4 py-2 text-white"
+          disabled={loading}
+        >
+          Save
+        </Submit>
+      </Form>
+    </>
+  )
+}
+
+export default ContactUsPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.stories.tsx
new file mode 100644
index 000000000000..adb222dbce94
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import DoublePage from './DoublePage'
+
+const meta: Meta<typeof DoublePage> = {
+  component: DoublePage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DoublePage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.test.tsx
new file mode 100644
index 000000000000..be5818c2d1d7
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import DoublePage from './DoublePage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('DoublePage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<DoublePage />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.tsx b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.tsx
new file mode 100644
index 000000000000..fafa953fb3a4
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/DoublePage/DoublePage.tsx
@@ -0,0 +1,25 @@
+import { Metadata } from '@redwoodjs/web'
+
+const DoublePage = () => {
+  return (
+    <>
+      <Metadata title="Double" description="Double page" og />
+
+      <h1 className="mb-1 mt-2 text-xl font-semibold">DoublePage</h1>
+      <p>
+        This page exists to make sure we don&apos;t regress on{' '}
+        <a
+          href="https://github.com/redwoodjs/redwood/issues/7757"
+          className="text-blue-600 underline visited:text-purple-600 hover:text-blue-800"
+          target="_blank"
+          rel="noreferrer"
+        >
+          #7757
+        </a>
+      </p>
+      <p>It needs to be a page that is not wrapped in a Set</p>
+    </>
+  )
+}
+
+export default DoublePage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
new file mode 100644
index 000000000000..4d3f34fe28d3
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from 'react'
+
+import { Form, Label, TextField, Submit, FieldError } from '@redwoodjs/forms'
+import { navigate, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const ForgotPasswordPage = () => {
+  const { isAuthenticated, forgotPassword } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  const usernameRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    usernameRef?.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: { username: string }) => {
+    const response = await forgotPassword(data.username)
+
+    if (response.error) {
+      toast.error(response.error)
+    } else {
+      // The function `forgotPassword.handler` in api/src/functions/auth.js has
+      // been invoked, let the user know how to get the link to reset their
+      // password (sent in email, perhaps?)
+      toast.success(
+        'A link to reset your password was sent to ' + response.email
+      )
+      navigate(routes.login())
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Forgot Password" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">
+                Forgot Password
+              </h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <div className="text-left">
+                    <Label
+                      name="username"
+                      className="rw-label"
+                      errorClassName="rw-label rw-label-error"
+                    >
+                      Username
+                    </Label>
+                    <TextField
+                      name="username"
+                      className="rw-input"
+                      errorClassName="rw-input rw-input-error"
+                      ref={usernameRef}
+                      validation={{
+                        required: {
+                          value: true,
+                          message: 'Username is required',
+                        },
+                      }}
+                    />
+
+                    <FieldError name="username" className="rw-field-error" />
+                  </div>
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">Submit</Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default ForgotPasswordPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.stories.tsx
new file mode 100644
index 000000000000..86979d77f126
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import GroceriesPage from './GroceriesPage'
+
+const meta: Meta<typeof GroceriesPage> = {
+  component: GroceriesPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof GroceriesPage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.test.tsx
new file mode 100644
index 000000000000..61548072a989
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import GroceriesPage from './GroceriesPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('GroceriesPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<GroceriesPage />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.tsx
index ab5e464ffe89..5ce6f8a14302 100644
--- a/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.tsx
+++ b/__fixtures__/fragment-test-project/web/src/pages/GroceriesPage/GroceriesPage.tsx
@@ -1,11 +1,9 @@
-import type { GetGroceries, GetProduce } from 'types/graphql'
+import type { GetGroceries, GetProduce } from "types/graphql";
+import { Metadata, useQuery } from '@redwoodjs/web';
 
-import { MetaTags } from '@redwoodjs/web'
-import { useQuery } from '@redwoodjs/web'
-
-import Fruit from 'src/components/Fruit'
-import Produce from 'src/components/Produce'
-import Vegetable from 'src/components/Vegetable'
+import FruitInfo from "src/components/FruitInfo";
+import ProduceInfo from "src/components/ProduceInfo";
+import VegetableInfo from "src/components/VegetableInfo";
 
 const GET_GROCERIES = gql`
   query GetGroceries {
@@ -14,17 +12,17 @@ const GET_GROCERIES = gql`
       ...Vegetable_info
     }
   }
-`
+`;
 
 const GET_PRODUCE = gql`
   query GetProduce {
-    produce {
+    produces {
       ...Produce_info
     }
   }
-`
+`;
 
-const FruitsPage = () => {
+const GroceriesPage = () => {
   const { data: groceryData, loading: groceryLoading } =
     useQuery<GetGroceries>(GET_GROCERIES)
   const { data: produceData, loading: produceLoading } =
@@ -32,26 +30,26 @@ const FruitsPage = () => {
 
   return (
     <div className="m-12">
-      <MetaTags title="Groceries" description="Groceries page" />
+      <Metadata title="Groceries" description="Groceries page" og />
 
       <div className="grid auto-cols-auto gap-4 grid-cols-4">
         {!groceryLoading &&
           groceryData.groceries.map((fruit) => (
-            <Fruit key={fruit.id} id={fruit.id} />
+            <FruitInfo key={fruit.id} id={fruit.id} />
           ))}
 
         {!groceryLoading &&
           groceryData.groceries.map((vegetable) => (
-            <Vegetable key={vegetable.id} id={vegetable.id} />
+            <VegetableInfo key={vegetable.id} id={vegetable.id} />
           ))}
 
         {!produceLoading &&
-          produceData.produce.map((produce) => ( 
-            <Produce key={produce.id} id={produce.id} />
+          produceData.produces?.map((produce) => (
+            <ProduceInfo key={produce.id} id={produce.id} />
           ))}
       </div>
     </div>
   )
 }
 
-export default FruitsPage
+export default GroceriesPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.stories.tsx
new file mode 100644
index 000000000000..d9631ae6579d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import HomePage from './HomePage'
+
+const meta: Meta<typeof HomePage> = {
+  component: HomePage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof HomePage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.test.tsx
new file mode 100644
index 000000000000..c684c7a1e13b
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import HomePage from './HomePage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<HomePage />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.tsx b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 000000000000..290c7a31f29a
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,10 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+import BlogPostsCell from 'src/components/BlogPostsCell'
+
+const HomePage = () => {
+  return <BlogPostsCell />
+}
+
+export default HomePage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/LoginPage/LoginPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 000000000000..a61d5ffaedee
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,134 @@
+import { useRef } from 'react'
+import { useEffect } from 'react'
+
+import {
+  Form,
+  Label,
+  TextField,
+  PasswordField,
+  Submit,
+  FieldError,
+} from '@redwoodjs/forms'
+import { Link, navigate, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const LoginPage = () => {
+  const { isAuthenticated, logIn } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  const usernameRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    usernameRef.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await logIn({
+      username: data.username,
+      password: data.password,
+    })
+
+    if (response.message) {
+      toast(response.message)
+    } else if (response.error) {
+      toast.error(response.error)
+    } else {
+      toast.success('Welcome back!')
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Login" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">Login</h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="username"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Username
+                  </Label>
+                  <TextField
+                    name="username"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={usernameRef}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Username is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError name="username" className="rw-field-error" />
+
+                  <Label
+                    name="password"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Password
+                  </Label>
+                  <PasswordField
+                    name="password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    autoComplete="current-password"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Password is required',
+                      },
+                    }}
+                  />
+
+                  <div className="rw-forgot-link">
+                    <Link
+                      to={routes.forgotPassword()}
+                      className="rw-forgot-link"
+                    >
+                      Forgot Password?
+                    </Link>
+                  </div>
+
+                  <FieldError name="password" className="rw-field-error" />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">Login</Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+          <div className="rw-login-link">
+            <span>Don&apos;t have an account?</span>{' '}
+            <Link to={routes.signup()} className="rw-link">
+              Sign up!
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default LoginPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Post/EditPostPage/EditPostPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Post/EditPostPage/EditPostPage.tsx
new file mode 100644
index 000000000000..f3f8c7bfc820
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Post/EditPostPage/EditPostPage.tsx
@@ -0,0 +1,11 @@
+import EditPostCell from 'src/components/Post/EditPostCell'
+
+type PostPageProps = {
+  id: number
+}
+
+const EditPostPage = ({ id }: PostPageProps) => {
+  return <EditPostCell id={id} />
+}
+
+export default EditPostPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Post/NewPostPage/NewPostPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Post/NewPostPage/NewPostPage.tsx
new file mode 100644
index 000000000000..0b3c453cc3b6
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Post/NewPostPage/NewPostPage.tsx
@@ -0,0 +1,7 @@
+import NewPost from 'src/components/Post/NewPost'
+
+const NewPostPage = () => {
+  return <NewPost />
+}
+
+export default NewPostPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Post/PostPage/PostPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Post/PostPage/PostPage.tsx
new file mode 100644
index 000000000000..ca4048740a0e
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Post/PostPage/PostPage.tsx
@@ -0,0 +1,11 @@
+import PostCell from 'src/components/Post/PostCell'
+
+type PostPageProps = {
+  id: number
+}
+
+const PostPage = ({ id }: PostPageProps) => {
+  return <PostCell id={id} />
+}
+
+export default PostPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/Post/PostsPage/PostsPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/Post/PostsPage/PostsPage.tsx
new file mode 100644
index 000000000000..f5b3668d4024
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/Post/PostsPage/PostsPage.tsx
@@ -0,0 +1,7 @@
+import PostsCell from 'src/components/Post/PostsCell'
+
+const PostsPage = () => {
+  return <PostsCell />
+}
+
+export default PostsPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
new file mode 100644
index 000000000000..ebc171846e2a
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ProfilePage from './ProfilePage'
+
+const meta: Meta<typeof ProfilePage> = {
+  component: ProfilePage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProfilePage>
+
+export const Primary: Story = {}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.test.tsx
new file mode 100644
index 000000000000..ef30ff78fed5
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.test.tsx
@@ -0,0 +1,21 @@
+import { render, waitFor, screen } from '@redwoodjs/testing/web'
+
+import ProfilePage from './ProfilePage'
+
+describe('ProfilePage', () => {
+  it('renders successfully', async () => {
+    mockCurrentUser({
+      email: 'danny@bazinga.com',
+      id: 84849020,
+      roles: 'BAZINGA',
+    })
+
+    await waitFor(async () => {
+      expect(() => {
+        render(<ProfilePage />)
+      }).not.toThrow()
+    })
+
+    expect(await screen.findByText('danny@bazinga.com')).toBeInTheDocument()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.tsx b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 000000000000..49911999021d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,55 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+import { useAuth } from 'src/auth'
+
+const ProfilePage = () => {
+  const { currentUser, isAuthenticated, hasRole, loading } = useAuth()
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  return (
+    <>
+      <Metadata title="Profile" description="Profile page" og />
+
+      <h1 className="text-2xl">Profile</h1>
+
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>ID</td>
+            <td>{currentUser.id}</td>
+          </tr>
+          <tr>
+            <td>ROLES</td>
+            <td>{currentUser.roles}</td>
+          </tr>
+          <tr>
+            <td>EMAIL</td>
+            <td>{currentUser.email}</td>
+          </tr>
+
+          <tr key="isAuthenticated">
+            <td>isAuthenticated</td>
+            <td>{JSON.stringify(isAuthenticated)}</td>
+          </tr>
+
+          <tr key="hasRole">
+            <td>Is Admin</td>
+            <td>{JSON.stringify(hasRole('ADMIN'))}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+export default ProfilePage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
new file mode 100644
index 000000000000..191b39d43231
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from 'react'
+
+import {
+  Form,
+  Label,
+  PasswordField,
+  Submit,
+  FieldError,
+} from '@redwoodjs/forms'
+import { navigate, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
+  const { isAuthenticated, reauthenticate, validateResetToken, resetPassword } =
+    useAuth()
+  const [enabled, setEnabled] = useState(true)
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  useEffect(() => {
+    const validateToken = async () => {
+      const response = await validateResetToken(resetToken)
+      if (response.error) {
+        setEnabled(false)
+        toast.error(response.error)
+      } else {
+        setEnabled(true)
+      }
+    }
+    validateToken()
+  }, [resetToken, validateResetToken])
+
+  const passwordRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    passwordRef.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await resetPassword({
+      resetToken,
+      password: data.password,
+    })
+
+    if (response.error) {
+      toast.error(response.error)
+    } else {
+      toast.success('Password changed!')
+      await reauthenticate()
+      navigate(routes.login())
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Reset Password" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">
+                Reset Password
+              </h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <div className="text-left">
+                    <Label
+                      name="password"
+                      className="rw-label"
+                      errorClassName="rw-label rw-label-error"
+                    >
+                      New Password
+                    </Label>
+                    <PasswordField
+                      name="password"
+                      autoComplete="new-password"
+                      className="rw-input"
+                      errorClassName="rw-input rw-input-error"
+                      disabled={!enabled}
+                      ref={passwordRef}
+                      validation={{
+                        required: {
+                          value: true,
+                          message: 'New Password is required',
+                        },
+                      }}
+                    />
+
+                    <FieldError name="password" className="rw-field-error" />
+                  </div>
+
+                  <div className="rw-button-group">
+                    <Submit
+                      className="rw-button rw-button-blue"
+                      disabled={!enabled}
+                    >
+                      Submit
+                    </Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default ResetPasswordPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/SignupPage/SignupPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/SignupPage/SignupPage.tsx
new file mode 100644
index 000000000000..d92e41baeeb1
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/SignupPage/SignupPage.tsx
@@ -0,0 +1,148 @@
+import { useRef } from 'react'
+import { useEffect } from 'react'
+
+import {
+  Form,
+  Label,
+  TextField,
+  PasswordField,
+  FieldError,
+  Submit,
+} from '@redwoodjs/forms'
+import { Link, navigate, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const SignupPage = () => {
+  const { isAuthenticated, signUp } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  // focus on username box on page load
+  const usernameRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    usernameRef.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await signUp({
+      username: data.username,
+      password: data.password,
+      'full-name': data['full-name'],
+    })
+
+    if (response.message) {
+      toast(response.message)
+    } else if (response.error) {
+      toast.error(response.error)
+    } else {
+      // user is signed in automatically
+      toast.success('Welcome!')
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Signup" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">Signup</h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="username"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Username
+                  </Label>
+                  <TextField
+                    name="username"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={usernameRef}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Username is required',
+                      },
+                    }}
+                  />
+                  <FieldError name="username" className="rw-field-error" />
+
+                  <Label
+                    name="password"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Password
+                  </Label>
+                  <PasswordField
+                    name="password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    autoComplete="current-password"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Password is required',
+                      },
+                    }}
+                  />
+                  <FieldError name="password" className="rw-field-error" />
+
+                  <Label
+                    name="full-name"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Full Name
+                  </Label>
+                  <TextField
+                    name="full-name"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Full Name is required',
+                      },
+                    }}
+                  />
+                  <FieldError name="full-name" className="rw-field-error" />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">
+                      Sign Up
+                    </Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+          <div className="rw-login-link">
+            <span>Already have an account?</span>{' '}
+            <Link to={routes.login()} className="rw-link">
+              Log in!
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default SignupPage
diff --git a/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.routeHooks.ts b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.routeHooks.ts
new file mode 100644
index 000000000000..88a6dd0b6166
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.routeHooks.ts
@@ -0,0 +1,3 @@
+export async function routeParameters() {
+  return [{ id: 2 }]
+}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
new file mode 100644
index 000000000000..9b15c7347441
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import WaterfallPage from './WaterfallPage'
+
+const meta: Meta<typeof WaterfallPage> = {
+  component: WaterfallPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof WaterfallPage>
+
+export const Primary: Story = {
+  render: (args) => {
+    return <WaterfallPage id={42} {...args} />
+  },
+}
diff --git a/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.test.tsx b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.test.tsx
new file mode 100644
index 000000000000..3f0b4e17d567
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import WaterfallPage from './WaterfallPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('WaterfallPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<WaterfallPage id={42} />)
+    }).not.toThrow()
+  })
+})
diff --git a/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.tsx b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.tsx
new file mode 100644
index 000000000000..6c4f24a14c6d
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/pages/WaterfallPage/WaterfallPage.tsx
@@ -0,0 +1,11 @@
+import WaterfallBlogPostCell from 'src/components/WaterfallBlogPostCell'
+
+type WaterfallPageProps = {
+  id: number
+}
+
+const WaterfallPage = ({ id }: WaterfallPageProps) => (
+  <WaterfallBlogPostCell id={id} />
+)
+
+export default WaterfallPage
diff --git a/__fixtures__/fragment-test-project/web/src/scaffold.css b/__fixtures__/fragment-test-project/web/src/scaffold.css
new file mode 100644
index 000000000000..ffa9142b717f
--- /dev/null
+++ b/__fixtures__/fragment-test-project/web/src/scaffold.css
@@ -0,0 +1,243 @@
+.rw-scaffold {
+  @apply bg-white text-gray-600;
+}
+.rw-scaffold h1,
+.rw-scaffold h2 {
+  @apply m-0;
+}
+.rw-scaffold a {
+  @apply bg-transparent;
+}
+.rw-scaffold ul {
+  @apply m-0 p-0;
+}
+.rw-scaffold input:-ms-input-placeholder {
+  @apply text-gray-500;
+}
+.rw-scaffold input::-ms-input-placeholder {
+  @apply text-gray-500;
+}
+.rw-scaffold input::placeholder {
+  @apply text-gray-500;
+}
+.rw-header {
+  @apply flex justify-between px-8 py-4;
+}
+.rw-main {
+  @apply mx-4 pb-4;
+}
+.rw-segment {
+  @apply w-full overflow-hidden rounded-lg border border-gray-200;
+  scrollbar-color: theme('colors.zinc.400') transparent;
+}
+.rw-segment::-webkit-scrollbar {
+  height: initial;
+}
+.rw-segment::-webkit-scrollbar-track {
+  @apply rounded-b-[10px] rounded-t-none border-0 border-t border-solid border-gray-200 bg-transparent p-[2px];
+}
+.rw-segment::-webkit-scrollbar-thumb {
+  @apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
+}
+.rw-segment-header {
+  @apply bg-gray-200 px-4 py-3 text-gray-700;
+}
+.rw-segment-main {
+  @apply bg-gray-100 p-4;
+}
+.rw-link {
+  @apply text-blue-400 underline;
+}
+.rw-link:hover {
+  @apply text-blue-500;
+}
+.rw-forgot-link {
+  @apply mt-1 text-right text-xs text-gray-400 underline;
+}
+.rw-forgot-link:hover {
+  @apply text-blue-500;
+}
+.rw-heading {
+  @apply font-semibold;
+}
+.rw-heading.rw-heading-primary {
+  @apply text-xl;
+}
+.rw-heading.rw-heading-secondary {
+  @apply text-sm;
+}
+.rw-heading .rw-link {
+  @apply text-gray-600 no-underline;
+}
+.rw-heading .rw-link:hover {
+  @apply text-gray-900 underline;
+}
+.rw-cell-error {
+  @apply text-sm font-semibold;
+}
+.rw-form-wrapper {
+  @apply -mt-4 text-sm;
+}
+.rw-cell-error,
+.rw-form-error-wrapper {
+  @apply my-4 rounded border border-red-100 bg-red-50 p-4 text-red-600;
+}
+.rw-form-error-title {
+  @apply m-0 font-semibold;
+}
+.rw-form-error-list {
+  @apply mt-2 list-inside list-disc;
+}
+.rw-button {
+  @apply flex cursor-pointer justify-center rounded border-0 bg-gray-200 px-4 py-1 text-xs font-semibold uppercase leading-loose tracking-wide text-gray-500 no-underline transition duration-100;
+}
+.rw-button:hover {
+  @apply bg-gray-500 text-white;
+}
+.rw-button.rw-button-small {
+  @apply rounded-sm px-2 py-1 text-xs;
+}
+.rw-button.rw-button-green {
+  @apply bg-green-500 text-white;
+}
+.rw-button.rw-button-green:hover {
+  @apply bg-green-700;
+}
+.rw-button.rw-button-blue {
+  @apply bg-blue-500 text-white;
+}
+.rw-button.rw-button-blue:hover {
+  @apply bg-blue-700;
+}
+.rw-button.rw-button-red {
+  @apply bg-red-500 text-white;
+}
+.rw-button.rw-button-red:hover {
+  @apply bg-red-700 text-white;
+}
+.rw-button-icon {
+  @apply mr-1 text-xl leading-5;
+}
+.rw-button-group {
+  @apply mx-2 my-3 flex justify-center;
+}
+.rw-button-group .rw-button {
+  @apply mx-1;
+}
+.rw-form-wrapper .rw-button-group {
+  @apply mt-8;
+}
+.rw-label {
+  @apply mt-6 block text-left font-semibold text-gray-600;
+}
+.rw-label.rw-label-error {
+  @apply text-red-600;
+}
+.rw-input {
+  @apply mt-2 block w-full rounded border border-gray-200 bg-white p-2 outline-none;
+}
+.rw-check-radio-items {
+  @apply flex justify-items-center;
+}
+.rw-check-radio-item-none {
+  @apply text-gray-600;
+}
+.rw-input[type='checkbox'],
+.rw-input[type='radio'] {
+  @apply ml-0 mr-1 mt-1 inline w-4;
+}
+.rw-input:focus {
+  @apply border-gray-400;
+}
+.rw-input-error {
+  @apply border-red-600 text-red-600;
+}
+.rw-input-error:focus {
+  @apply border-red-600 outline-none;
+  box-shadow: 0 0 5px #c53030;
+}
+.rw-field-error {
+  @apply mt-1 block text-xs font-semibold uppercase text-red-600;
+}
+.rw-table-wrapper-responsive {
+  @apply overflow-x-auto;
+}
+.rw-table-wrapper-responsive .rw-table {
+  min-width: 48rem;
+}
+.rw-table {
+  @apply w-full text-sm;
+}
+.rw-table th,
+.rw-table td {
+  @apply p-3;
+}
+.rw-table td {
+  @apply bg-white text-gray-900;
+}
+.rw-table tr:nth-child(odd) td,
+.rw-table tr:nth-child(odd) th {
+  @apply bg-gray-50;
+}
+.rw-table thead tr {
+  @apply bg-gray-200 text-gray-600;
+}
+.rw-table th {
+  @apply text-left font-semibold;
+}
+.rw-table thead th {
+  @apply text-left;
+}
+.rw-table tbody th {
+  @apply text-right;
+}
+@media (min-width: 768px) {
+  .rw-table tbody th {
+    @apply w-1/5;
+  }
+}
+.rw-table tbody tr {
+  @apply border-t border-gray-200;
+}
+.rw-table input {
+  @apply ml-0;
+}
+.rw-table-actions {
+  @apply flex h-4 items-center justify-end pr-1;
+}
+.rw-table-actions .rw-button {
+  @apply bg-transparent;
+}
+.rw-table-actions .rw-button:hover {
+  @apply bg-gray-500 text-white;
+}
+.rw-table-actions .rw-button-blue {
+  @apply text-blue-500;
+}
+.rw-table-actions .rw-button-blue:hover {
+  @apply bg-blue-500 text-white;
+}
+.rw-table-actions .rw-button-red {
+  @apply text-red-600;
+}
+.rw-table-actions .rw-button-red:hover {
+  @apply bg-red-600 text-white;
+}
+.rw-text-center {
+  @apply text-center;
+}
+.rw-login-container {
+  @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
+}
+.rw-login-container .rw-form-wrapper {
+  @apply w-full text-center;
+}
+.rw-login-link {
+  @apply mt-4 w-full text-center text-sm text-gray-600;
+}
+.rw-webauthn-wrapper {
+  @apply mx-4 mt-6 leading-6;
+}
+.rw-webauthn-wrapper h2 {
+  @apply mb-4 text-xl font-bold;
+}
diff --git a/__fixtures__/fragment-test-project/web/tsconfig.json b/__fixtures__/fragment-test-project/web/tsconfig.json
index 8b5649abe5a4..b6b53c03d1f4 100644
--- a/__fixtures__/fragment-test-project/web/tsconfig.json
+++ b/__fixtures__/fragment-test-project/web/tsconfig.json
@@ -25,12 +25,13 @@
       "types/*": ["./types/*", "../types/*"],
       "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
     },
-    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
-    "types": ["jest", "@testing-library/jest-dom"],
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types", "../node_modules/@testing-library"],
+    "types": ["jest", "jest-dom"],
     "jsx": "preserve"
   },
   "include": [
     "src",
+    "config",
     "../.redwood/types/includes/all-*",
     "../.redwood/types/includes/web-*",
     "../types",
diff --git a/__fixtures__/fragment-test-project/web/types/graphql.d.ts b/__fixtures__/fragment-test-project/web/types/graphql.d.ts
index 04701b267972..382f3efb64bf 100644
--- a/__fixtures__/fragment-test-project/web/types/graphql.d.ts
+++ b/__fixtures__/fragment-test-project/web/types/graphql.d.ts
@@ -19,6 +19,51 @@ export type Scalars = {
   Time: string;
 };
 
+export type Contact = {
+  __typename?: 'Contact';
+  createdAt: Scalars['DateTime'];
+  email: Scalars['String'];
+  id: Scalars['Int'];
+  message: Scalars['String'];
+  name: Scalars['String'];
+};
+
+export type CreateContactInput = {
+  email: Scalars['String'];
+  message: Scalars['String'];
+  name: Scalars['String'];
+};
+
+export type CreatePostInput = {
+  authorId: Scalars['Int'];
+  body: Scalars['String'];
+  title: Scalars['String'];
+};
+
+export type CreateProduceInput = {
+  isPickled?: InputMaybe<Scalars['Boolean']>;
+  isSeedless?: InputMaybe<Scalars['Boolean']>;
+  name: Scalars['String'];
+  nutrients?: InputMaybe<Scalars['String']>;
+  price: Scalars['Int'];
+  quantity: Scalars['Int'];
+  region: Scalars['String'];
+  ripenessIndicators?: InputMaybe<Scalars['String']>;
+  stallId: Scalars['String'];
+  vegetableFamily?: InputMaybe<Scalars['String']>;
+};
+
+export type CreateStallInput = {
+  name: Scalars['String'];
+  stallNumber: Scalars['String'];
+};
+
+export type CreateUserInput = {
+  email: Scalars['String'];
+  fullName: Scalars['String'];
+  roles?: InputMaybe<Scalars['String']>;
+};
+
 export type Fruit = Grocery & {
   __typename?: 'Fruit';
   id: Scalars['ID'];
@@ -46,21 +91,140 @@ export type Grocery = {
   stall: Stall;
 };
 
+export type Mutation = {
+  __typename?: 'Mutation';
+  createContact?: Maybe<Contact>;
+  createPost: Post;
+  createProduce: Produce;
+  createStall: Stall;
+  deleteContact: Contact;
+  deletePost: Post;
+  deleteProduce: Produce;
+  deleteStall: Stall;
+  updateContact: Contact;
+  updatePost: Post;
+  updateProduce: Produce;
+  updateStall: Stall;
+};
+
+
+export type MutationcreateContactArgs = {
+  input: CreateContactInput;
+};
+
+
+export type MutationcreatePostArgs = {
+  input: CreatePostInput;
+};
+
+
+export type MutationcreateProduceArgs = {
+  input: CreateProduceInput;
+};
+
+
+export type MutationcreateStallArgs = {
+  input: CreateStallInput;
+};
+
+
+export type MutationdeleteContactArgs = {
+  id: Scalars['Int'];
+};
+
+
+export type MutationdeletePostArgs = {
+  id: Scalars['Int'];
+};
+
+
+export type MutationdeleteProduceArgs = {
+  id: Scalars['String'];
+};
+
+
+export type MutationdeleteStallArgs = {
+  id: Scalars['String'];
+};
+
+
+export type MutationupdateContactArgs = {
+  id: Scalars['Int'];
+  input: UpdateContactInput;
+};
+
+
+export type MutationupdatePostArgs = {
+  id: Scalars['Int'];
+  input: UpdatePostInput;
+};
+
+
+export type MutationupdateProduceArgs = {
+  id: Scalars['String'];
+  input: UpdateProduceInput;
+};
+
+
+export type MutationupdateStallArgs = {
+  id: Scalars['String'];
+  input: UpdateStallInput;
+};
+
+export type Post = {
+  __typename?: 'Post';
+  author: User;
+  authorId: Scalars['Int'];
+  body: Scalars['String'];
+  createdAt: Scalars['DateTime'];
+  id: Scalars['Int'];
+  title: Scalars['String'];
+};
+
+export type Produce = {
+  __typename?: 'Produce';
+  id: Scalars['String'];
+  isPickled?: Maybe<Scalars['Boolean']>;
+  isSeedless?: Maybe<Scalars['Boolean']>;
+  name: Scalars['String'];
+  nutrients?: Maybe<Scalars['String']>;
+  price: Scalars['Int'];
+  quantity: Scalars['Int'];
+  region: Scalars['String'];
+  ripenessIndicators?: Maybe<Scalars['String']>;
+  stall: Stall;
+  stallId: Scalars['String'];
+  vegetableFamily?: Maybe<Scalars['String']>;
+};
+
 /** About the Redwood queries. */
 export type Query = {
   __typename?: 'Query';
+  contact?: Maybe<Contact>;
+  contacts: Array<Contact>;
   fruitById?: Maybe<Fruit>;
   fruits: Array<Fruit>;
   groceries: Array<Groceries>;
+  post?: Maybe<Post>;
+  posts: Array<Post>;
+  produce?: Maybe<Produce>;
+  produces: Array<Produce>;
   /** Fetches the Redwood root schema. */
   redwood?: Maybe<Redwood>;
-  stallById?: Maybe<Stall>;
+  stall?: Maybe<Stall>;
   stalls: Array<Stall>;
+  user?: Maybe<User>;
   vegetableById?: Maybe<Vegetable>;
   vegetables: Array<Vegetable>;
 };
 
 
+/** About the Redwood queries. */
+export type QuerycontactArgs = {
+  id: Scalars['Int'];
+};
+
+
 /** About the Redwood queries. */
 export type QueryfruitByIdArgs = {
   id: Scalars['ID'];
@@ -68,8 +232,26 @@ export type QueryfruitByIdArgs = {
 
 
 /** About the Redwood queries. */
-export type QuerystallByIdArgs = {
-  id: Scalars['ID'];
+export type QuerypostArgs = {
+  id: Scalars['Int'];
+};
+
+
+/** About the Redwood queries. */
+export type QueryproduceArgs = {
+  id: Scalars['String'];
+};
+
+
+/** About the Redwood queries. */
+export type QuerystallArgs = {
+  id: Scalars['String'];
+};
+
+
+/** About the Redwood queries. */
+export type QueryuserArgs = {
+  id: Scalars['Int'];
 };
 
 
@@ -95,11 +277,55 @@ export type Redwood = {
 
 export type Stall = {
   __typename?: 'Stall';
-  fruits?: Maybe<Array<Maybe<Fruit>>>;
-  id: Scalars['ID'];
+  id: Scalars['String'];
   name: Scalars['String'];
+  produce: Array<Maybe<Produce>>;
   stallNumber: Scalars['String'];
-  vegetables?: Maybe<Array<Maybe<Vegetable>>>;
+};
+
+export type UpdateContactInput = {
+  email?: InputMaybe<Scalars['String']>;
+  message?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdatePostInput = {
+  authorId?: InputMaybe<Scalars['Int']>;
+  body?: InputMaybe<Scalars['String']>;
+  title?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdateProduceInput = {
+  isPickled?: InputMaybe<Scalars['Boolean']>;
+  isSeedless?: InputMaybe<Scalars['Boolean']>;
+  name?: InputMaybe<Scalars['String']>;
+  nutrients?: InputMaybe<Scalars['String']>;
+  price?: InputMaybe<Scalars['Int']>;
+  quantity?: InputMaybe<Scalars['Int']>;
+  region?: InputMaybe<Scalars['String']>;
+  ripenessIndicators?: InputMaybe<Scalars['String']>;
+  stallId?: InputMaybe<Scalars['String']>;
+  vegetableFamily?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdateStallInput = {
+  name?: InputMaybe<Scalars['String']>;
+  stallNumber?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdateUserInput = {
+  email?: InputMaybe<Scalars['String']>;
+  fullName?: InputMaybe<Scalars['String']>;
+  roles?: InputMaybe<Scalars['String']>;
+};
+
+export type User = {
+  __typename?: 'User';
+  email: Scalars['String'];
+  fullName: Scalars['String'];
+  id: Scalars['Int'];
+  posts: Array<Maybe<Post>>;
+  roles?: Maybe<Scalars['String']>;
 };
 
 export type Vegetable = Grocery & {
@@ -117,7 +343,118 @@ export type Vegetable = Grocery & {
   vegetableFamily?: Maybe<Scalars['String']>;
 };
 
-export type GetGroceriesVariables = Exact<{ [key: string]: never; }>;
+export type FindAuthorQueryVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type FindAuthorQuery = { __typename?: 'Query', author?: { __typename?: 'User', email: string, fullName: string } | null };
+
+export type FindBlogPostQueryVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type FindBlogPostQuery = { __typename?: 'Query', blogPost?: { __typename?: 'Post', id: number, title: string, body: string, createdAt: string, author: { __typename?: 'User', email: string, fullName: string } } | null };
+
+export type BlogPostsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type BlogPostsQuery = { __typename?: 'Query', blogPosts: Array<{ __typename?: 'Post', id: number, title: string, body: string, createdAt: string, author: { __typename?: 'User', email: string, fullName: string } }> };
+
+export type DeleteContactMutationVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type DeleteContactMutation = { __typename?: 'Mutation', deleteContact: { __typename?: 'Contact', id: number } };
+
+export type FindContactByIdVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type FindContactById = { __typename?: 'Query', contact?: { __typename?: 'Contact', id: number, name: string, email: string, message: string, createdAt: string } | null };
+
+export type FindContactsVariables = Exact<{ [key: string]: never; }>;
+
+
+export type FindContacts = { __typename?: 'Query', contacts: Array<{ __typename?: 'Contact', id: number, name: string, email: string, message: string, createdAt: string }> };
+
+export type EditContactByIdVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type EditContactById = { __typename?: 'Query', contact?: { __typename?: 'Contact', id: number, name: string, email: string, message: string, createdAt: string } | null };
+
+export type UpdateContactMutationVariables = Exact<{
+  id: Scalars['Int'];
+  input: UpdateContactInput;
+}>;
+
+
+export type UpdateContactMutation = { __typename?: 'Mutation', updateContact: { __typename?: 'Contact', id: number, name: string, email: string, message: string, createdAt: string } };
+
+export type CreateContactMutationVariables = Exact<{
+  input: CreateContactInput;
+}>;
+
+
+export type CreateContactMutation = { __typename?: 'Mutation', createContact?: { __typename?: 'Contact', id: number } | null };
+
+export type Fruit_info = { __typename?: 'Fruit', id: string, name: string, isSeedless?: boolean | null, ripenessIndicators?: string | null, stall: { __typename?: 'Stall', id: string, name: string } };
+
+export type EditPostByIdVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type EditPostById = { __typename?: 'Query', post?: { __typename?: 'Post', id: number, title: string, body: string, authorId: number, createdAt: string } | null };
+
+export type UpdatePostMutationVariables = Exact<{
+  id: Scalars['Int'];
+  input: UpdatePostInput;
+}>;
+
+
+export type UpdatePostMutation = { __typename?: 'Mutation', updatePost: { __typename?: 'Post', id: number, title: string, body: string, authorId: number, createdAt: string } };
+
+export type CreatePostMutationVariables = Exact<{
+  input: CreatePostInput;
+}>;
+
+
+export type CreatePostMutation = { __typename?: 'Mutation', createPost: { __typename?: 'Post', id: number } };
+
+export type DeletePostMutationVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type DeletePostMutation = { __typename?: 'Mutation', deletePost: { __typename?: 'Post', id: number } };
+
+export type FindPostByIdVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type FindPostById = { __typename?: 'Query', post?: { __typename?: 'Post', id: number, title: string, body: string, authorId: number, createdAt: string } | null };
+
+export type FindPostsVariables = Exact<{ [key: string]: never; }>;
+
+
+export type FindPosts = { __typename?: 'Query', posts: Array<{ __typename?: 'Post', id: number, title: string, body: string, authorId: number, createdAt: string }> };
+
+export type Produce_info = { __typename?: 'Produce', id: string, name: string };
+
+export type Stall_info = { __typename?: 'Stall', id: string, name: string };
+
+export type Vegetable_info = { __typename?: 'Vegetable', id: string, name: string, vegetableFamily?: string | null, isPickled?: boolean | null, stall: { __typename?: 'Stall', id: string, name: string } };
+
+export type FindWaterfallBlogPostQueryVariables = Exact<{
+  id: Scalars['Int'];
+}>;
 
 
-export type GetGroceries = { __typename?: 'Query', groceries: Array<{ __typename?: 'Fruit', id: string, name: string, isSeedless?: boolean | null, ripenessIndicators?: string | null } | { __typename?: 'Vegetable', id: string, name: string, vegetableFamily?: string | null, isPickled?: boolean | null }> };
+export type FindWaterfallBlogPostQuery = { __typename?: 'Query', waterfallBlogPost?: { __typename?: 'Post', id: number, title: string, body: string, authorId: number, createdAt: string } | null };
diff --git a/__fixtures__/fragment-test-project/web/types/possible-types.ts b/__fixtures__/fragment-test-project/web/types/possible-types.ts
deleted file mode 100644
index 79a376225982..000000000000
--- a/__fixtures__/fragment-test-project/web/types/possible-types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-
-      export interface PossibleTypesResultData {
-        possibleTypes: {
-          [key: string]: string[]
-        }
-      }
-      const result: PossibleTypesResultData = {
-  "possibleTypes": {
-    "Groceries": [
-      "Fruit",
-      "Vegetable"
-    ],
-    "Grocery": [
-      "Fruit",
-      "Vegetable"
-    ]
-  }
-};
-      export default result;
-    
\ No newline at end of file
diff --git a/__fixtures__/fragment-test-project/web/vite.config.ts b/__fixtures__/fragment-test-project/web/vite.config.ts
index ddeb06d9a1cf..54799ce1aa28 100644
--- a/__fixtures__/fragment-test-project/web/vite.config.ts
+++ b/__fixtures__/fragment-test-project/web/vite.config.ts
@@ -1,15 +1,16 @@
-import dns from 'dns';
-import type { UserConfig } from 'vite';
-import { defineConfig } from 'vite';
-
-// See: https://vitejs.dev/config/server-options.html#server-host
-// So that Vite will load on local instead of 127.0.0.1
-dns.setDefaultResultOrder('verbatim');
-import redwood from '@redwoodjs/vite';
+import dns from 'dns'
+
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
+import redwood from '@redwoodjs/vite'
+
+// So that Vite will load on localhost instead of `127.0.0.1`.
+// See: https://vitejs.dev/config/server-options.html#server-host.
+dns.setDefaultResultOrder('verbatim')
+
 const viteConfig: UserConfig = {
   plugins: [redwood()],
-  optimizeDeps: {
-    force: true
-  }
-};
-export default defineConfig(viteConfig);
\ No newline at end of file
+}
+
+export default defineConfig(viteConfig)
diff --git a/__fixtures__/test-project/scripts/seed.ts b/__fixtures__/test-project/scripts/seed.ts
index 1b3aea0bf565..dcbfc7a9abe9 100644
--- a/__fixtures__/test-project/scripts/seed.ts
+++ b/__fixtures__/test-project/scripts/seed.ts
@@ -20,11 +20,11 @@ export default async () => {
       },
     ]
 
-    await Promise.all(
-      users.map(async (user) => {
-        const newUser = await db.user.create({ data: user })
-      })
-    )
+    if ((await db.user.count()) === 0) {
+      await Promise.all(users.map((user) => db.user.create({ data: user })))
+    } else {
+      console.log('Users already seeded')
+    }
   } catch (error) {
     console.error(error)
   }
@@ -48,13 +48,17 @@ export default async () => {
       },
     ]
 
-    await Promise.all(
-      posts.map(async (post) => {
-        const newPost = await db.post.create({ data: post })
+    if ((await db.post.count()) === 0) {
+      await Promise.all(
+        posts.map(async (post) => {
+          const newPost = await db.post.create({ data: post })
 
-        console.log(newPost)
-      })
-    )
+          console.log(newPost)
+        })
+      )
+    } else {
+      console.log('Posts already seeded')
+    }
   } catch (error) {
     console.error(error)
   }
diff --git a/package.json b/package.json
index 40df68ed87aa..1b8ac389f7bd 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "project:sync": "node ./tasks/framework-tools/frameworkSyncToProject.mjs",
     "project:tarsync": "node ./tasks/framework-tools/tarsync.mjs",
     "rebuild-test-project-fixture": "tsx ./tasks/test-project/rebuild-test-project-fixture.ts",
+    "rebuild-fragments-test-project-fixture": "tsx ./tasks/test-project/rebuild-fragments-test-project-fixture.ts",
     "release": "node ./tasks/release/release.mjs",
     "release:compare": "node ./tasks/release/compare/compare.mjs",
     "release:notes": "node ./tasks/release/generateReleaseNotes.mjs",
diff --git a/packages/cli/src/commands/buildHandler.js b/packages/cli/src/commands/buildHandler.js
index 78787ab4ce71..5c801f2dd2b4 100644
--- a/packages/cli/src/commands/buildHandler.js
+++ b/packages/cli/src/commands/buildHandler.js
@@ -8,6 +8,7 @@ import terminalLink from 'terminal-link'
 
 import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
 import { buildApi } from '@redwoodjs/internal/dist/build/api'
+import { generate } from '@redwoodjs/internal/dist/generate/generate'
 import { loadAndValidateSdls } from '@redwoodjs/internal/dist/validateSchema'
 import { detectPrerenderRoutes } from '@redwoodjs/prerender/detection'
 import { timedTelemetry } from '@redwoodjs/telemetry'
@@ -32,7 +33,11 @@ export const handler = async ({
     prisma,
     prerender,
   })
+
   const rwjsPaths = getPaths()
+  const rwjsConfig = getConfig()
+  const useFragments = rwjsConfig.graphql?.fragments
+  const useTrustedDocuments = rwjsConfig.graphql?.trustedDocuments
 
   if (performance) {
     console.log('Measuring Web Build Performance...')
@@ -75,6 +80,20 @@ export const handler = async ({
         })
       },
     },
+    // If using GraphQL Fragments or Trusted Documents, then we need to use
+    // codegen to generate the types needed for possible types and the
+    // trusted document store hashes
+    (useFragments || useTrustedDocuments) && {
+      title: `Generating types needed for ${[
+        useFragments && 'GraphQL Fragments',
+        useTrustedDocuments && 'Trusted Documents',
+      ]
+        .filter(Boolean)
+        .join(' and ')} support...`,
+      task: async () => {
+        await generate()
+      },
+    },
     side.includes('api') && {
       title: 'Verifying graphql schema...',
       task: loadAndValidateSdls,
diff --git a/packages/create-redwood-app/templates/js/web/src/App.jsx b/packages/create-redwood-app/templates/js/web/src/App.jsx
index 9216dd846148..97fb5e02520d 100644
--- a/packages/create-redwood-app/templates/js/web/src/App.jsx
+++ b/packages/create-redwood-app/templates/js/web/src/App.jsx
@@ -1,7 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import possibleTypes from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -10,13 +9,7 @@ import './index.css'
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider
-        graphQLClientConfig={{
-          cacheConfig: {
-            ...possibleTypes,
-          },
-        }}
-      >
+      <RedwoodApolloProvider>
         <Routes />
       </RedwoodApolloProvider>
     </RedwoodProvider>
diff --git a/packages/create-redwood-app/templates/js/web/src/graphql/possibleTypes.js b/packages/create-redwood-app/templates/js/web/src/graphql/possibleTypes.js
deleted file mode 100644
index 366e19a8aeae..000000000000
--- a/packages/create-redwood-app/templates/js/web/src/graphql/possibleTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const result = {
-  possibleTypes: {},
-}
-
-export default result
diff --git a/packages/create-redwood-app/templates/ts/web/src/App.tsx b/packages/create-redwood-app/templates/ts/web/src/App.tsx
index 9216dd846148..97fb5e02520d 100644
--- a/packages/create-redwood-app/templates/ts/web/src/App.tsx
+++ b/packages/create-redwood-app/templates/ts/web/src/App.tsx
@@ -1,7 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import possibleTypes from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -10,13 +9,7 @@ import './index.css'
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider
-        graphQLClientConfig={{
-          cacheConfig: {
-            ...possibleTypes,
-          },
-        }}
-      >
+      <RedwoodApolloProvider>
         <Routes />
       </RedwoodApolloProvider>
     </RedwoodProvider>
diff --git a/packages/create-redwood-app/templates/ts/web/src/graphql/possibleTypes.ts b/packages/create-redwood-app/templates/ts/web/src/graphql/possibleTypes.ts
deleted file mode 100644
index a8d476e9029c..000000000000
--- a/packages/create-redwood-app/templates/ts/web/src/graphql/possibleTypes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface PossibleTypesResultData {
-  possibleTypes: {
-    [key: string]: string[]
-  }
-}
-
-const result: PossibleTypesResultData = {
-  possibleTypes: {},
-}
-
-export default result
diff --git a/packages/create-redwood-app/tests/templates.test.js b/packages/create-redwood-app/tests/templates.test.js
index f8ef6ddf4f6c..667011a2c6f8 100644
--- a/packages/create-redwood-app/tests/templates.test.js
+++ b/packages/create-redwood-app/tests/templates.test.js
@@ -70,8 +70,6 @@ describe('TS template', () => {
         "/web/src/components",
         "/web/src/components/.keep",
         "/web/src/entry.client.tsx",
-        "/web/src/graphql",
-        "/web/src/graphql/possibleTypes.ts",
         "/web/src/index.css",
         "/web/src/index.html",
         "/web/src/layouts",
@@ -156,8 +154,6 @@ describe('JS template', () => {
         "/web/src/components",
         "/web/src/components/.keep",
         "/web/src/entry.client.jsx",
-        "/web/src/graphql",
-        "/web/src/graphql/possibleTypes.js",
         "/web/src/index.css",
         "/web/src/index.html",
         "/web/src/layouts",
diff --git a/packages/internal/src/generate/clientPreset.ts b/packages/internal/src/generate/clientPreset.ts
index 4b42b708ddd9..c50f24b14822 100644
--- a/packages/internal/src/generate/clientPreset.ts
+++ b/packages/internal/src/generate/clientPreset.ts
@@ -31,6 +31,7 @@ export const generateClientPreset = async () => {
   const config: CodegenConfig = {
     schema: getPaths().generated.schema,
     documents: documentsGlob,
+    silent: true, // Plays nicely with cli task output
     generates: {
       [`${getPaths().web.src}/graphql/`]: {
         preset: 'client',
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index 7580fabff23c..e636a7166df1 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -268,7 +268,6 @@ export default function redwoodPluginVite(): PluginOption[] {
     },
     // We can remove when streaming is stable
     rwConfig.experimental.streamingSsr.enabled && swapApolloProvider(),
-    // -----------------
     handleJsAsJsx(),
     // Remove the splash-page from the bundle.
     removeFromBundle([
diff --git a/packages/web/src/apollo/index.tsx b/packages/web/src/apollo/index.tsx
index c5e3c9f17c32..4f303e22c8cc 100644
--- a/packages/web/src/apollo/index.tsx
+++ b/packages/web/src/apollo/index.tsx
@@ -9,6 +9,7 @@ import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { fetch as crossFetch } from '@whatwg-node/fetch'
 import { print } from 'graphql/language/printer'
+
 // Note: Importing directly from `apollo/client` doesn't work properly in Storybook.
 const {
   ApolloProvider,
@@ -364,6 +365,7 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
 
   const cache = new InMemoryCache({
     fragments: fragmentRegistry,
+    possibleTypes: cacheConfig?.possibleTypes,
     ...cacheConfig,
   }).restore(globalThis?.__REDWOOD__APOLLO_STATE ?? {})
 
diff --git a/packages/web/src/components/cell/createCell.tsx b/packages/web/src/components/cell/createCell.tsx
index 41ffd5d9dc34..85d7c0d95df5 100644
--- a/packages/web/src/components/cell/createCell.tsx
+++ b/packages/web/src/components/cell/createCell.tsx
@@ -1,3 +1,4 @@
+import { fragmentRegistry } from '../../apollo'
 import { getOperationName } from '../../graphql'
 /**
  * This is part of how we let users swap out their GraphQL client while staying compatible with Cells.
@@ -67,6 +68,7 @@ function createNonSuspendingCell<
       /* eslint-disable-next-line react-hooks/rules-of-hooks */
       const { queryCache } = useCellCacheContext()
       const operationName = getOperationName(query)
+      const transformedQuery = fragmentRegistry.transform(query)
 
       let cacheKey
 
@@ -99,7 +101,7 @@ function createNonSuspendingCell<
         } else {
           queryCache[cacheKey] ||
             (queryCache[cacheKey] = {
-              query,
+              query: transformedQuery,
               variables: options.variables,
               hasProcessed: false,
             })
diff --git a/tasks/smoke-tests/fragments-dev/playwright.config.ts b/tasks/smoke-tests/fragments-dev/playwright.config.ts
new file mode 100644
index 000000000000..9ba51b028b88
--- /dev/null
+++ b/tasks/smoke-tests/fragments-dev/playwright.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from '@playwright/test'
+
+import { basePlaywrightConfig } from '../basePlaywright.config'
+
+// See https://playwright.dev/docs/test-configuration#global-configuration
+export default defineConfig({
+  ...basePlaywrightConfig,
+
+  timeout: 30_000 * 2,
+
+  use: {
+    baseURL: 'http://localhost:8910',
+  },
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: 'yarn redwood dev --no-generate --fwd="--no-open"',
+    cwd: process.env.REDWOOD_TEST_PROJECT_PATH,
+    // We wait for the api server to be ready instead of the web server
+    // because web starts much faster with Vite.
+    url: 'http://localhost:8911/graphql?query={redwood{version}}',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+})
diff --git a/tasks/smoke-tests/fragments-dev/tests/fragments.spec.ts b/tasks/smoke-tests/fragments-dev/tests/fragments.spec.ts
new file mode 100644
index 000000000000..71eee331a19c
--- /dev/null
+++ b/tasks/smoke-tests/fragments-dev/tests/fragments.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('Fragments', async ({ page }) => {
+  await page.goto('/groceries')
+
+  const strawberryChild = page.locator('text="Fruit Name: Strawberries"')
+  const fruitCard = page.locator('div').filter({ has: strawberryChild })
+  await expect(fruitCard.getByText('Fruit Name: Strawberries')).toBeVisible()
+  await expect(fruitCard.getByText('Stall Name: Pie Veggies')).toBeVisible()
+
+  const lettuceChild = page.locator('text="Vegetable Name: Lettuce"')
+  const vegetableCard = page.locator('div', { has: lettuceChild })
+  await expect(vegetableCard.getByText('Vegetable Name: Lettuce')).toBeVisible()
+  await expect(
+    vegetableCard.getByText('Stall Name: Salad Veggies')
+  ).toBeVisible()
+})
diff --git a/tasks/smoke-tests/fragments-serve/playwright.config.ts b/tasks/smoke-tests/fragments-serve/playwright.config.ts
new file mode 100644
index 000000000000..f3323ded09d4
--- /dev/null
+++ b/tasks/smoke-tests/fragments-serve/playwright.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from '@playwright/test'
+
+import { basePlaywrightConfig } from '../basePlaywright.config'
+
+// See https://playwright.dev/docs/test-configuration#global-configuration
+export default defineConfig({
+  ...basePlaywrightConfig,
+
+  use: {
+    baseURL: 'http://localhost:8910',
+  },
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: 'yarn redwood serve',
+    cwd: process.env.REDWOOD_TEST_PROJECT_PATH,
+    url: 'http://localhost:8910',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+})
diff --git a/tasks/smoke-tests/fragments-serve/tests/fragments.spec.ts b/tasks/smoke-tests/fragments-serve/tests/fragments.spec.ts
new file mode 100644
index 000000000000..71eee331a19c
--- /dev/null
+++ b/tasks/smoke-tests/fragments-serve/tests/fragments.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('Fragments', async ({ page }) => {
+  await page.goto('/groceries')
+
+  const strawberryChild = page.locator('text="Fruit Name: Strawberries"')
+  const fruitCard = page.locator('div').filter({ has: strawberryChild })
+  await expect(fruitCard.getByText('Fruit Name: Strawberries')).toBeVisible()
+  await expect(fruitCard.getByText('Stall Name: Pie Veggies')).toBeVisible()
+
+  const lettuceChild = page.locator('text="Vegetable Name: Lettuce"')
+  const vegetableCard = page.locator('div', { has: lettuceChild })
+  await expect(vegetableCard.getByText('Vegetable Name: Lettuce')).toBeVisible()
+  await expect(
+    vegetableCard.getByText('Stall Name: Salad Veggies')
+  ).toBeVisible()
+})
diff --git a/tasks/test-project/add-gql-fragments.ts b/tasks/test-project/add-gql-fragments.ts
new file mode 100755
index 000000000000..79cddc339350
--- /dev/null
+++ b/tasks/test-project/add-gql-fragments.ts
@@ -0,0 +1,29 @@
+/* eslint-env node, es6*/
+import path from 'node:path'
+
+import { hideBin } from 'yargs/helpers'
+import yargs from 'yargs/yargs'
+
+import { fragmentsTasks } from './tasks.js'
+
+const args = yargs(hideBin(process.argv))
+  .usage('Usage: $0 <project directory>')
+  .parseSync()
+
+/**
+ * This script takes a regular test-project, and adds some extra files/config
+ * so we can run e2e tests for fragments
+ */
+async function runCommand() {
+  const OUTPUT_PROJECT_PATH = path.resolve(String(args._))
+  const tasks = await fragmentsTasks(OUTPUT_PROJECT_PATH, {
+    verbose: true,
+  })
+
+  tasks.run().catch((err: unknown) => {
+    console.error(err)
+    process.exit(1)
+  })
+}
+
+runCommand()
diff --git a/tasks/test-project/codemods/groceriesPage.ts b/tasks/test-project/codemods/groceriesPage.ts
new file mode 100644
index 000000000000..802c2a930ca7
--- /dev/null
+++ b/tasks/test-project/codemods/groceriesPage.ts
@@ -0,0 +1,208 @@
+import type { API, FileInfo } from 'jscodeshift'
+
+const componentBlock = `{
+  const { data: groceryData, loading: groceryLoading } =
+    useQuery<GetGroceries>(GET_GROCERIES)
+  const { data: produceData, loading: produceLoading } =
+    useQuery<GetProduce>(GET_PRODUCE)
+
+  return (
+    <div className="m-12">
+      <Metadata title="Groceries" description="Groceries page" og />
+
+      <div className="grid auto-cols-auto gap-4 grid-cols-4">
+        {!groceryLoading &&
+          groceryData.groceries.map((fruit) => (
+            <FruitInfo key={fruit.id} id={fruit.id} />
+          ))}
+
+        {!groceryLoading &&
+          groceryData.groceries.map((vegetable) => (
+            <VegetableInfo key={vegetable.id} id={vegetable.id} />
+          ))}
+
+        {!produceLoading &&
+          produceData.produces?.map((produce) => (
+            <ProduceInfo key={produce.id} id={produce.id} />
+          ))}
+      </div>
+    </div>
+  )
+}`
+
+export default (file: FileInfo, api: API) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Replace
+  // import { Link, routes } from '@redwoodjs/router'
+  // with
+  // import type { GetGroceries, GetProduce } from 'types/graphql'
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'StringLiteral',
+        value: '@redwoodjs/router',
+      },
+    })
+    .replaceWith(
+      j.importDeclaration(
+        [
+          j.importSpecifier(j.identifier('GetGroceries')),
+          j.importSpecifier(j.identifier('GetProduce')),
+        ],
+        j.stringLiteral('types/graphql'),
+        'type'
+      )
+    )
+
+  // Replace
+  // import { Metadata } from '@redwoodjs/web'
+  // with
+  // import { Metadata, useQuery } from '@redwoodjs/web'
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'StringLiteral',
+        value: '@redwoodjs/web',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.specifiers?.push(j.importSpecifier(j.identifier('useQuery')))
+      return node
+    })
+
+  // Add
+  // import FruitInfo from 'src/components/FruitInfo'
+  // import ProduceInfo from 'src/components/ProduceInfo'
+  // import VegetableInfo from 'src/components/VegetableInfo'
+  // after
+  // import { Metadata, useQuery } from '@redwoodjs/web'
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'StringLiteral',
+        value: '@redwoodjs/web',
+      },
+    })
+    .insertAfter(() => {
+      return [
+        j.importDeclaration(
+          [j.importDefaultSpecifier(j.identifier('FruitInfo'))],
+          j.stringLiteral('src/components/FruitInfo')
+        ),
+        j.importDeclaration(
+          [j.importDefaultSpecifier(j.identifier('ProduceInfo'))],
+          j.stringLiteral('src/components/ProduceInfo')
+        ),
+        j.importDeclaration(
+          [j.importDefaultSpecifier(j.identifier('VegetableInfo'))],
+          j.stringLiteral('src/components/VegetableInfo')
+        ),
+      ]
+    })
+
+  // Add
+  // const GET_GROCERIES = gql`
+  //   query GetGroceries {
+  //     groceries {
+  //       ...Fruit_info
+  //       ...Vegetable_info
+  //     }
+  //   }
+  // `
+  // After
+  // import VegetableInfo from 'src/components/VegetableInfo'
+  const query = `
+  query GetGroceries {
+    groceries {
+      ...Fruit_info
+      ...Vegetable_info
+    }
+  }
+`
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'StringLiteral',
+        value: 'src/components/VegetableInfo',
+      },
+    })
+    .insertAfter(() => {
+      return j.variableDeclaration('const', [
+        j.variableDeclarator(
+          j.identifier('GET_GROCERIES'),
+          j.taggedTemplateExpression(
+            j.identifier('gql'),
+            j.templateLiteral(
+              [j.templateElement({ raw: query, cooked: query }, true)],
+              []
+            )
+          )
+        ),
+      ])
+    })
+
+  // Add
+  // const GET_PRODUCE = gql`
+  //   query GetProduce {
+  //     produces {
+  //       ...Produce_info
+  //     }
+  //   }
+  // `
+  // After
+  // const GET_GROCERIES = ...
+  const produceQuery = `
+  query GetProduce {
+    produces {
+      ...Produce_info
+    }
+  }
+`
+  root
+    .find(j.VariableDeclaration, {
+      kind: 'const',
+      declarations: [
+        {
+          id: {
+            type: 'Identifier',
+            name: 'GET_GROCERIES',
+          },
+        },
+      ],
+    })
+    .insertAfter(() => {
+      return j.variableDeclaration('const', [
+        j.variableDeclarator(
+          j.identifier('GET_PRODUCE'),
+          j.taggedTemplateExpression(
+            j.identifier('gql'),
+            j.templateLiteral(
+              [
+                j.templateElement(
+                  { raw: produceQuery, cooked: produceQuery },
+                  true
+                ),
+              ],
+              []
+            )
+          )
+        ),
+      ])
+    })
+
+  // Replace entire body of GroceriesPage component
+  root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'GroceriesPage',
+      },
+    })
+    .find(j.BlockStatement)
+    .replaceWith(j.identifier(componentBlock))
+
+  return root.toSource()
+}
diff --git a/tasks/test-project/codemods/models.js b/tasks/test-project/codemods/models.js
index 3dcf3b1a863d..46bb8ea12b4c 100644
--- a/tasks/test-project/codemods/models.js
+++ b/tasks/test-project/codemods/models.js
@@ -29,4 +29,30 @@ const user = `model User {
   posts               Post[]
 }`
 
-module.exports = { post, contact, user }
+const produce = `model Produce {
+  id                 String   @id @default(cuid())
+  name               String   @unique
+  quantity           Int
+  price              Int
+  nutrients          String?
+  region             String
+  /// Available only for fruits
+  isSeedless         Boolean?
+  /// Available only for fruits
+  ripenessIndicators String?
+  /// Available only for vegetables
+  vegetableFamily    String?
+  /// Available only for vegetables
+  isPickled          Boolean?
+  stall              Stall    @relation(fields: [stallId], references: [id], onDelete: Cascade)
+  stallId            String
+}`
+
+const stall = `model Stall {
+  id          String    @id @default(cuid())
+  name        String
+  stallNumber String    @unique
+  produce     Produce[]
+}`
+
+module.exports = { post, contact, user, produce, stall }
diff --git a/tasks/test-project/codemods/producesSdl.ts b/tasks/test-project/codemods/producesSdl.ts
new file mode 100644
index 000000000000..c2ef310ce476
--- /dev/null
+++ b/tasks/test-project/codemods/producesSdl.ts
@@ -0,0 +1,5 @@
+import type { FileInfo } from 'jscodeshift'
+
+export default (file: FileInfo) => {
+  return file.source.replaceAll('@requireAuth', '@skipAuth')
+}
diff --git a/tasks/test-project/codemods/seed.js b/tasks/test-project/codemods/seed.js
index 0f6970a1c432..58e3cca2d06e 100644
--- a/tasks/test-project/codemods/seed.js
+++ b/tasks/test-project/codemods/seed.js
@@ -17,11 +17,11 @@ const createPosts = `
       }
     ]
 
-    await Promise.all(
-      users.map(async (user) => {
-        const newUser = await db.user.create({ data: user })
-      })
-    )
+    if ((await db.user.count()) === 0) {
+      await Promise.all(users.map((user) => db.user.create({ data: user })))
+    } else {
+      console.log('Users already seeded')
+    }
   } catch (error) {
     console.error(error)
   }
@@ -45,13 +45,17 @@ const createPosts = `
       },
     ]
 
-    await Promise.all(
-      posts.map(async (post) => {
-        const newPost = await db.post.create({ data: post })
+    if ((await db.post.count()) === 0) {
+      await Promise.all(
+        posts.map(async (post) => {
+          const newPost = await db.post.create({ data: post })
 
-        console.log(newPost)
-      })
-    )
+          console.log(newPost)
+        })
+      )
+    } else {
+      console.log('Posts already seeded')
+    }
   } catch (error) {
     console.error(error)
   }
diff --git a/tasks/test-project/codemods/seedFragments.ts b/tasks/test-project/codemods/seedFragments.ts
new file mode 100644
index 000000000000..0d5abfa4ac8e
--- /dev/null
+++ b/tasks/test-project/codemods/seedFragments.ts
@@ -0,0 +1,83 @@
+import type { API, FileInfo } from 'jscodeshift'
+
+const seedFragmentData = `try {
+  const stalls = [
+    {
+      id: 'clr0zv6ow000012nvo6r09vog',
+      name: 'Salad Veggies',
+      stallNumber: '1',
+    },
+    {
+      id: 'clr0zvne2000112nvyhzf1ifk',
+      name: 'Pie Veggies',
+      stallNumber: '2',
+    },
+    {
+      id: 'clr0zvne3000212nv6boae9qw',
+      name: 'Root Veggies',
+      stallNumber: '3',
+    },
+  ]
+
+  if ((await db.stall.count()) === 0) {
+    await Promise.all(
+      stalls.map(async (stall) => {
+        const newStall = await db.stall.create({ data: stall })
+
+        console.log(newStall)
+      })
+    )
+  } else {
+    console.log('Stalls already seeded')
+  }
+
+  const produce = [
+    {
+      id: 'clr0zwyoq000312nvfsu1efcw',
+      name: 'Lettuce',
+      quantity: 10,
+      price: 2,
+      ripenessIndicators: null,
+      region: '',
+      isSeedless: false,
+      vegetableFamily: 'Asteraceae',
+      stallId: 'clr0zv6ow000012nvo6r09vog',
+    },
+    {
+      id: 'clr0zy32x000412nvsya5g8q0',
+      name: 'Strawberries',
+      quantity: 24,
+      price: 3,
+      ripenessIndicators: 'Vitamin C',
+      region: 'California',
+      isSeedless: false,
+      vegetableFamily: 'Soft',
+      stallId: 'clr0zvne2000112nvyhzf1ifk',
+    },
+  ]
+
+  if ((await db.produce.count()) === 0) {
+    await Promise.all(
+      produce.map(async (produce) => {
+        const newProduce = await db.produce.create({ data: produce })
+
+        console.log(newProduce)
+      })
+    )
+  } else {
+    console.log('Produce already seeded')
+  }
+} catch (error) {
+  console.error(error)
+}`
+
+export default (file: FileInfo, api: API) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  return root
+    .find(j.TryStatement)
+    .at(-1)
+    .insertBefore(seedFragmentData)
+    .toSource()
+}
diff --git a/tasks/test-project/rebuild-fragments-test-project-fixture.ts b/tasks/test-project/rebuild-fragments-test-project-fixture.ts
new file mode 100755
index 000000000000..acd94ef453b2
--- /dev/null
+++ b/tasks/test-project/rebuild-fragments-test-project-fixture.ts
@@ -0,0 +1,495 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import chalk from 'chalk'
+import fse from 'fs-extra'
+import { rimraf } from 'rimraf'
+import { hideBin } from 'yargs/helpers'
+import yargs from 'yargs/yargs'
+
+import { RedwoodTUI, ReactiveTUIContent, RedwoodStyling } from '@redwoodjs/tui'
+
+import {
+  addFrameworkDepsToProject,
+  copyFrameworkPackages,
+} from './frameworkLinking'
+import { webTasks, apiTasks, fragmentsTasks } from './tui-tasks'
+import { isAwaitable } from './typing'
+import type { TuiTaskDef } from './typing'
+import {
+  getExecaOptions as utilGetExecaOptions,
+  updatePkgJsonScripts,
+  ExecaError,
+  exec,
+} from './util'
+
+const args = yargs(hideBin(process.argv))
+  .usage('Usage: $0 [option]')
+  .option('verbose', {
+    default: false,
+    type: 'boolean',
+    describe: 'Verbose output',
+  })
+  .option('resume', {
+    default: false,
+    type: 'boolean',
+    describe: 'Resume rebuild of the latest unfinished fragment-test-project',
+  })
+  .option('resumePath', {
+    type: 'string',
+    describe: 'Resume rebuild given the specified fragment-test-project path',
+  })
+  .option('resumeStep', {
+    type: 'string',
+    describe: 'Resume rebuild from the given step',
+  })
+  .help()
+  .parseSync()
+
+const { verbose, resume, resumePath, resumeStep } = args
+
+const RW_FRAMEWORK_PATH = path.join(__dirname, '../../')
+const OUTPUT_PROJECT_PATH = resumePath
+  ? /* path.resolve(String(resumePath)) */ resumePath
+  : path.join(
+      os.tmpdir(),
+      'redwood-fragment-test-project',
+      // ":" is problematic with paths
+      new Date().toISOString().split(':').join('-')
+    )
+
+let startStep = resumeStep || ''
+
+if (!startStep) {
+  // Figure out what step to restart the rebuild from
+  try {
+    const stepTxt = fs.readFileSync(
+      path.join(OUTPUT_PROJECT_PATH, 'step.txt'),
+      'utf-8'
+    )
+
+    if (stepTxt) {
+      startStep = stepTxt
+    }
+  } catch {
+    // No step.txt file found, start from the beginning
+  }
+}
+
+const tui = new RedwoodTUI()
+
+function getExecaOptions(cwd: string) {
+  return { ...utilGetExecaOptions(cwd), stdio: 'pipe' }
+}
+
+function beginStep(step: string) {
+  fs.mkdirSync(OUTPUT_PROJECT_PATH, { recursive: true })
+  fs.writeFileSync(path.join(OUTPUT_PROJECT_PATH, 'step.txt'), '' + step)
+}
+
+async function tuiTask({ step, title, content, task, parent }: TuiTaskDef) {
+  const stepId = (parent ? parent + '.' : '') + step
+
+  const tuiContent = new ReactiveTUIContent({
+    mode: 'text',
+    header: `${stepId}: ${title}`,
+    content,
+    spinner: {
+      enabled: true,
+    },
+  })
+
+  tui.startReactive(tuiContent)
+
+  beginStep(stepId)
+
+  let skip = skipFn(startStep, stepId)
+
+  if (skip) {
+    if (typeof skip === 'boolean' && skip) {
+      // if skip is just `true`, then we use the default skip message
+      skip = 'Skipping...'
+    }
+
+    tuiContent.update({
+      spinner: {
+        enabled: false,
+      },
+      header: `${RedwoodStyling.green('✔')} ${step}. ${title}`,
+      content: ' '.repeat(stepId.length + 4) + RedwoodStyling.info(skip) + '\n',
+    })
+
+    tui.stopReactive()
+
+    return
+  }
+
+  let promise: void | Promise<unknown>
+
+  try {
+    promise = task()
+  } catch (e) {
+    // This code handles errors from synchronous tasks
+
+    tui.stopReactive(true)
+
+    if (e instanceof ExecaError) {
+      tui.displayError(
+        'Failed ' + title.toLowerCase().replace('...', ''),
+        'stdout:\n' + e.stdout + '\n\n' + 'stderr:\n' + e.stderr
+      )
+    } else {
+      tui.displayError(
+        'Failed ' + title.toLowerCase().replace('...', ''),
+        e.message
+      )
+    }
+
+    process.exit(e.exitCode)
+  }
+
+  if (isAwaitable(promise)) {
+    const result = await promise.catch((e) => {
+      // This code handles errors from asynchronous tasks
+
+      tui.stopReactive(true)
+
+      if (e instanceof ExecaError) {
+        tui.displayError(
+          'Failed ' + title.toLowerCase().replace('...', ''),
+          'stdout:\n' + e.stdout + '\n\n' + 'stderr:\n' + e.stderr
+        )
+      } else {
+        tui.displayError(
+          'Failed ' + title.toLowerCase().replace('...', ''),
+          e.message
+        )
+      }
+
+      process.exit(e.exitCode)
+    })
+
+    if (Array.isArray(result)) {
+      const tuiTaskList = result
+      for (let i = 0; i < tuiTaskList.length; i++) {
+        // Recurse through all tasks
+        await tuiTask({
+          step: i,
+          ...tuiTaskList[i],
+          parent: stepId,
+        })
+      }
+    }
+  }
+
+  tuiContent.update({
+    spinner: {
+      enabled: false,
+    },
+    header: `${RedwoodStyling.green('✔')} ${stepId}: ${title}`,
+    content: '',
+  })
+
+  tui.stopReactive()
+}
+
+/**
+ * Function that returns a string to show when skipping the task, or just
+ * true|false to indicate whether the task should be skipped or not.
+ *
+ * @param {string} startStep
+ * @param {string} currentStep
+ */
+function skipFn(startStep, currentStep) {
+  const startStepNrs = startStep.split('.').map((s) => parseInt(s, 10))
+  const currentStepNrs = currentStep.split('.').map((s) => parseInt(s, 10))
+
+  for (let i = 0; i < startStepNrs.length; i++) {
+    if (startStepNrs[i] > currentStepNrs[i]) {
+      return 'Skipping... Resuming from step ' + startStep
+    }
+  }
+
+  return false
+}
+
+if (resume) {
+  console.error(
+    chalk.red.bold(
+      '\n`resume` option is not supported yet. ' +
+        'Please use `resumePath` instead.\n'
+    )
+  )
+
+  process.exit(1)
+}
+
+if (resumePath && !fs.existsSync(path.join(resumePath, 'redwood.toml'))) {
+  console.error(
+    chalk.red.bold(
+      `
+      No redwood.toml file found at the given path: ${resumePath}
+      `
+    )
+  )
+  process.exit(1)
+}
+
+const createProject = () => {
+  const cmd = `yarn node ./packages/create-redwood-app/dist/create-redwood-app.js ${OUTPUT_PROJECT_PATH}`
+
+  const subprocess = exec(
+    cmd,
+    // We create a ts project and convert using ts-to-js at the end if typescript flag is false
+    ['--no-yarn-install', '--typescript', '--overwrite', '--no-git'],
+    getExecaOptions(RW_FRAMEWORK_PATH)
+  )
+
+  return subprocess
+}
+
+const copyProject = async () => {
+  const fixturePath = path.join(
+    RW_FRAMEWORK_PATH,
+    '__fixtures__/fragment-test-project'
+  )
+
+  // remove existing Fixture
+  await rimraf(fixturePath)
+  // copy from tempDir to Fixture dir
+  await fse.copy(OUTPUT_PROJECT_PATH, fixturePath)
+  // cleanup after ourselves
+  await rimraf(OUTPUT_PROJECT_PATH)
+}
+
+async function runCommand() {
+  console.log()
+  console.log('Rebuilding test project fixture...')
+  console.log('Using temporary directory:', OUTPUT_PROJECT_PATH)
+  console.log()
+
+  // Maybe we could add all of the tasks to an array and infer the `step` from
+  // the array index?
+  // I'd also want to be able to skip sub-tasks. Like both the "web" step and
+  // the "api" step both have a bunch of sub-tasks. So maybe the step.txt file
+  // should contain something like "9.2" to mean the third sub-task of the
+  // "api" step? And --resume-step would also accept stuff like "9.2"?
+  await tuiTask({
+    step: 0,
+    title: 'Creating project',
+    content: 'Building fragment-test-project from scratch...',
+    task: createProject,
+  })
+
+  await tuiTask({
+    step: 1,
+    title: '[link] Building Redwood framework',
+    content: 'yarn build:clean && yarn build',
+    task: async () => {
+      return exec(
+        'yarn build:clean && yarn build',
+        [],
+        getExecaOptions(RW_FRAMEWORK_PATH)
+      )
+    },
+  })
+
+  await tuiTask({
+    step: 2,
+    title: '[link] Adding framework dependencies to project',
+    content: 'Adding framework dependencies to project...',
+    task: () => {
+      return addFrameworkDepsToProject(
+        RW_FRAMEWORK_PATH,
+        OUTPUT_PROJECT_PATH,
+        'pipe' // TODO: Remove this when everything is using @rwjs/tui
+      )
+    },
+  })
+
+  await tuiTask({
+    step: 3,
+    title: 'Installing node_modules',
+    content: 'yarn install',
+    task: () => {
+      return exec('yarn install', getExecaOptions(OUTPUT_PROJECT_PATH))
+    },
+  })
+
+  await tuiTask({
+    step: 4,
+    title: 'Updating ports in redwood.toml...',
+    task: () => {
+      // We do this, to make it easier to run multiple test projects in parallel
+      // But on different ports. If API_DEV_PORT or WEB_DEV_PORT aren't supplied,
+      // It just defaults to 8910 and 8911
+      // This is helpful in playwright smoke tests to allow us to parallelize
+      const REDWOOD_TOML_PATH = path.join(OUTPUT_PROJECT_PATH, 'redwood.toml')
+      const redwoodToml = fs.readFileSync(REDWOOD_TOML_PATH).toString()
+      let newRedwoodToml = redwoodToml
+
+      newRedwoodToml = newRedwoodToml.replace(
+        /\port = 8910/,
+        'port = "${WEB_DEV_PORT:8910}"'
+      )
+
+      newRedwoodToml = newRedwoodToml.replace(
+        /\port = 8911/,
+        'port = "${API_DEV_PORT:8911}"'
+      )
+
+      fs.writeFileSync(REDWOOD_TOML_PATH, newRedwoodToml)
+    },
+  })
+
+  await tuiTask({
+    step: 5,
+    title: '[link] Copying framework packages to project',
+    task: () => {
+      return copyFrameworkPackages(
+        RW_FRAMEWORK_PATH,
+        OUTPUT_PROJECT_PATH,
+        'pipe'
+      )
+    },
+  })
+
+  // Note that we undo this at the end
+  await tuiTask({
+    step: 6,
+    title: '[link] Add rwfw project:copy postinstall',
+    task: () => {
+      return updatePkgJsonScripts({
+        projectPath: OUTPUT_PROJECT_PATH,
+        scripts: {
+          postinstall: 'yarn rwfw project:copy',
+        },
+      })
+    },
+  })
+
+  await tuiTask({
+    step: 7,
+    title: 'Apply web codemods',
+    task: () => {
+      return webTasks(OUTPUT_PROJECT_PATH, {
+        linkWithLatestFwBuild: true,
+      })
+    },
+  })
+
+  await tuiTask({
+    step: 8,
+    title: 'Apply api codemods',
+    task: () => {
+      return apiTasks(OUTPUT_PROJECT_PATH, {
+        linkWithLatestFwBuild: true,
+      })
+    },
+  })
+
+  await tuiTask({
+    step: 9,
+    title: 'Running prisma migrate reset',
+    task: () => {
+      return exec(
+        'yarn rw prisma migrate reset',
+        ['--force'],
+        getExecaOptions(OUTPUT_PROJECT_PATH)
+      )
+    },
+  })
+
+  await tuiTask({
+    step: 10,
+    title: 'Lint --fix all the things',
+    task: async () => {
+      try {
+        await exec('yarn rw lint --fix', [], {
+          shell: true,
+          stdio: 'pipe',
+          cleanup: true,
+          cwd: OUTPUT_PROJECT_PATH,
+          env: {
+            RW_PATH: path.join(__dirname, '../../'),
+          },
+        })
+      } catch (e) {
+        if (
+          e instanceof ExecaError &&
+          !e.stderr &&
+          e.stdout.includes('13 problems (13 errors, 0 warnings)')
+        ) {
+          // This is unfortunate, but linting is expected to fail.
+          // This is the expected error message, so we just fall through
+          // If the expected error message changes you'll have to update the
+          // `includes` check above
+        } else {
+          // Unexpected error. Rethrow
+          throw e
+        }
+      }
+    },
+  })
+
+  await tuiTask({
+    step: 11,
+    title: 'Run fragments tasks',
+    task: () => {
+      return fragmentsTasks(OUTPUT_PROJECT_PATH)
+    },
+  })
+
+  await tuiTask({
+    step: 12,
+    title: 'Replace and Cleanup Fixture',
+    task: async () => {
+      // @TODO: This only works on UNIX, we should use path.join everywhere
+      // remove all .gitignore
+      await rimraf(`${OUTPUT_PROJECT_PATH}/.redwood/**/*`, {
+        glob: {
+          ignore: `${OUTPUT_PROJECT_PATH}/.redwood/README.md`,
+        },
+      })
+      await rimraf(`${OUTPUT_PROJECT_PATH}/api/db/dev.db`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/api/db/dev.db-journal`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/api/dist`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/node_modules`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/web/node_modules`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/.env`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/yarn.lock`)
+      await rimraf(`${OUTPUT_PROJECT_PATH}/step.txt`)
+
+      // Copy over package.json from template, so we remove the extra dev dependencies, and rwfw postinstall script
+      // that we added in "Adding framework dependencies to project"
+      await rimraf(`${OUTPUT_PROJECT_PATH}/package.json`)
+      fs.copyFileSync(
+        path.join(
+          __dirname,
+          '../../packages/create-redwood-app/templates/ts/package.json'
+        ),
+        path.join(OUTPUT_PROJECT_PATH, 'package.json')
+      )
+
+      // removes existing Fixture and replaces with newly built project,
+      // then removes new Project temp directory
+      await copyProject()
+    },
+  })
+
+  await tuiTask({
+    step: 13,
+    title: 'All done!',
+    task: () => {
+      console.log('-'.repeat(30))
+      console.log()
+      console.log('✅ Success! The test project fixture has been rebuilt')
+      console.log()
+      console.log('-'.repeat(30))
+    },
+    enabled: verbose,
+  })
+}
+
+runCommand()
diff --git a/tasks/test-project/rebuild-test-project-fixture.ts b/tasks/test-project/rebuild-test-project-fixture.ts
index 9035328331bb..de7ab33368e8 100755
--- a/tasks/test-project/rebuild-test-project-fixture.ts
+++ b/tasks/test-project/rebuild-test-project-fixture.ts
@@ -416,7 +416,7 @@ async function runCommand() {
         if (
           e instanceof ExecaError &&
           !e.stderr &&
-          e.stdout.includes('14 problems (14 errors, 0 warnings)')
+          e.stdout.includes('13 problems (13 errors, 0 warnings)')
         ) {
           // This is unfortunate, but linting is expected to fail.
           // This is the expected error message, so we just fall through
diff --git a/tasks/test-project/tasks.js b/tasks/test-project/tasks.js
index a5a9676f6136..cf9240b5534f 100644
--- a/tasks/test-project/tasks.js
+++ b/tasks/test-project/tasks.js
@@ -9,6 +9,7 @@ const {
   getExecaOptions,
   applyCodemod,
   updatePkgJsonScripts,
+  exec,
 } = require('./util')
 
 // This variable gets used in other functions
@@ -738,7 +739,6 @@ export default DoublePage`
 }
 
 /**
- *
  * Separates the streaming-ssr related steps. These are all web tasks,
  * if we choose to move them later
  * @param {string} outputPath
@@ -776,8 +776,128 @@ async function streamingTasks(outputPath, { verbose }) {
   })
 }
 
+/**
+ * Tasks to add GraphQL Fragments support to the test-project, and some queries
+ * to test fragments
+ */
+async function fragmentsTasks(outputPath, { verbose }) {
+  OUTPUT_PATH = outputPath
+
+  const tasks = [
+    {
+      title: 'Enable fragments',
+      task: async () => {
+        const redwoodTomlPath = path.join(outputPath, 'redwood.toml')
+        const redwoodToml = fs.readFileSync(redwoodTomlPath).toString()
+        const newRedwoodToml = redwoodToml + '\n[graphql]\n  fragments = true\n'
+        fs.writeFileSync(redwoodTomlPath, newRedwoodToml)
+      },
+    },
+    {
+      title: 'Adding produce and stall models to prisma',
+      task: async () => {
+        // Need both here since they have a relation
+        const { produce, stall } = await import('./codemods/models.js')
+
+        addModel(produce)
+        addModel(stall)
+
+        return exec(
+          'yarn rw prisma migrate dev --name create_produce_stall',
+          [],
+          getExecaOptions(outputPath)
+        )
+      },
+    },
+    {
+      title: 'Seed fragments data',
+      task: async () => {
+        await applyCodemod(
+          'seedFragments.ts',
+          fullPath('scripts/seed.ts', { addExtension: false })
+        )
+
+        await exec('yarn rw prisma db seed', [], getExecaOptions(outputPath))
+      },
+    },
+    {
+      title: 'Generate SDLs for produce and stall',
+      task: async () => {
+        const generateSdl = createBuilder('yarn redwood g sdl')
+
+        await generateSdl('stall')
+        await generateSdl('produce')
+
+        await applyCodemod(
+          'producesSdl.ts',
+          fullPath('api/src/graphql/produces.sdl')
+        )
+      },
+    },
+    {
+      title: 'Copy components from templates',
+      task: () => {
+        const templatesPath = path.join(__dirname, 'templates', 'web')
+        const componentsPath = path.join(
+          OUTPUT_PATH,
+          'web',
+          'src',
+          'components'
+        )
+
+        for (const fileName of [
+          'Card.tsx',
+          'FruitInfo.tsx',
+          'ProduceInfo.tsx',
+          'StallInfo.tsx',
+          'VegetableInfo.tsx',
+        ]) {
+          const templatePath = path.join(templatesPath, fileName)
+          const componentPath = path.join(componentsPath, fileName)
+
+          fs.writeFileSync(componentPath, fs.readFileSync(templatePath))
+        }
+      },
+    },
+    {
+      title: 'Copy sdl and service for groceries from templates',
+      task: () => {
+        const templatesPath = path.join(__dirname, 'templates', 'api')
+        const graphqlPath = path.join(OUTPUT_PATH, 'api', 'src', 'graphql')
+        const servicesPath = path.join(OUTPUT_PATH, 'api', 'src', 'services')
+
+        const sdlTemplatePath = path.join(templatesPath, 'groceries.sdl.ts')
+        const sdlPath = path.join(graphqlPath, 'groceries.sdl.ts')
+        const serviceTemplatePath = path.join(templatesPath, 'groceries.ts')
+        const servicePath = path.join(servicesPath, 'groceries.ts')
+
+        fs.writeFileSync(sdlPath, fs.readFileSync(sdlTemplatePath))
+        fs.writeFileSync(servicePath, fs.readFileSync(serviceTemplatePath))
+      },
+    },
+    {
+      title: 'Creating Groceries page',
+      task: async () => {
+        await createPage('groceries')
+
+        await applyCodemod(
+          'groceriesPage.ts',
+          fullPath('web/src/pages/GroceriesPage/GroceriesPage')
+        )
+      },
+    },
+  ]
+
+  return new Listr(tasks, {
+    exitOnError: true,
+    renderer: verbose && 'verbose',
+    renderOptions: { collapseSubtasks: false },
+  })
+}
+
 module.exports = {
   apiTasks,
   webTasks,
   streamingTasks,
+  fragmentsTasks,
 }
diff --git a/tasks/test-project/templates/api/groceries.sdl.ts b/tasks/test-project/templates/api/groceries.sdl.ts
new file mode 100644
index 000000000000..0870d7daeb54
--- /dev/null
+++ b/tasks/test-project/templates/api/groceries.sdl.ts
@@ -0,0 +1,49 @@
+export const schema = gql`
+  interface Grocery {
+    id: ID!
+    name: String!
+    quantity: Int!
+    price: Int!
+    nutrients: String
+    stall: Stall!
+    region: String!
+  }
+
+  type Fruit implements Grocery {
+    id: ID!
+    name: String!
+    quantity: Int!
+    price: Int!
+    nutrients: String
+    stall: Stall!
+    region: String!
+    "Seedless is only for fruits"
+    isSeedless: Boolean
+    "Ripeness is only for fruits"
+    ripenessIndicators: String
+  }
+
+  type Vegetable implements Grocery {
+    id: ID!
+    name: String!
+    quantity: Int!
+    price: Int!
+    nutrients: String
+    stall: Stall!
+    region: String!
+    "Veggie Family is only for vegetables"
+    vegetableFamily: String
+    "Pickled is only for vegetables"
+    isPickled: Boolean
+  }
+
+  union Groceries = Fruit | Vegetable
+
+  type Query {
+    groceries: [Groceries!]! @skipAuth
+    fruits: [Fruit!]! @skipAuth
+    fruitById(id: ID!): Fruit @skipAuth
+    vegetables: [Vegetable!]! @skipAuth
+    vegetableById(id: ID!): Vegetable @skipAuth
+  }
+`
diff --git a/tasks/test-project/templates/api/groceries.ts b/tasks/test-project/templates/api/groceries.ts
new file mode 100644
index 000000000000..09eb5de330ff
--- /dev/null
+++ b/tasks/test-project/templates/api/groceries.ts
@@ -0,0 +1,32 @@
+import { Produce } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+const isFruit = (grocery: Produce) => {
+  return grocery.isSeedless !== null && grocery.ripenessIndicators !== null
+}
+
+export const groceries = async () => {
+  const result = await db.produce.findMany({
+    include: { stall: true },
+    orderBy: { name: 'asc' },
+  })
+
+  const avail = result.map((grocery) => {
+    if (isFruit(grocery)) {
+      return {
+        ...grocery,
+        __typename: 'Fruit',
+        __resolveType: 'Fruit',
+      }
+    } else {
+      return {
+        ...grocery,
+        __typename: 'Vegetable',
+        __resolveType: 'Vegetable',
+      }
+    }
+  })
+
+  return avail
+}
diff --git a/tasks/test-project/templates/web/Card.tsx b/tasks/test-project/templates/web/Card.tsx
new file mode 100644
index 000000000000..8894a447b29c
--- /dev/null
+++ b/tasks/test-project/templates/web/Card.tsx
@@ -0,0 +1,9 @@
+const Card = ({ children }) => {
+  return (
+    <div className="p-8 border-2 rounded:lg shadow-md border-gray-300">
+      {children}
+    </div>
+  )
+}
+
+export default Card
diff --git a/tasks/test-project/templates/web/FruitInfo.tsx b/tasks/test-project/templates/web/FruitInfo.tsx
new file mode 100644
index 000000000000..95015ee57764
--- /dev/null
+++ b/tasks/test-project/templates/web/FruitInfo.tsx
@@ -0,0 +1,37 @@
+import type { Fruit } from 'types/graphql'
+
+import { registerFragment } from '@redwoodjs/web/apollo'
+
+import Card from 'src/components/Card'
+import StallInfo from 'src/components/StallInfo'
+
+const { useRegisteredFragment } = registerFragment(
+  gql`
+    fragment Fruit_info on Fruit {
+      id
+      name
+      isSeedless
+      ripenessIndicators
+      stall {
+        ...Stall_info
+      }
+    }
+  `
+)
+
+const FruitInfo = ({ id }: { id: string }) => {
+  const { data: fruit, complete } = useRegisteredFragment<Fruit>(id)
+
+  return (
+    complete && (
+      <Card>
+        <h2 className="font-bold">Fruit Name: {fruit.name}</h2>
+        <p>Seeds? {fruit.isSeedless ? 'Yes' : 'No'}</p>
+        <p>Ripeness: {fruit.ripenessIndicators}</p>
+        <StallInfo id={fruit.stall.id} />
+      </Card>
+    )
+  )
+}
+
+export default FruitInfo
diff --git a/tasks/test-project/templates/web/ProduceInfo.tsx b/tasks/test-project/templates/web/ProduceInfo.tsx
new file mode 100644
index 000000000000..f06a68ad5e9d
--- /dev/null
+++ b/tasks/test-project/templates/web/ProduceInfo.tsx
@@ -0,0 +1,28 @@
+import type { Produce } from 'types/graphql'
+
+import { registerFragment } from '@redwoodjs/web/apollo'
+
+import Card from 'src/components/Card'
+
+const { useRegisteredFragment } = registerFragment(
+  gql`
+    fragment Produce_info on Produce {
+      id
+      name
+    }
+  `
+)
+
+const ProduceInfo = ({ id }: { id: string }) => {
+  const { data, complete } = useRegisteredFragment<Produce>(id)
+
+  return (
+    complete && (
+      <Card>
+        <h2 className="font-bold">Produce Name: {data.name}</h2>
+      </Card>
+    )
+  )
+}
+
+export default ProduceInfo
diff --git a/tasks/test-project/templates/web/StallInfo.tsx b/tasks/test-project/templates/web/StallInfo.tsx
new file mode 100644
index 000000000000..24b2fbb58d35
--- /dev/null
+++ b/tasks/test-project/templates/web/StallInfo.tsx
@@ -0,0 +1,26 @@
+import type { Stall } from 'types/graphql'
+
+import { registerFragment } from '@redwoodjs/web/apollo'
+
+const { useRegisteredFragment } = registerFragment(
+  gql`
+    fragment Stall_info on Stall {
+      id
+      name
+    }
+  `
+)
+
+const StallInfo = ({ id }: { id: string }) => {
+  const { data, complete } = useRegisteredFragment<Stall>(id)
+
+  return (
+    complete && (
+      <div>
+        <h3 className="font-semibold">Stall Name: {data.name}</h3>
+      </div>
+    )
+  )
+}
+
+export default StallInfo
diff --git a/tasks/test-project/templates/web/VegetableInfo.tsx b/tasks/test-project/templates/web/VegetableInfo.tsx
new file mode 100644
index 000000000000..96f6208b19e9
--- /dev/null
+++ b/tasks/test-project/templates/web/VegetableInfo.tsx
@@ -0,0 +1,37 @@
+import type { Vegetable } from 'types/graphql'
+
+import { registerFragment } from '@redwoodjs/web/apollo'
+
+import Card from 'src/components/Card'
+import StallInfo from 'src/components/StallInfo'
+
+const { useRegisteredFragment } = registerFragment(
+  gql`
+    fragment Vegetable_info on Vegetable {
+      id
+      name
+      vegetableFamily
+      isPickled
+      stall {
+        ...Stall_info
+      }
+    }
+  `
+)
+
+const VegetableInfo = ({ id }: { id: string }) => {
+  const { data: vegetable, complete } = useRegisteredFragment<Vegetable>(id)
+
+  return (
+    complete && (
+      <Card>
+        <h2 className="font-bold">Vegetable Name: {vegetable.name}</h2>
+        <p>Pickled? {vegetable.isPickled ? 'Yes' : 'No'}</p>
+        <p>Family: {vegetable.vegetableFamily}</p>
+        <StallInfo id={vegetable.stall.id} />
+      </Card>
+    )
+  )
+}
+
+export default VegetableInfo
diff --git a/tasks/test-project/tui-tasks.js b/tasks/test-project/tui-tasks.js
index 830ea8e0c46e..9b25db21dc84 100644
--- a/tasks/test-project/tui-tasks.js
+++ b/tasks/test-project/tui-tasks.js
@@ -887,7 +887,125 @@ export default DoublePage`
   return tuiTaskList
 }
 
+/**
+ * Tasks to add GraphQL Fragments support to the test-project, and some queries
+ * to test fragments
+ */
+async function fragmentsTasks(outputPath) {
+  OUTPUT_PATH = outputPath
+
+  /** @type import('./typing').TuiTaskList */
+  const tuiTaskList = [
+    {
+      title: 'Enable fragments',
+      task: async () => {
+        const redwoodTomlPath = path.join(outputPath, 'redwood.toml')
+        const redwoodToml = fs.readFileSync(redwoodTomlPath).toString()
+        const newRedwoodToml = redwoodToml + '\n[graphql]\n  fragments = true\n'
+        fs.writeFileSync(redwoodTomlPath, newRedwoodToml)
+      },
+    },
+    {
+      title: 'Adding produce and stall models to prisma',
+      task: async () => {
+        // Need both here since they have a relation
+        const { produce, stall } = await import('./codemods/models.js')
+
+        addModel(produce)
+        addModel(stall)
+
+        return exec(
+          'yarn rw prisma migrate dev --name create_produce_stall',
+          [],
+          getExecaOptions(outputPath)
+        )
+      },
+    },
+    {
+      title: 'Seed fragments data',
+      task: async () => {
+        await applyCodemod(
+          'seedFragments.ts',
+          fullPath('scripts/seed.ts', { addExtension: false })
+        )
+
+        await exec('yarn rw prisma db seed', [], getExecaOptions(outputPath))
+      },
+    },
+    {
+      title: 'Generate SDLs for produce and stall',
+      task: async () => {
+        const generateSdl = createBuilder('yarn redwood g sdl')
+
+        await generateSdl('stall')
+        await generateSdl('produce')
+
+        await applyCodemod(
+          'producesSdl.ts',
+          fullPath('api/src/graphql/produces.sdl')
+        )
+      },
+    },
+    {
+      title: 'Copy components from templates',
+      task: () => {
+        const templatesPath = path.join(__dirname, 'templates', 'web')
+        const componentsPath = path.join(
+          OUTPUT_PATH,
+          'web',
+          'src',
+          'components'
+        )
+
+        for (const fileName of [
+          'Card.tsx',
+          'FruitInfo.tsx',
+          'ProduceInfo.tsx',
+          'StallInfo.tsx',
+          'VegetableInfo.tsx',
+        ]) {
+          const templatePath = path.join(templatesPath, fileName)
+          const componentPath = path.join(componentsPath, fileName)
+
+          fs.writeFileSync(componentPath, fs.readFileSync(templatePath))
+        }
+      },
+    },
+    {
+      title: 'Copy sdl and service for groceries from templates',
+      task: () => {
+        const templatesPath = path.join(__dirname, 'templates', 'api')
+        const graphqlPath = path.join(OUTPUT_PATH, 'api', 'src', 'graphql')
+        const servicesPath = path.join(OUTPUT_PATH, 'api', 'src', 'services')
+
+        const sdlTemplatePath = path.join(templatesPath, 'groceries.sdl.ts')
+        const sdlPath = path.join(graphqlPath, 'groceries.sdl.ts')
+        const serviceTemplatePath = path.join(templatesPath, 'groceries.ts')
+        const servicePath = path.join(servicesPath, 'groceries.ts')
+
+        fs.writeFileSync(sdlPath, fs.readFileSync(sdlTemplatePath))
+        fs.writeFileSync(servicePath, fs.readFileSync(serviceTemplatePath))
+      },
+    },
+    {
+      title: 'Creating Groceries page',
+      task: async () => {
+        const createPage = createBuilder('yarn redwood g page')
+        await createPage('groceries')
+
+        await applyCodemod(
+          'groceriesPage.ts',
+          fullPath('web/src/pages/GroceriesPage/GroceriesPage')
+        )
+      },
+    },
+  ]
+
+  return tuiTaskList
+}
+
 module.exports = {
   apiTasks,
   webTasks,
+  fragmentsTasks,
 }