create-sitecore-jss 22.2.0-canary.81 → 22.2.0-canary.83

package/dist/templates/angular/README.md

@@ -3,11 +3,51 @@
 <!---
 @TODO: Update to next version docs before release
 -->
-
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-angular.html)
 
-<!---
-@TODO: Verify the link for angular xmcloud when documentation is ready
--->
 
-[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-angular.html)
+## App setup
+
+1. `npm install`
+1. `npm install -g @sitecore-jss/sitecore-jss-cli`
+1. `jss setup`
+
+> This setup is optional to get started with development, as it assumes you have Sitecore installed.
+>
+> If you answer "yes", you would need to provide the path to your Sitecore installation's "Website" folder.
+
+## Development server
+
+Run `jss start`.
+
+The app will be built and webpack server will be started. So it's expected that the browser will open with `http://localhost:3000` and familiar default welcome content is rendered.
+
+The app will automatically reload if you change any of the source files.
+
+When running the development server, it automatically sets up a sitecore mock server configures a proxy that forwards all requests to `/sitecore` to that sitecore mock server. Check `proxy.conf.js` to see mock server and proxy implementation.
+
+### Congratulations!
+
+The app is now running in dev mode sourcing data from local files and is not connected to Sitecore in any way.
+
+## App deployment
+
+### Pre-requisites
+
+1. Sitecore instance has JSS packages installed.
+1. Sitecore is configured for this JSS app.
+
+### Steps
+
+Run `jss deploy package`.
+
+This step will:
+
+* Run the production bundle of your app.
+* Generate the app manifest.
+* Generate a package with the manifest and production bundle.
+* Install the package over HTTP on your Sitecore instance.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/dist/templates/angular/angular.json

@@ -49,7 +49,12 @@
               ],
               "baseHref": "/",
               "aot": true,
-              "optimization": true,
+              "//": [
+                "You might want to adjust the optimization entry to workaround a bug with bootstrap warnings caused by Angular",
+                "The warnings may occur during build and when running connected mode. Check below for possible fixes.",
+                "https://github.com/ng-bootstrap/ng-bootstrap/issues/4306"
+              ],
+              "optimization": "true",
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,

package/dist/templates/angular/gitignore

@@ -9,15 +9,10 @@ scjssconfig.json
 /dist-server
 /tmp
 /out-tsc
-/.angular
 
 # dependencies
 /node_modules
 
-# local env files
-.env.local
-.env.*.local
-
 # IDEs and editors
 /.idea
 .project

package/dist/templates/angular/package.json

@@ -15,15 +15,18 @@
   },
   "scripts": {
     "ng": "ng",
-    "lint": "ng lint <%- appName %> --fix",
+    "lint:yml": "ts-node ./scripts/lint-yml.ts",
+    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
     "e2e": "ng e2e",
     "jss": "jss",
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
     "start:connected": "npm-run-all --serial bootstrap start:angular start:watch-components",
-    "build": "npm-run-all --serial bootstrap build:client build:server",
-    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component --no-manifest",
+    "build": "npm-run-all --serial bootstrap --serial build:client build:server",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component",
     "start:angular": "ng serve -o",
-    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory/index.ts --watch",
-    "build:client": "cross-env-shell ng build --configuration=production --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
+    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
+    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory.ts --watch",
+    "build:client": "cross-env-shell ng build --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
     "build:server": "cross-env-shell ng run <%- appName %>:server:production --output-path=$npm_package_config_buildArtifactsPath",
     "postbuild:server": "move-cli ./dist/main.js ./dist/server.bundle.js",
     "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
@@ -63,6 +66,7 @@
     "core-js": "~3.37.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
+    "lodash": "^4.17.21",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "~0.14.7"
@@ -81,23 +85,30 @@
     "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.0-canary",
     "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
     "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "~20.14.10",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
+    "body-parser": "~1.20.2",
     "chalk": "~4.1.0",
     "chokidar": "^3.5.2",
     "codelyzer": "~6.0.1",
     "constant-case": "^3.0.4",
+    "cookie-parser": "~1.4.5",
     "cross-env": "~7.0.3",
     "del-cli": "^5.0.0",
     "dotenv": "^16.0.0",
     "dotenv-webpack": "^7.1.0",
+    "enhanced-resolve": "5.7.0",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
+    "express": "~4.17.1",
+    "fs-extra": "~9.1.0",
+    "isomorphic-fetch": "^3.0.0",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
     "karma": "^6.3.2",
@@ -110,6 +121,7 @@
     "npm-run-all": "~4.1.5",
     "protractor": "^7.0.0",
     "ts-node": "~10.9.2",
-    "typescript": "~5.2.2"
+    "typescript": "~5.2.2",
+    "yaml-lint": "^1.2.4"
   }
 }

package/dist/templates/angular/proxy.conf.js

@@ -1,10 +1,28 @@
 /*
-  When the app runs in connected mode, some of the requests should be
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  When the app runs in connected mode, Sitecore is present and some of the requests should be
   proxied to the Sitecore API
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling angular-cli to proxy requests to the API paths to this express instance.
+
+  See /scripts/disconnected-mode-proxy.ts for the proxy API server configuration.
 */
+const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
 const environment = require('./src/environments/environment.js').environment;
 
-const PROXY_CONFIG = [
+const port = 3043;
+
+const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ? [
+  {
+    context: ['/data', '/sitecore'],
+    target: `http://localhost:${port}`,
+    secure: false,
+  },
+] : [
   {
     context: [
       // API endpoints
@@ -12,12 +30,12 @@ const PROXY_CONFIG = [
       // media items
       '/-',
       // visitor identification
-      '/layouts',
+      '/layouts'
     ],
     target: environment.sitecoreApiHost,
     secure: false,
-    changeOrigin: true,
-  },
+    changeOrigin: true
+  }
 ];
 
 module.exports = PROXY_CONFIG;

package/dist/templates/angular/scripts/bootstrap.ts

@@ -1,4 +1,8 @@
 import 'dotenv/config';
+import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { generateConfig } from './generate-config';
+const projects = require('../angular.json').projects;
+const chalk = require('chalk');
 
 /*
   BOOTSTRAPPING
@@ -7,15 +11,30 @@ import 'dotenv/config';
   and the global config module.
 */
 
-/*
-   PLUGINS GENERATION
-*/
-require('./generate-plugins');
+const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+
+if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
+  throw new Error(chalk.red("GraphQL requests to Dictionary and Layout services are not supported in disconnected mode."))
+}
 
 /*
   CONFIG GENERATION
+  Generates the /src/environments/environment.js file which contains runtime configuration
+  that the app can import and use.
+
+  This is generated rather than using Angular environments because of the need to set config params
+  based on build arguments, which env files don't directly allow.
 */
-require('./generate-config');
+function writeConfig(configOverride: { production: boolean, sitecoreApiHost?: string }, outputPath?: string) {
+  if (disconnected) {
+    configOverride.sitecoreApiHost = `http://localhost:${projects['<%- appName %>'].architect.serve.options.port}`;
+  }
+
+  generateConfig(configOverride, outputPath);
+}
+
+writeConfig({ production: false });
+writeConfig({ production: true }, 'src/environments/environment.prod.js');
 
 /*
   COMPONENT FACTORY GENERATION

package/dist/templates/angular/scripts/generate-component-factory.ts

@@ -0,0 +1,166 @@
+import * as fs from 'fs';
+const path = require('path');
+const chokidar = require('chokidar');
+
+/*
+  COMPONENT FACTORY GENERATION
+  Generates the /src/app/components/app-components.module.ts file which maps Angular components
+  to JSS components.
+
+  The component factory module defines a mapping between a string component name and a Angular component instance.
+  When the Sitecore Layout service returns a layout definition, it returns named components.
+  This mapping is used to construct the component hierarchy for the layout.
+
+  NOTE: this script can run in two modes. The default mode, the component factory file is written once.
+  But if `--watch` is a process argument, the component factory source folder will be watched,
+  and the componentFactory.js rewritten on added or deleted files.
+  This is used during `jss start` to pick up new or removed components at runtime.
+*/
+
+export interface PackageDefinition {
+  name: string;
+  components: {
+    moduleName: string;
+    componentName: string;
+  }[];
+}
+
+const componentFactoryPath = path.resolve('src/app/components/app-components.module.ts');
+const componentRootPath = 'src/app/components';
+
+const isWatch = process.argv.some((arg) => arg === '--watch');
+
+if (isWatch) {
+  watchComponentFactory();
+} else {
+  writeComponentFactory();
+}
+
+function watchComponentFactory() {
+  console.log(`Watching for changes to component factory sources in ${componentRootPath}...`);
+
+  chokidar
+    .watch(componentRootPath, { ignoreInitial: true, awaitWriteFinish: true })
+    .on('add', writeComponentFactory)
+    .on('unlink', writeComponentFactory);
+}
+
+function writeComponentFactory() {
+  const componentFactory = generateComponentFactory();
+
+  console.log(`Writing component factory to ${componentFactoryPath}`);
+
+  fs.writeFileSync(componentFactoryPath, componentFactory, { encoding: 'utf8' });
+}
+
+function generateComponentFactory() {
+  // By convention, we expect to find Angular components
+  // under /src/app/components/component-name/component-name.component.ts
+  // If a component-name.module.ts file exists, we will treat it as lazy loaded.
+  // If you'd like to use your own convention, encode it below.
+  // NOTE: generating the component factory module is also totally optional,
+  // and it can be maintained manually if preferred.
+
+  const imports: string[] = [];
+  /**
+   * You can specify components which you want to import from external/internal packages
+   * in format:
+   *  {
+   *    name: 'package name',
+   *    components: [
+   *      {
+   *        componentName: 'component name', // component rendering name,
+   *        moduleName: 'module name' // component name to import from the package
+   *      }
+   *    ]
+   *  }
+   */
+  const packages: PackageDefinition[] = [];
+  const registrations: string[] = [];
+  const lazyRegistrations: string[] = [];
+  const declarations: string[] = [];
+
+  packages.forEach((p) => {
+    const variables = p.components
+      .map((c) => {
+        registrations.push(`{ name: '${c.componentName}', type: ${c.moduleName} },`);
+        declarations.push(`${c.moduleName},`);
+
+        return c.moduleName;
+      })
+      .join(', ');
+    imports.push(`import { ${variables} } from '${p.name}'`);
+  });
+
+  fs.readdirSync(componentRootPath).forEach((componentFolder) => {
+    // ignore ts files in component root folder
+    if (componentFolder.endsWith('.ts') || componentFolder === '.gitignore') {
+      return;
+    }
+
+    const componentFilePath = path.join(componentRootPath, componentFolder, `${componentFolder}.component.ts`);
+
+    if (!fs.existsSync(componentFilePath)) {
+      return;
+    }
+
+    const componentFileContents = fs.readFileSync(componentFilePath, 'utf8');
+
+    // ASSUMPTION: your component should export a class directly that follows Angular conventions,
+    // i.e. `export class FooComponent` - so we can detect the component's name for auto registration.
+    const componentClassMatch = /export class (.+?)Component\b/g.exec(componentFileContents);
+
+    if (componentClassMatch === null) {
+      console.debug(`Component ${componentFilePath} did not seem to export a component class. It will be skipped.`);
+      return;
+    }
+
+    const componentName = componentClassMatch[1];
+    const importVarName = `${componentName}Component`;
+
+    // check for lazy loading needs
+    const moduleFilePath = path.join(componentRootPath, componentFolder, `${componentFolder}.module.ts`);
+    const isLazyLoaded = fs.existsSync(moduleFilePath);
+
+    if (isLazyLoaded) {
+      console.debug(`Registering JSS component (lazy) ${componentName}`);
+      lazyRegistrations.push(`{ path: '${componentName}', loadChildren: () => import('./${componentFolder}/${componentFolder}.module').then(m => m.${componentName}Module) },`);
+    } else {
+      console.debug(`Registering JSS component ${componentName}`);
+      imports.push(`import { ${importVarName} } from './${componentFolder}/${componentFolder}.component';`);
+      registrations.push(`{ name: '${componentName}', type: ${importVarName} },`);
+      declarations.push(`${importVarName},`);
+    }
+  });
+
+  return `// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-factory.js to modify the generation of this file.
+// Use app-components.shared.module.ts to modify the imports, etc of this module.
+// Note: code-generation is optional! See ./.gitignore for directions to remove it,
+// if you do not want it.
+
+import { NgModule } from '@angular/core';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { AppComponentsSharedModule } from './app-components.shared.module';
+${imports.join('\n')}
+
+@NgModule({
+  imports: [
+    AppComponentsSharedModule,
+    JssModule.withComponents([
+      ${registrations.join('\n      ')}
+    ], [
+      ${lazyRegistrations.join('\n      ')}
+    ]),
+  ],
+  exports: [
+    JssModule,
+    AppComponentsSharedModule,
+  ],
+  declarations: [
+    ${declarations.join('\n    ')}
+  ],
+})
+export class AppComponentsModule { }
+`;
+}

package/dist/templates/angular/scripts/generate-config.ts

@@ -1,9 +1,7 @@
-import 'dotenv/config';
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
-import { jssConfigFactory } from './config';
-import { JssConfig } from 'lib/config';
+const packageConfig = require('../package.json');
 
 /**
  * Generate config
@@ -12,88 +10,91 @@ import { JssConfig } from 'lib/config';
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
-
-const defaultConfigValue: JssConfig = {
-  production: false,
-  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
-  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
-  sitecoreSiteName: process.env[`${constantCase('sitecoreSiteName')}`],
-  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
-  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
-  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
-  defaultServerRoute: '/',
-};
-
-async function main() {
-  await generateConfig('src/environments/environment.js', defaultConfigValue, {
+export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
+  const defaultConfig = {
     production: false,
-  });
-  await generateConfig('src/environments/environment.prod.js', defaultConfigValue, {
-    production: true,
-  });
-}
-
-main();
+    sitecoreApiHost: '',
+    sitecoreApiKey: 'no-api-key-set',
+    sitecoreSiteName: process.env.SITECORE_SITE_NAME,
+    sitecoreLayoutServiceConfig: 'jss',
+    defaultLanguage: 'en',
+    defaultServerRoute: '/',
+    layoutServiceConfigurationName: 'default',
+  };
 
-/**
- * Generates the JSS config based on config plugins (under ./config/plugins)
- * and then writes the config to disk.
- * @param {string} outputPath the output path of the generated config.
- * @param {JssConfig} [defaultConfig] Default configuration.
- * @param {[key: string]:unknown} [configOverrides] configuration values that override the generated ones.
- */
-export function generateConfig(
-  outputPath: string,
-  defaultConfig: JssConfig = defaultConfigValue,
-  configOverrides?: { [key: string]: unknown }
-) {
-  // Handle undefined values
-  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
-    return {
-      ...acc,
-      [key]: defaultConfig[key] || '',
-    };
-  }, {});
-
-  return jssConfigFactory
-    .create(defaultConfig)
-    .then((config) => {
-      writeConfig(Object.assign(config, configOverrides), outputPath);
-    })
-    .catch((e) => {
-      console.error('Error generating config');
-      console.error(e);
-      process.exit(1);
-    });
-}
-
-/**
- * Writes the config object to disk with support for environment variables.
- * @param {JssConfig} config JSS configuration to write.
- * @param {string} outputPath the outputh path of the generated config.
- */
-export function writeConfig(config: JssConfig, outputPath?: string) {
   if (!outputPath) {
     outputPath = 'src/environments/environment.js';
   }
 
+  // require + combine config sources
+  const scjssConfig = transformScJssConfig();
+  const packageJson = transformPackageConfig();
+
+  // optional:
+  // do any other dynamic config source (e.g. environment-specific config files)
+  // Object.assign merges the objects in order, so the
+  // package.json config can override the calculated config,
+  // scjssconfig.json overrides it,
+  // and finally config passed in the configOverrides param wins.
+  const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
+
+  // The GraphQL endpoint is an example of making a _computed_ config setting
+  // based on other config settings.
+  const computedConfig: { [key: string]: string } = {};
+  computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
+
   let configText = `/* eslint-disable */
-  // Do not edit this file, it is auto-generated at build time!
-  // See scripts/bootstrap.ts to modify the generation of this file.
-  const config = {};\n`;
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/bootstrap.ts to modify the generation of this file.
+const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    // Handle undefined values
-    const value = config[prop] || '';
-    configText += `config.${prop} = process.env.${constantCase(
-      prop
-    )} || "${value.toString().trim()}";\n`;
+    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]?.toString().trim()}";\n`;
+  });
+  // Set computed values, allowing override with environment variables
+  Object.keys(computedConfig).forEach((prop) => {
+    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
+      computedConfig[prop]?.toString().trim()
+    };\n`;
   });
-
   configText += `module.exports.environment = config;`;
 
   const configPath = path.resolve(outputPath);
   console.log(`Writing runtime config to ${configPath}`);
   fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
 }
+
+function transformScJssConfig() {
+  // scjssconfig.json may not exist if you've never run setup
+  // so if it doesn't we substitute a fake object
+  let config;
+  try {
+    config = require('../scjssconfig.json');
+  } catch (e) {
+    return {};
+  }
+
+  if (!config) {
+    return {};
+  }
+
+  return {
+    sitecoreApiKey: config.sitecore.apiKey,
+    sitecoreApiHost: config.sitecore.layoutServiceHost,
+  };
+}
+
+function transformPackageConfig() {
+  const packageAny = packageConfig;
+
+  if (!packageAny.config) {
+    return {};
+  }
+
+  return {
+    sitecoreSiteName: packageAny.config.appName,
+    defaultLanguage: packageAny.config.language || 'en',
+    graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
+  };
+}

package/dist/templates/angular/scripts/update-graphql-fragment-data.ts

@@ -1,6 +1,6 @@
+import * as fetch from 'isomorphic-fetch';
 import * as fs from 'fs';
-import clientFactory from 'lib/graphql-client-factory';
-import { getGraphQLClientFactoryConfig } from 'lib/graphql-client-factory/config';
+import { generateConfig } from './generate-config';
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -9,23 +9,28 @@ import { getGraphQLClientFactoryConfig } from 'lib/graphql-client-factory/config
 //
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-import './generate-config';
+generateConfig();
 
-const clientFactoryConfig = getGraphQLClientFactoryConfig();
+let jssConfig;
 
-console.log(`Updating GraphQL fragment type data from ${clientFactoryConfig.endpoint}...`);
+try {
+  jssConfig = require('../src/environments/environment').environment;
+} catch (e) {
+  console.error(
+    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
+  );
+  console.error(e);
+  process.exit(1);
+}
 
-clientFactory()
-  .request<{
-    [key: string]: unknown;
-    __schema: {
-      kind: string;
-      name: string;
-      types: { possibleTypes?: { name: string } }[];
-    };
-  }>(
-    `
-      { 
+console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoint}...`);
+
+fetch(jssConfig.graphQLEndpoint, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
+  body: JSON.stringify({
+    query: `
+      {
         __schema {
           types {
             kind
@@ -36,18 +41,20 @@ clientFactory()
           }
         }
       }
-    `
-  )
+    `,
+  }),
+})
+  .then((result) => result.json())
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.__schema.types.filter((type) => type.possibleTypes !== null);
+    const filteredData = result.data.__schema.types.filter((type: { possibleTypes: Array<string>; }) => type.possibleTypes !== null);
 
     const filteredResult = { ...result };
-    filteredResult.__schema.types = filteredData;
+    filteredResult.data.__schema.types = filteredData;
 
     fs.writeFile(
       './src/graphql-fragment-types.ts',
-      `export default ${JSON.stringify(filteredResult, null, 2)}`,
+      `export default ${JSON.stringify(filteredResult.data, null, 2)}`,
       (err) => {
         if (err) {
           console.error('Error writing GraphQLFragmentTypes file', err);