Merge pull request #1505 from maayanbar13/feat/graphql-model-shim-doc

docs(graphql): added docs for graphql model shim

Author: kamilmysliwiec

content/graphql/sharing-models.md

@@ -0,0 +1,26 @@
+### Sharing models
+
+
+
+> warning **Warning** This chapter applies only to the code first approach.
+
+One of the biggest advantages of using Typescript for the backend of your project is the ability to reuse the same models in a Typescript-based frontend application, by using a common Typescript package.    
+
+But there's a problem: the models created using the code first approach are heavily decorated with GraphQL related decorators. Those decorators are irrelevant in the frontend, negatively impacting performance.
+
+#### Using the model shim
+
+To solve this issue, NestJS provides a "shim" which allows you to replace the original decorators with inert code by using a `webpack` (or similar) configuration.
+To use this shim, configure an alias between the `@nestjs/graphql` package and the shim.
+
+For example, for webpack this is resolved this way:
+
+```typescript
+resolve: { // see: https://webpack.js.org/configuration/resolve/
+  alias: {
+      "@nestjs/graphql": path.resolve(__dirname, "../node_modules/@nestjs/graphql/dist/extra/graphql-model-shim")
+  }
+}
+```
+
+> info **Hint** The [TypeORM](/techniques/database) package has a similar shim that can be found [here](https://github.com/typeorm/typeorm/blob/master/extra/typeorm-model-shim.js).

src/app/homepage/menu/menu.component.ts

@@ -138,6 +138,7 @@ export class MenuComponent implements OnInit {
         { title: 'Unions and Enums', path: '/graphql/unions-and-enums' },
         { title: 'Field middleware', path: '/graphql/field-middleware' },
         { title: 'Mapped types', path: '/graphql/mapped-types' },
+        { title: 'Sharing Models', path: '/graphql/sharing-models' },
         { title: 'Plugins', path: '/graphql/plugins' },
         { title: 'Complexity', path: '/graphql/complexity' },
         { title: 'Extensions', path: '/graphql/extensions' },

src/app/homepage/pages/graphql/graphql.module.ts

@@ -18,6 +18,7 @@ import { QuickStartComponent } from './quick-start/quick-start.component';
 import { ResolversMapComponent } from './resolvers-map/resolvers-map.component';
 import { ScalarsComponent } from './scalars/scalars.component';
 import { SchemaGeneratorComponent } from './schema-generator/schema-generator.component';
+import { SharingModelsComponent } from "./sharing-models/sharing-models.component";
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { UnionsAndEnumsComponent } from './unions-and-enums/unions.component';
 
@@ -117,6 +118,11 @@ const routes: Routes = [
     component: InterfacesComponent,
     data: { title: 'GraphQL + TypeScript - Interfaces' },
   },
+  {
+    path: 'sharing-models',
+    component: SharingModelsComponent,
+    data: { title: "GraphQL + TypeScript - Sharing models"}
+  },
   {
     path: 'mapped-types',
     component: MappedTypesComponent,
@@ -148,6 +154,7 @@ const routes: Routes = [
     ScalarsComponent,
     SchemaGeneratorComponent,
     MappedTypesComponent,
+    SharingModelsComponent,
     CliPluginComponent,
     FederationComponent,
     ComplexityComponent,

src/app/homepage/pages/graphql/sharing-models/sharing-models.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BasePageComponent } from '../../page/page.component';
+
+@Component({
+  selector: 'app-sharing-models',
+  templateUrl: './sharing-models.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SharingModelsComponent extends BasePageComponent {}