halfdomelabs · kingston · Jul 8, 2025 · Jul 7, 2025 · Jul 7, 2025 · Jul 8, 2025
diff --git a/.changeset/bright-parrots-watch.md b/.changeset/bright-parrots-watch.md
@@ -0,0 +1,7 @@
+---
+'@baseplate-dev/react-generators': patch
+'@baseplate-dev/plugin-storage': patch
+'@baseplate-dev/plugin-auth': patch
+---
+
+Switch to typed GraphQL documents instead of older Apollo generator
diff --git a/packages/react-generators/src/constants/react-packages.ts b/packages/react-generators/src/constants/react-packages.ts
@@ -42,11 +42,12 @@ export const REACT_PACKAGES = {
   '@apollo/client': '3.13.8',
   graphql: '16.9.0',
   'graphql-ws': '5.16.0',
-  '@graphql-codegen/cli': '5.0.2',
-  '@graphql-codegen/typescript': '4.0.9',
-  '@graphql-codegen/typescript-operations': '4.2.3',
-  '@graphql-codegen/typescript-react-apollo': '4.3.0',
-  '@parcel/watcher': '2.4.1',
+  '@graphql-codegen/cli': '5.0.7',
+  '@graphql-codegen/typescript': '4.1.6',
+  '@graphql-codegen/typescript-operations': '4.6.1',
+  '@graphql-codegen/typed-document-node': '5.1.2',
+  '@graphql-typed-document-node/core': '3.2.0',
+  '@parcel/watcher': '2.5.1',
 
   // Utils
   nanoid: '3.3.8',

diff --git a/packages/react-generators/src/generators/admin/_utils/foreign-data-dependency.ts b/packages/react-generators/src/generators/admin/_utils/foreign-data-dependency.ts
@@ -79,10 +79,13 @@ export function createForeignDataDependency({
     ],
     loader: {
       loader: tsCodeFragment(
-        `const { data: ${loaderValueName}, error: ${loaderErrorName} } = useGet${dataName}Query();`,
-        tsImportBuilder([`useGet${dataName}Query`]).from(
-          reactApollo.getGeneratedFilePath(),
-        ),
+        `const { data: ${loaderValueName}, error: ${loaderErrorName} } = useQuery(Get${dataName}Document);`,
+        [
+          tsImportBuilder([`useQuery`]).from('@apollo/client'),
+          tsImportBuilder([`Get${dataName}Document`]).from(
+            reactApollo.getGeneratedFilePath(),
+          ),
+        ],
       ),
       loaderErrorName,
       loaderValueName,

diff --git a/...ct-generators/src/generators/admin/admin-bull-board/templates/routes/bull-board/index.tsx b/...ct-generators/src/generators/admin/admin-bull-board/templates/routes/bull-board/index.tsx
@@ -2,10 +2,11 @@
 
 import type { ReactElement } from 'react';
 
-import { useCreateBullBoardAuthCodeMutation } from '%generatedGraphqlImports';
+import { CreateBullBoardAuthCodeDocument } from '%generatedGraphqlImports';
 import { ErrorableLoader } from '%reactComponentsImports';
 import { config } from '%reactConfigImports';
 import { logAndFormatError } from '%reactErrorImports';
+import { useMutation } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 
@@ -14,7 +15,9 @@ export const Route = createFileRoute(TPL_ROUTE_PATH)({
 });
 
 function BullBoardPage(): ReactElement {
-  const [createBullBoardAuthCode] = useCreateBullBoardAuthCodeMutation();
+  const [createBullBoardAuthCode] = useMutation(
+    CreateBullBoardAuthCodeDocument,
+  );
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {

diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts
@@ -241,7 +241,7 @@ export const adminCrudEditGenerator = createGenerator({
                     TPL_ROUTE_PATH: quot(`${routeFilePath}/new`),
                     TPL_COMPONENT_NAME: createPageName,
                     TPL_EDIT_FORM: tsTemplate`<${editFormComponentExpression} submitData={submitData} ${inputLoaderExtraProps} />`,
-                    TPL_CREATE_MUTATION: createInfo.hookExpression,
+                    TPL_CREATE_MUTATION: createInfo.documentExpression,
                     TPL_MUTATION_NAME: createInfo.fieldName,
                     TPL_FORM_DATA_NAME: formDataExpression,
                     TPL_MODEL_NAME: titleizeCamel(modelName),
@@ -257,7 +257,7 @@ export const adminCrudEditGenerator = createGenerator({
             const editPageLoader: DataLoader = {
               loader: TsCodeUtils.formatFragment(
                 `
-          const { data, error } = GET_EDIT_BY_ID_QUERY({
+          const { data, error } = useQuery(GET_EDIT_BY_ID_QUERY, {
             variables: { id },
           });
 
@@ -267,11 +267,14 @@ export const adminCrudEditGenerator = createGenerator({
           }, [data]);
           `,
                 {
-                  GET_EDIT_BY_ID_QUERY: editQueryInfo.hookExpression,
+                  GET_EDIT_BY_ID_QUERY: editQueryInfo.documentExpression,
                   FORM_DATA_NAME: formDataExpression,
                   QUERY_FIELD_NAME: editQueryInfo.fieldName,
                 },
-                tsImportBuilder(['useMemo']).from('react'),
+                [
+                  tsImportBuilder(['useMemo']).from('react'),
+                  tsImportBuilder(['useQuery']).from('@apollo/client'),
+                ],
               ),
               loaderErrorName: 'error',
               loaderValueName: 'initialData',
@@ -294,7 +297,7 @@ export const adminCrudEditGenerator = createGenerator({
                   TPL_ROUTE_PATH: quot(`${routeFilePath}/$id`),
                   TPL_COMPONENT_NAME: editPageName,
                   TPL_EDIT_FORM: tsTemplate`<${editFormComponentExpression} submitData={submitData} initialData={initialData} ${inputLoaderExtraProps} />`,
-                  TPL_UPDATE_MUTATION: updateInfo.hookExpression,
+                  TPL_UPDATE_MUTATION: updateInfo.documentExpression,
                   TPL_MUTATION_NAME: updateInfo.fieldName,
                   TPL_FORM_DATA_NAME: formDataExpression,
                   TPL_MODEL_NAME: titleizeCamel(modelName),

diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/templates/create.tsx b/packages/react-generators/src/generators/admin/admin-crud-edit/templates/create.tsx
@@ -3,6 +3,7 @@
 import type { ReactElement } from 'react';
 
 import { logError } from '%reactErrorImports';
+import { useMutation } from '@apollo/client';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 
@@ -13,7 +14,7 @@ export const Route = createFileRoute(TPL_ROUTE_PATH)({
 function TPL_COMPONENT_NAME(): ReactElement {
   TPL_DATA_LOADER;
 
-  const [TPL_MUTATION_NAME] = TPL_CREATE_MUTATION({
+  const [TPL_MUTATION_NAME] = useMutation(TPL_CREATE_MUTATION, {
     refetchQueries: [
       {
         query: TPL_REFETCH_DOCUMENT,

diff --git a/packages/react-generators/src/generators/admin/admin-crud-edit/templates/edit.tsx b/packages/react-generators/src/generators/admin/admin-crud-edit/templates/edit.tsx
@@ -3,6 +3,7 @@
 import type { ReactElement } from 'react';
 
 import { logError } from '%reactErrorImports';
+import { useMutation } from '@apollo/client';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 
@@ -15,7 +16,7 @@ function TPL_COMPONENT_NAME(): ReactElement {
 
   TPL_DATA_LOADER;
 
-  const [TPL_MUTATION_NAME] = TPL_UPDATE_MUTATION();
+  const [TPL_MUTATION_NAME] = useMutation(TPL_UPDATE_MUTATION);
   const navigate = useNavigate();
 
   TPL_DATA_GATE;

diff --git a/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts b/packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts
@@ -97,8 +97,13 @@ export const adminCrudListGenerator = createGenerator({
 
             const inputLoaders = dataDependencies.map((d) => d.loader);
 
+            const useQuery = TsCodeUtils.importFragment(
+              'useQuery',
+              '@apollo/client',
+            );
+
             const listPageLoader: DataLoader = {
-              loader: tsTemplate`const { data, error } = ${listInfo.hookExpression}();`,
+              loader: tsTemplate`const { data, error } = ${useQuery}(${listInfo.documentExpression});`,
               loaderErrorName: 'error',
               loaderValueName: 'data',
             };
@@ -133,7 +138,7 @@ export const adminCrudListGenerator = createGenerator({
                   TPL_ROUTE_PATH: quot(`${routeFilePath}/`),
                   TPL_PAGE_NAME: listPageComponentName,
                   TPL_DELETE_FUNCTION: deleteInfo.fieldName,
-                  TPL_DELETE_MUTATION: deleteInfo.hookExpression,
+                  TPL_DELETE_MUTATION: deleteInfo.documentExpression,
                   TPL_ROW_FRAGMENT_NAME:
                     adminCrudQueries.getRowFragmentExpression(),
                   TPL_PLURAL_MODEL: titleizeCamel(pluralize(modelName)),

diff --git a/packages/react-generators/src/generators/admin/admin-crud-list/templates/index.tsx b/packages/react-generators/src/generators/admin/admin-crud-list/templates/index.tsx
@@ -3,6 +3,7 @@
 import type { ReactElement } from 'react';
 
 import { ErrorableLoader } from '%reactComponentsImports';
+import { useMutation } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(TPL_ROUTE_PATH)({
@@ -11,7 +12,7 @@ export const Route = createFileRoute(TPL_ROUTE_PATH)({
 
 function TPL_PAGE_NAME(): ReactElement {
   TPL_DATA_LOADER;
-  const [TPL_DELETE_FUNCTION] = TPL_DELETE_MUTATION({
+  const [TPL_DELETE_FUNCTION] = useMutation(TPL_DELETE_MUTATION, {
     refetchQueries: [
       {
         query: TPL_REFETCH_DOCUMENT,

diff --git a/.../react-generators/src/generators/admin/admin-crud-queries/admin-crud-queries.generator.ts b/.../react-generators/src/generators/admin/admin-crud-queries/admin-crud-queries.generator.ts
@@ -42,7 +42,7 @@ interface AdminCrudQueriesConfig {
 }
 
 interface ApolloHookInfo {
-  hookExpression: TsCodeFragment;
+  documentExpression: TsCodeFragment;
   fieldName: string;
 }
 
@@ -118,12 +118,12 @@ export const adminCrudQueriesGenerator = createGenerator({
         }
 
         function getHookInfo(
-          hookName: string,
+          documentName: string,
           fieldName: string,
         ): ApolloHookInfo {
           return {
             fieldName,
-            hookExpression: getGeneratedImport(hookName),
+            documentExpression: getGeneratedImport(documentName),
           };
         }
 
@@ -181,27 +181,27 @@ export const adminCrudQueriesGenerator = createGenerator({
               getEditFragmentExpression: () =>
                 getGeneratedTypeImport(`${editFragmentName}Fragment`),
               getListQueryHookInfo: () =>
-                getHookInfo(`use${listQueryName}Query`, listFieldName),
+                getHookInfo(`${listQueryName}Document`, listFieldName),
               getEditQueryHookInfo: () =>
-                getHookInfo(`use${editQueryName}Query`, editFieldName),
+                getHookInfo(`${editQueryName}Document`, editFieldName),
               getCreateHookInfo: () => {
                 config.generateCreate = true;
                 return getHookInfo(
-                  `useCreate${modelName}Mutation`,
+                  `Create${modelName}Document`,
                   createFieldName,
                 );
               },
               getUpdateHookInfo: () => {
                 config.generateUpdate = true;
                 return getHookInfo(
-                  `useUpdate${modelName}Mutation`,
+                  `Update${modelName}Document`,
                   updateFieldName,
                 );
               },
               getDeleteHookInfo: () => {
                 config.generateDelete = true;
                 return getHookInfo(
-                  `useDelete${modelName}Mutation`,
+                  `Delete${modelName}Document`,
                   deleteFieldName,
                 );
               },

diff --git a/packages/react-generators/src/generators/apollo/react-apollo/extractor.json b/packages/react-generators/src/generators/apollo/react-apollo/extractor.json
@@ -8,14 +8,15 @@
     }
   },
   "templates": {
-    "package/codegen.yml": {
-      "name": "codegen-yml",
-      "type": "text",
+    "package/codegen.ts": {
+      "name": "codegen-config",
+      "type": "ts",
       "fileOptions": { "kind": "singleton" },
-      "pathRootRelativePath": "{package-root}/codegen.yml",
-      "variables": {
-        "TPL_SCHEMA_LOCATION": { "description": "Location of the schema" }
-      }
+      "generator": "@baseplate-dev/react-generators#apollo/react-apollo",
+      "importMapProviders": {},
+      "pathRootRelativePath": "{package-root}/codegen.ts",
+      "projectExports": { "config": {} },
+      "variables": { "TPL_BACKEND_SCHEMA": {} }
     },
     "src/app/app-apollo-provider.tsx": {
       "name": "app-apollo-provider",

diff --git a/packages/react-generators/src/generators/apollo/react-apollo/generated/template-paths.ts b/packages/react-generators/src/generators/apollo/react-apollo/generated/template-paths.ts
@@ -2,7 +2,7 @@ import { packageInfoProvider } from '@baseplate-dev/core-generators';
 import { createGeneratorTask, createProviderType } from '@baseplate-dev/sync';
 
 export interface ApolloReactApolloPaths {
-  codegenYml: string;
+  codegenConfig: string;
   appApolloProvider: string;
   graphql: string;
   cache: string;
@@ -25,7 +25,7 @@ const apolloReactApolloPathsTask = createGeneratorTask({
         apolloReactApolloPaths: {
           appApolloProvider: `${srcRoot}/app/app-apollo-provider.tsx`,
           cache: `${srcRoot}/services/apollo/cache.ts`,
-          codegenYml: `${packageRoot}/codegen.yml`,
+          codegenConfig: `${packageRoot}/codegen.ts`,
           graphql: `${srcRoot}/generated/graphql.tsx`,
           service: `${srcRoot}/services/apollo/index.ts`,
         },

diff --git a/packages/react-generators/src/generators/apollo/react-apollo/generated/template-renderers.ts b/packages/react-generators/src/generators/apollo/react-apollo/generated/template-renderers.ts
@@ -28,6 +28,16 @@ export interface ApolloReactApolloRenderers {
       >,
     ) => BuilderAction;
   };
+  codegenConfig: {
+    render: (
+      options: Omit<
+        RenderTsTemplateFileActionInput<
+          typeof APOLLO_REACT_APOLLO_TEMPLATES.codegenConfig
+        >,
+        'destination' | 'importMapProviders' | 'template'
+      >,
+    ) => BuilderAction;
+  };
   graphql: {
     render: (
       options: Omit<
@@ -81,6 +91,14 @@ const apolloReactApolloRenderersTask = createGeneratorTask({
                 ...options,
               }),
           },
+          codegenConfig: {
+            render: (options) =>
+              typescriptFile.renderTemplateFile({
+                template: APOLLO_REACT_APOLLO_TEMPLATES.codegenConfig,
+                destination: paths.codegenConfig,
+                ...options,
+              }),
+          },
           graphql: {
             render: (options) =>
               typescriptFile.renderTemplateFile({

diff --git a/...ages/react-generators/src/generators/apollo/react-apollo/generated/ts-import-providers.ts b/...ages/react-generators/src/generators/apollo/react-apollo/generated/ts-import-providers.ts
@@ -18,6 +18,7 @@ import {
 import { APOLLO_REACT_APOLLO_PATHS } from './template-paths.js';
 
 const reactApolloImportsSchema = createTsImportMapSchema({
+  config: {},
   createApolloCache: {},
   createApolloClient: {},
 });
@@ -48,6 +49,7 @@ const apolloReactApolloImportsTask = createGeneratorTask({
           { '*': paths.graphql },
         ),
         reactApolloImports: createTsImportMap(reactApolloImportsSchema, {
+          config: paths.codegenConfig,
           createApolloCache: paths.cache,
           createApolloClient: paths.service,
         }),

diff --git a/packages/react-generators/src/generators/apollo/react-apollo/generated/typed-templates.ts b/packages/react-generators/src/generators/apollo/react-apollo/generated/typed-templates.ts
@@ -1,7 +1,4 @@
-import {
-  createTextTemplateFile,
-  createTsTemplateFile,
-} from '@baseplate-dev/core-generators';
+import { createTsTemplateFile } from '@baseplate-dev/core-generators';
 import path from 'node:path';
 
 const appApolloProvider = createTsTemplateFile({
@@ -35,13 +32,15 @@ const cache = createTsTemplateFile({
   variables: {},
 });
 
-const codegenYml = createTextTemplateFile({
+const codegenConfig = createTsTemplateFile({
   fileOptions: { kind: 'singleton' },
-  name: 'codegen-yml',
+  importMapProviders: {},
+  name: 'codegen-config',
+  projectExports: { config: {} },
   source: {
-    path: path.join(import.meta.dirname, '../templates/package/codegen.yml'),
+    path: path.join(import.meta.dirname, '../templates/package/codegen.ts'),
   },
-  variables: { TPL_SCHEMA_LOCATION: { description: 'Location of the schema' } },
+  variables: { TPL_BACKEND_SCHEMA: {} },
 });
 
 const graphql = createTsTemplateFile({
@@ -72,7 +71,7 @@ const service = createTsTemplateFile({
 });
 
 export const APOLLO_REACT_APOLLO_TEMPLATES = {
-  codegenYml,
+  codegenConfig,
   appApolloProvider,
   graphql,
   cache,