Feat: Gql fragments support for prerender. Clean up crwa templates

__fixtures__/test-project/web/src/App.tsx

@@ -1,5 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -12,8 +13,7 @@ const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
-        <RedwoodApolloProvider
-          useAuth={useAuth}>
+        <RedwoodApolloProvider useAuth={useAuth}>
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

__fixtures__/test-project/web/src/graphql/possibleTypes.ts

@@ -0,0 +1,11 @@
+export interface PossibleTypesResultData {
+  possibleTypes: {
+    [key: string]: string[]
+  }
+}
+
+const result: PossibleTypesResultData = {
+  possibleTypes: {},
+}
+
+export default result

docs/docs/graphql/fragments.md

@@ -296,7 +296,7 @@ import possibleTypes from 'src/graphql/possibleTypes'
 
 To generate the `src/graphql/possibleTypes`, configure the `redwood.toml`:
 
-```toml title=redwood.roml
+```toml title=redwood.toml
 [graphql]
-  fragments=true
+  fragments = true
 ```

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,12 @@ export const handler = async ({
     prisma,
     prerender,
   })
+
   const rwjsPaths = getPaths()
+  const rwjsConfig = getConfig()
+  const useGraphQL = rwjsConfig.graphql
+  const useFragments = useGraphQL && useGraphQL.fragments
+  const useTrustedDocuments = useGraphQL && useGraphQL.trustedDocuments
 
   if (performance) {
     console.log('Measuring Web Build Performance...')
@@ -75,6 +81,19 @@ export const handler = async ({
         })
       },
     },
+    // If using GraphQL Fragments or Trusted Documents, then we need use coden 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,

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>

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>

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: {
       // should be graphql.d.ts
       [`${getPaths().web.base}/types/types.d.ts`]: {

packages/vite/src/index.ts

@@ -9,6 +9,7 @@ import { normalizePath } from 'vite'
 import { getWebSideDefaultBabelConfig } from '@redwoodjs/babel-config'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
+import configureGraphQLFragments from './plugins/vite-plugin-configure-graphql-fragments'
 import handleJsAsJsx from './plugins/vite-plugin-jsx-loader'
 import removeFromBundle from './plugins/vite-plugin-remove-from-bundle'
 import swapApolloProvider from './plugins/vite-plugin-swap-apollo-provider'
@@ -268,7 +269,8 @@ export default function redwoodPluginVite(): PluginOption[] {
     },
     // We can remove when streaming is stable
     rwConfig.experimental.streamingSsr.enabled && swapApolloProvider(),
-    // -----------------
+    // When using GraphQL Fragments, handle possible types for Apollo Client Cache
+    configureGraphQLFragments(),
     handleJsAsJsx(),
     // Remove the splash-page from the bundle.
     removeFromBundle([

packages/vite/src/plugins/vite-plugin-configure-graphql-fragments.ts

@@ -0,0 +1,93 @@
+import fs from 'fs'
+import path from 'path'
+
+import { transformWithEsbuild } from 'vite'
+import type { PluginOption } from 'vite'
+
+import { getConfig, getPaths } from '@redwoodjs/project-config'
+
+const DEFAULT_POSSIBLE_TYPES_FILE_CONTENTS = `export interface PossibleTypesResultData {
+  possibleTypes: {
+    [key: string]: string[]
+  }
+}
+
+const result: PossibleTypesResultData = {
+  possibleTypes: {},
+}
+
+export default result
+`
+
+/**
+ *
+ * This is a vite plugin to support GraphQL Fragments by either
+ * creating a default possible types file to be used when configuring Apollo Client Cache config
+ * or, allowing Apollo Client to use the possibleTypes file that is generated by the GraphQL Code Generator
+ *
+ * This plugin handles both build and dev (aka serve) modes
+ *
+ * When building, a transform hook is used to replace the import of the possibleTypes
+ * file with the actual contents of the file
+ *
+ * See:
+ *
+ * packages/web/src/apollo/index.ts -> import possibleTypes from './possibleTypes'
+ * packages/web/src/apollo/possibleTypes.ts
+ *
+ */
+export default function configureGraphQLFragments(): PluginOption {
+  const rwConfig = getConfig()
+
+  const possibleTypesFilePath = path.join(
+    getPaths().web.graphql,
+    'possibleTypes.ts'
+  )
+
+  const useFragments = rwConfig.graphql.fragments
+  const existsPossibleTypesFile = fs.existsSync(possibleTypesFilePath)
+
+  return {
+    name: 'configure-graphql-fragments',
+    configureServer() {
+      return () => {
+        // if a RedwoodJS project isn't configured to use fragments, then
+        // create the default possibleTypes file (but, don't overwrite it)
+        if (!useFragments && !existsPossibleTypesFile) {
+          const dirname = path.dirname(possibleTypesFilePath)
+          if (!fs.existsSync(dirname)) {
+            fs.mkdirSync(dirname, { recursive: true })
+          }
+          fs.writeFileSync(
+            possibleTypesFilePath,
+            DEFAULT_POSSIBLE_TYPES_FILE_CONTENTS
+          )
+        }
+      }
+    },
+    async transform(_code: string, id: string) {
+      if (/@redwoodjs\/web\/dist\/apollo\/possibleTypes/.test(id)) {
+        if (existsPossibleTypesFile) {
+          const possibleTypeFile = fs.readFileSync(
+            possibleTypesFilePath,
+            'utf8'
+          )
+
+          const result = await transformWithEsbuild(
+            possibleTypeFile,
+            possibleTypesFilePath,
+            {
+              loader: 'ts',
+            }
+          )
+
+          return {
+            code: result.code,
+          }
+        }
+      }
+
+      return null
+    },
+  }
+}

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,
@@ -40,6 +41,7 @@ import {
   registerFragment,
   registerFragments,
 } from './fragmentRegistry'
+import possibleTypes from './possibleTypes'
 import { SSELink } from './sseLink'
 import { useCache } from './useCache'
 
@@ -364,6 +366,7 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
 
   const cache = new InMemoryCache({
     fragments: fragmentRegistry,
+    possibleTypes: cacheConfig?.possibleTypes ?? possibleTypes.possibleTypes,
     ...cacheConfig,
   }).restore(globalThis?.__REDWOOD__APOLLO_STATE ?? {})
 

packages/web/src/apollo/possibleTypes.ts

@@ -0,0 +1,33 @@
+/**
+ * Imported by Apollo Client to configure the cache with any possible types needed for
+ * union and interface types.
+ *
+ * If there is a possibleTypes file generated by GraphQL Code Generator in the project, then use that
+ *
+ * If not, then use the default possibleTypes file that is created by the configure-graphql-fragments vite plugin
+ *
+ * This ensures that the required possibleTypes are always available to Apollo Client and the try/catch won't fail
+ *
+ */
+interface PossibleTypesResultData {
+  possibleTypes: {
+    [key: string]: string[]
+  }
+}
+
+let file: PossibleTypesResultData = { possibleTypes: {} }
+
+// TODO: Since the vite plugin ensures that the possibleTypes file exists, we can remove this check?
+if (process.env.NODE_ENV === 'development') {
+  try {
+    file = require('web/src/graphql/possibleTypes').default
+  } catch (e) {
+    // eat the error
+  }
+}
+
+const result: PossibleTypesResultData = {
+  possibleTypes: file.possibleTypes,
+}
+
+export default result