[ { "path": ".editorconfig", "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events*.json\nspeed-measure-plugin*.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n" }, { "path": "LICENSE", "content": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n" }, { "path": "README.md", "content": "# Angular Spacex Graphql Codegen\n\n## Mission\n\nOur goal is to make an Angular app with a list of the past SpaceX launches along with an associated details page. Data is provided via the [SpaceX GraphQL API](https://medium.com/open-graphql/launching-spacex-graphql-api-b3d7029086e0) and Angular services are generated via [GraphQL Code Generator](https://graphql-code-generator.com/). We use [Apollo Angular](https://www.apollographql.com/docs/angular/) to access data from the frontend. The API is free so please be nice and don't abuse it.\n\n## End Result\n\n![List view](list-example.jpg)\n\n![Details view](details-example.jpg)\n\n## Steps\n\n1. Generate a new angular application with routing\n\n ```bash\n ng new angular-spacex-graphql-codegen --routing=true --style=css\n ```\n\n Make sure to delete the default template in `src/app/app.component.html`\n\n1. Install the [Apollo VS Code plugin](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) and in the root of the project add `apollo.config.js`\n\n ```javascript\n module.exports = {\n client: {\n service: {\n name: 'angular-spacex-graphql-codegen',\n url: 'https://api.spacex.land/graphql/'\n }\n }\n };\n ```\n\n This points the extension at the SpaceX GraphQL API so we get autocomplete, type information, and other cool features in GraphQL files. You may need to restart VS Code.\n\n1. Generate our two components:\n\n ```bash\n ng g component launch-list --changeDetection=OnPush\n ```\n\n ```bash\n ng g component launch-details --changeDetection=OnPush\n ```\n\n Because our generated services use observables we choose OnPush change detection for the best performance.\n\n1. In `src/app/app-routing.module.ts` we setup the routing:\n\n ```typescript\n import { LaunchListComponent } from './launch-list/launch-list.component';\n import { LaunchDetailsComponent } from './launch-details/launch-details.component';\n\n const routes: Routes = [\n {\n path: '',\n component: LaunchListComponent\n },\n {\n path: ':id',\n component: LaunchDetailsComponent\n }\n ];\n ```\n\n1. Each component will have its own data requirments so we co-locate our graphql query files next to them\n\n ```graphql\n # src/app/launch-list/launch-list.graphql\n\n query pastLaunchesList($limit: Int!) {\n launchesPast(limit: $limit) {\n id\n mission_name\n links {\n flickr_images\n mission_patch_small\n }\n rocket {\n rocket_name\n }\n launch_date_utc\n }\n }\n ```\n\n ```graphql\n # src/app/launch-details/launch-details.graphql\n\n query launchDetails($id: ID!) {\n launch(id: $id) {\n id\n mission_name\n details\n links {\n flickr_images\n mission_patch\n }\n }\n }\n ```\n\n Note the first line: `query launchDetails($id: ID!)` When we generate the Angular service the query name is turned into PascalCase and GQL is appended to the end, so the service name for the launch details would be LaunchDetailsGQL. Also in the first line we define any variables we'll need to pass into the query. Please note it's import to include id in the query return so apollo can cache the data.\n\n1. We add [Apollo Angular](https://www.apollographql.com/docs/angular/) to our app with `ng add apollo-angular`. In `src/app/graphql.module.ts` we set our API url `const uri = 'https://api.spacex.land/graphql/';`.\n\n1. Install Graphql Code Generator and the needed plugins `npm i --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-apollo-angular @graphql-codegen/typescript-operations`\n\n1. In the root of the project create a `codegen.yml` file:\n\n ```yml\n # Where to get schema data\n schema:\n - https://api.spacex.land/graphql/\n # The client side queries to turn into services\n documents:\n - src/**/*.graphql\n # Where to output the services and the list of plugins\n generates:\n ./src/app/services/spacexGraphql.service.ts:\n plugins:\n - typescript\n - typescript-operations\n - typescript-apollo-angular\n ```\n\n1. In package.json add a script `\"codegen\": \"gql-gen\"` then `npm run codegen` to generate the Angular Services.\n\n1. To make it look nice we add Angular Material `ng add @angular/material` then in the `app.module.ts` we import the card module and add to the imports array: `import { MatCardModule } from '@angular/material/card';`\n\n1. Lets start with the list of past launches displayed on the screen:\n\n ```typescript\n import { map } from 'rxjs/operators';\n import { PastLaunchesListGQL } from '../services/spacexGraphql.service';\n\n export class LaunchListComponent {\n constructor(private readonly pastLaunchesService: PastLaunchesListGQL) {}\n\n // Please be careful to not fetch too much, but this amount lets us see lazy loading imgs in action\n pastLaunches$ = this.pastLaunchesService\n .fetch({ limit: 30 })\n // Here we extract our query data, we can also get info like errors or loading state from res\n .pipe(map((res) => res.data.launchesPast));\n }\n ```\n\n ```html\n \n
\n
\n \n \n \n {{ launch.mission_name }}\n {{ launch.rocket.rocket_name }}\n \n \n \n
\n
\n \n ```\n\n Notice the cool addition of [lazy loading images](https://web.dev/native-lazy-loading), if you emulate a mobile device in Chrome and fetch enough launches you should see the images lazy load while you scroll!\n\n To make it look nice we add CSS Grid\n\n ```css\n .container {\n padding-top: 20px;\n display: grid;\n grid-gap: 30px;\n grid-template-columns: repeat(auto-fill, 350px);\n justify-content: center;\n }\n\n .mat-card {\n cursor: pointer;\n }\n ```\n\n1. Next we make the details page for a launch, we get the id from the route params and pass that to our service\n\n ```typescript\n import { ActivatedRoute } from '@angular/router';\n import { map, switchMap } from 'rxjs/operators';\n import { LaunchDetailsGQL } from '../services/spacexGraphql.service';\n\n export class LaunchDetailsComponent {\n constructor(\n private readonly route: ActivatedRoute,\n private readonly launchDetailsService: LaunchDetailsGQL\n ) {}\n\n launchDetails$ = this.route.paramMap.pipe(\n map((params) => params.get('id') as string),\n switchMap((id) => this.launchDetailsService.fetch({ id })),\n map((res) => res.data.launch)\n );\n }\n ```\n\n The HTML looks very similar to the list of launches\n\n ```html\n \n
\n \n \n {{ launchDetails.mission_name }}\n \n \n \n

{{ launchDetails.details }}

\n \n \n
\n
\n \n
\n \n ```\n\n Finally we add CSS Grid for the pictures\n\n ```css\n .photo-grid {\n padding-top: 30px;\n display: grid;\n grid-gap: 10px;\n grid-template-columns: repeat(auto-fill, 300px);\n justify-content: center;\n }\n ```\n\n1. `npm start`, navigate to `http://localhost:4200/`, and it should work!\n\n### Extra Credit: Relative launch times\n\nThanks to the new builtin [relative time formating](https://v8.dev/features/intl-relativetimeformat) in V8, we can add `launched x days ago`\n\n1. Generate the pipe: `ng g pipe relative-time --module=app.module --flat=false`\n\n1. The pipe takes in the UTC time and returns a formatted string\n\n ```typescript\n import { Pipe, PipeTransform } from '@angular/core';\n\n const milliSecondsInDay = 1000 * 3600 * 24;\n\n // Cast as any because typescript typing haven't updated yet\n const rtf = new (Intl as any).RelativeTimeFormat('en');\n\n @Pipe({\n name: 'relativeTime'\n })\n export class RelativeTimePipe implements PipeTransform {\n transform(utcTime: string): string {\n const diffInMillicseconds =\n new Date(utcTime).getTime() - new Date().getTime();\n const diffInDays = Math.round(diffInMillicseconds / milliSecondsInDay);\n return rtf.format(diffInDays, 'day');\n }\n }\n ```\n\n1. Add the pipe to our launch card in src/app/launch-list/launch-list.component.html\n\n ```html\n {{ launch.rocket.rocket_name }} - launched {{ launch.launch_date_utc |\n relativeTime }}\n ```\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"angular-spacex-graphql-codegen\": {\n \"projectType\": \"application\",\n \"schematics\": {},\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:browser\",\n \"options\": {\n \"outputPath\": \"dist/angular-spacex-graphql-codegen\",\n \"index\": \"src/index.html\",\n \"main\": \"src/main.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.app.json\",\n \"aot\": false,\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ],\n \"styles\": [\n \"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css\",\n \"src/styles.css\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"production\": {\n \"fileReplacements\": [\n {\n \"replace\": \"src/environments/environment.ts\",\n \"with\": \"src/environments/environment.prod.ts\"\n }\n ],\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"extractCss\": true,\n \"namedChunks\": false,\n \"aot\": true,\n \"extractLicenses\": true,\n \"vendorChunk\": false,\n \"buildOptimizer\": true,\n \"budgets\": [\n {\n \"type\": \"initial\",\n \"maximumWarning\": \"2mb\",\n \"maximumError\": \"5mb\"\n },\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\",\n \"maximumError\": \"10kb\"\n }\n ]\n }\n }\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"browserTarget\": \"angular-spacex-graphql-codegen:build\"\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"angular-spacex-graphql-codegen:build:production\"\n }\n }\n },\n \"extract-i18n\": {\n \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n \"options\": {\n \"browserTarget\": \"angular-spacex-graphql-codegen:build\"\n }\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"main\": \"src/test.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.spec.json\",\n \"karmaConfig\": \"karma.conf.js\",\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ],\n \"styles\": [\n \"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css\",\n \"src/styles.css\"\n ],\n \"scripts\": []\n }\n },\n \"lint\": {\n \"builder\": \"@angular-devkit/build-angular:tslint\",\n \"options\": {\n \"tsConfig\": [\n \"tsconfig.app.json\",\n \"tsconfig.spec.json\",\n \"e2e/tsconfig.json\"\n ],\n \"exclude\": [\n \"**/node_modules/**\"\n ]\n }\n },\n \"e2e\": {\n \"builder\": \"@angular-devkit/build-angular:protractor\",\n \"options\": {\n \"protractorConfig\": \"e2e/protractor.conf.js\",\n \"devServerTarget\": \"angular-spacex-graphql-codegen:serve\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"angular-spacex-graphql-codegen:serve:production\"\n }\n }\n }\n }\n }\n },\n \"defaultProject\": \"angular-spacex-graphql-codegen\"\n}" }, { "path": "apollo.config.js", "content": "module.exports = {\n client: {\n service: {\n name: 'angular-spacex-graphql-codegen',\n url: 'https://api.spacex.land/graphql/'\n }\n }\n};\n" }, { "path": "browserslist", "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# You can see what browsers were selected by your queries by running:\n# npx browserslist\n\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\nnot IE 9-11 # For IE 9-11 support, remove 'not'." }, { "path": "codegen.yml", "content": "# Where to get schema data\nschema:\n - https://api.spacex.land/graphql/\n# The client side queries to turn into services\ndocuments:\n - src/**/*.graphql\n# Where to output the services and the list of plugins\ngenerates:\n ./src/app/services/spacexGraphql.service.ts:\n plugins:\n - typescript\n - typescript-operations\n - typescript-apollo-angular\n" }, { "path": "e2e/protractor.conf.js", "content": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\n/**\n * @type { import(\"protractor\").Config }\n */\nexports.config = {\n allScriptsTimeout: 11000,\n specs: [\n './src/**/*.e2e-spec.ts'\n ],\n capabilities: {\n 'browserName': 'chrome'\n },\n directConnect: true,\n baseUrl: 'http://localhost:4200/',\n framework: 'jasmine',\n jasmineNodeOpts: {\n showColors: true,\n defaultTimeoutInterval: 30000,\n print: function() {}\n },\n onPrepare() {\n require('ts-node').register({\n project: require('path').join(__dirname, './tsconfig.json')\n });\n jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n }\n};" }, { "path": "e2e/src/app.e2e-spec.ts", "content": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', () => {\n let page: AppPage;\n\n beforeEach(() => {\n page = new AppPage();\n });\n\n it('should display welcome message', () => {\n page.navigateTo();\n expect(page.getTitleText()).toEqual('angular-spacex-graphql-codegen app is running!');\n });\n\n afterEach(async () => {\n // Assert that there are no errors emitted from the browser\n const logs = await browser.manage().logs().get(logging.Type.BROWSER);\n expect(logs).not.toContain(jasmine.objectContaining({\n level: logging.Level.SEVERE,\n } as logging.Entry));\n });\n});\n" }, { "path": "e2e/src/app.po.ts", "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo() {\n return browser.get(browser.baseUrl) as Promise;\n }\n\n getTitleText() {\n return element(by.css('app-root .content span')).getText() as Promise;\n }\n}\n" }, { "path": "e2e/tsconfig.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n \"target\": \"es5\",\n \"types\": [\n \"jasmine\",\n \"jasminewd2\",\n \"node\"\n ]\n }\n}\n" }, { "path": "karma.conf.js", "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n config.set({\n basePath: '',\n frameworks: ['jasmine', '@angular-devkit/build-angular'],\n plugins: [\n require('karma-jasmine'),\n require('karma-chrome-launcher'),\n require('karma-jasmine-html-reporter'),\n require('karma-coverage-istanbul-reporter'),\n require('@angular-devkit/build-angular/plugins/karma')\n ],\n client: {\n clearContext: false // leave Jasmine Spec Runner output visible in browser\n },\n coverageIstanbulReporter: {\n dir: require('path').join(__dirname, './coverage/angular-spacex-graphql-codegen'),\n reports: ['html', 'lcovonly', 'text-summary'],\n fixWebpackSourcePaths: true\n },\n reporters: ['progress', 'kjhtml'],\n port: 9876,\n colors: true,\n logLevel: config.LOG_INFO,\n autoWatch: true,\n browsers: ['Chrome'],\n singleRun: false,\n restartOnFileChange: true\n });\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"angular-spacex-graphql-codegen\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve --aot\",\n \"build\": \"ng build\",\n \"test\": \"ng test\",\n \"lint\": \"ng lint\",\n \"e2e\": \"ng e2e\",\n \"codegen\": \"gql-gen\"\n },\n \"private\": true,\n \"dependencies\": {\n \"@angular/animations\": \"~8.2.5\",\n \"@angular/cdk\": \"~8.2.0\",\n \"@angular/common\": \"~8.2.5\",\n \"@angular/compiler\": \"~8.2.5\",\n \"@angular/core\": \"~8.2.5\",\n \"@angular/forms\": \"~8.2.5\",\n \"@angular/material\": \"^8.2.0\",\n \"@angular/platform-browser\": \"~8.2.5\",\n \"@angular/platform-browser-dynamic\": \"~8.2.5\",\n \"@angular/router\": \"~8.2.5\",\n \"apollo-angular\": \"^1.7.0\",\n \"apollo-angular-link-http\": \"^1.8.0\",\n \"apollo-cache-inmemory\": \"^1.6.3\",\n \"apollo-client\": \"^2.6.4\",\n \"apollo-link\": \"^1.2.13\",\n \"graphql\": \"^14.5.5\",\n \"graphql-tag\": \"^2.10.1\",\n \"hammerjs\": \"^2.0.8\",\n \"rxjs\": \"~6.4.0\",\n \"tslib\": \"^1.10.0\",\n \"zone.js\": \"~0.9.1\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"~0.803.4\",\n \"@angular/cli\": \"~8.3.4\",\n \"@angular/compiler-cli\": \"~8.2.5\",\n \"@angular/language-service\": \"~8.2.5\",\n \"@graphql-codegen/cli\": \"^1.7.0\",\n \"@graphql-codegen/typescript\": \"^1.7.0\",\n \"@graphql-codegen/typescript-apollo-angular\": \"^1.7.0\",\n \"@graphql-codegen/typescript-operations\": \"^1.7.0\",\n \"@types/jasmine\": \"~3.3.8\",\n \"@types/jasminewd2\": \"~2.0.3\",\n \"@types/node\": \"~8.9.4\",\n \"codelyzer\": \"^5.0.0\",\n \"jasmine-core\": \"~3.4.0\",\n \"jasmine-spec-reporter\": \"~4.2.1\",\n \"karma\": \"~4.1.0\",\n \"karma-chrome-launcher\": \"~2.2.0\",\n \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\n \"karma-jasmine\": \"~2.0.1\",\n \"karma-jasmine-html-reporter\": \"^1.4.0\",\n \"protractor\": \"~5.4.0\",\n \"ts-node\": \"~7.0.0\",\n \"tslint\": \"~5.15.0\",\n \"typescript\": \"~3.5.3\"\n }\n}\n" }, { "path": "src/app/app-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { LaunchListComponent } from './launch-list/launch-list.component';\nimport { LaunchDetailsComponent } from './launch-details/launch-details.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LaunchListComponent\n },\n {\n path: ':id',\n component: LaunchDetailsComponent\n }\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule {}\n" }, { "path": "src/app/app.component.css", "content": "" }, { "path": "src/app/app.component.html", "content": "\n" }, { "path": "src/app/app.component.spec.ts", "content": "import { TestBed, async } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () => {\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n imports: [\n RouterTestingModule\n ],\n declarations: [\n AppComponent\n ],\n }).compileComponents();\n }));\n\n it('should create the app', () => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.debugElement.componentInstance;\n expect(app).toBeTruthy();\n });\n\n it(`should have as title 'angular-spacex-graphql-codegen'`, () => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.debugElement.componentInstance;\n expect(app.title).toEqual('angular-spacex-graphql-codegen');\n });\n\n it('should render title', () => {\n const fixture = TestBed.createComponent(AppComponent);\n fixture.detectChanges();\n const compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelector('.content span').textContent).toContain('angular-spacex-graphql-codegen app is running!');\n });\n});\n" }, { "path": "src/app/app.component.ts", "content": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n title = 'angular-spacex-graphql-codegen';\n test = new Date();\n}\n" }, { "path": "src/app/app.module.ts", "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { LaunchListComponent } from './launch-list/launch-list.component';\nimport { LaunchDetailsComponent } from './launch-details/launch-details.component';\nimport { GraphQLModule } from './graphql.module';\nimport { HttpClientModule } from '@angular/common/http';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatCardModule } from '@angular/material/card';\nimport { RelativeTimePipe } from './relative-time/relative-time.pipe';\n\n@NgModule({\n declarations: [AppComponent, LaunchListComponent, LaunchDetailsComponent, RelativeTimePipe],\n imports: [\n BrowserModule,\n AppRoutingModule,\n GraphQLModule,\n HttpClientModule,\n BrowserAnimationsModule,\n MatCardModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n" }, { "path": "src/app/graphql.module.ts", "content": "import {NgModule} from '@angular/core';\nimport {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';\nimport {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';\nimport {InMemoryCache} from 'apollo-cache-inmemory';\n\nconst uri = 'https://api.spacex.land/graphql/'; // <-- add the URL of the GraphQL server here\nexport function createApollo(httpLink: HttpLink) {\n return {\n link: httpLink.create({uri}),\n cache: new InMemoryCache(),\n };\n}\n\n@NgModule({\n exports: [ApolloModule, HttpLinkModule],\n providers: [\n {\n provide: APOLLO_OPTIONS,\n useFactory: createApollo,\n deps: [HttpLink],\n },\n ],\n})\nexport class GraphQLModule {}\n" }, { "path": "src/app/launch-details/launch-details.component.css", "content": ".photo-grid {\n padding-top: 30px;\n display: grid;\n grid-gap: 10px;\n grid-template-columns: repeat(auto-fill, 300px);\n justify-content: center;\n}\n" }, { "path": "src/app/launch-details/launch-details.component.html", "content": "\n
\n \n \n {{ launchDetails.mission_name }}\n \n \n \n

{{ launchDetails.details }}

\n \n \n
\n
\n \n
\n\n" }, { "path": "src/app/launch-details/launch-details.component.spec.ts", "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LaunchDetailsComponent } from './launch-details.component';\n\ndescribe('LaunchDetailsComponent', () => {\n let component: LaunchDetailsComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [ LaunchDetailsComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(LaunchDetailsComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/launch-details/launch-details.component.ts", "content": "import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { map, switchMap } from 'rxjs/operators';\nimport { LaunchDetailsGQL } from '../services/spacexGraphql.service';\n\n@Component({\n selector: 'app-launch-details',\n templateUrl: './launch-details.component.html',\n styleUrls: ['./launch-details.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LaunchDetailsComponent {\n constructor(\n private readonly route: ActivatedRoute,\n private readonly launchDetailsService: LaunchDetailsGQL\n ) {}\n\n launchDetails$ = this.route.paramMap.pipe(\n map((params) => params.get('id') as string),\n switchMap((id) => this.launchDetailsService.fetch({ id })),\n map((res) => res.data.launch)\n );\n}\n" }, { "path": "src/app/launch-details/launch-details.graphql", "content": "# src/app/launch-details/launch-details.frontend.graphql\n\nquery launchDetails($id: ID!) {\n launch(id: $id) {\n id\n mission_name\n details\n links {\n flickr_images\n mission_patch\n }\n }\n}\n" }, { "path": "src/app/launch-list/launch-list.component.css", "content": ".container {\n padding-top: 20px;\n display: grid;\n grid-gap: 30px;\n grid-template-columns: repeat(auto-fill, 350px);\n justify-content: center;\n}\n\n.mat-card {\n cursor: pointer;\n}\n" }, { "path": "src/app/launch-list/launch-list.component.html", "content": "\n
\n
\n \n \n \n {{ launch.mission_name }}\n {{ launch.rocket.rocket_name }} - launched\n {{ launch.launch_date_utc | relativeTime }}\n \n \n \n
\n
\n\n" }, { "path": "src/app/launch-list/launch-list.component.spec.ts", "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LaunchListComponent } from './launch-list.component';\n\ndescribe('LaunchListComponent', () => {\n let component: LaunchListComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [ LaunchListComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(LaunchListComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/launch-list/launch-list.component.ts", "content": "import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { map } from 'rxjs/operators';\nimport { PastLaunchesListGQL } from '../services/spacexGraphql.service';\n\n@Component({\n selector: 'app-launch-list',\n templateUrl: './launch-list.component.html',\n styleUrls: ['./launch-list.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LaunchListComponent {\n constructor(private readonly pastLaunchesService: PastLaunchesListGQL) {}\n\n pastLaunches$ = this.pastLaunchesService\n // Please be care to not fetch too much, but this amount lets us see the img lazy loading in action\n .fetch({ limit: 30 })\n .pipe(map((res) => res.data.launchesPast));\n}\n" }, { "path": "src/app/launch-list/launch-list.graphql", "content": "# src/app/launch-list/launch-list.graphql\n\nquery pastLaunchesList($limit: Int!) {\n launchesPast(limit: $limit) {\n id\n mission_name\n links {\n flickr_images\n mission_patch_small\n }\n rocket {\n rocket_name\n }\n launch_date_utc\n }\n}\n" }, { "path": "src/app/relative-time/relative-time.pipe.spec.ts", "content": "import { RelativeTimePipe } from './relative-time.pipe';\n\ndescribe('RelativeTimePipe', () => {\n it('create an instance', () => {\n const pipe = new RelativeTimePipe();\n expect(pipe).toBeTruthy();\n });\n});\n" }, { "path": "src/app/relative-time/relative-time.pipe.ts", "content": "import { Pipe, PipeTransform } from '@angular/core';\n\nconst milliSecondsInDay = 1000 * 3600 * 24;\n\n// Cast as any because typescript typing haven't updated yet\nconst rtf = new (Intl as any).RelativeTimeFormat('en');\n\n@Pipe({\n name: 'relativeTime'\n})\nexport class RelativeTimePipe implements PipeTransform {\n transform(utcTime: string): string {\n const diffInMillicseconds =\n new Date(utcTime).getTime() - new Date().getTime();\n const diffInDays = Math.round(diffInMillicseconds / milliSecondsInDay);\n return rtf.format(diffInDays, 'day');\n }\n}\n" }, { "path": "src/app/services/spacexGraphql.service.ts", "content": "import gql from 'graphql-tag';\nimport { Injectable } from '@angular/core';\nimport * as Apollo from 'apollo-angular';\nexport type Maybe = T | null;\n/** All built-in and custom scalars, mapped to their actual values */\nexport type Scalars = {\n ID: string,\n String: string,\n Boolean: boolean,\n Int: number,\n Float: number,\n Date: any,\n ObjectID: any,\n};\n\n\n\n\nexport type Address = {\n __typename?: 'Address',\n address?: Maybe,\n city?: Maybe,\n state?: Maybe,\n};\n\nexport type Capsule = {\n __typename?: 'Capsule',\n id?: Maybe,\n landings?: Maybe,\n missions?: Maybe>>,\n original_launch?: Maybe,\n reuse_count?: Maybe,\n status?: Maybe,\n type?: Maybe,\n dragon?: Maybe,\n};\n\nexport type CapsuleMission = {\n __typename?: 'CapsuleMission',\n flight?: Maybe,\n name?: Maybe,\n};\n\nexport type CapsulesFind = {\n id?: Maybe,\n landings?: Maybe,\n mission?: Maybe,\n original_launch?: Maybe,\n reuse_count?: Maybe,\n status?: Maybe,\n type?: Maybe,\n};\n\nexport type Core = {\n __typename?: 'Core',\n asds_attempts?: Maybe,\n asds_landings?: Maybe,\n block?: Maybe,\n id?: Maybe,\n missions?: Maybe>>,\n original_launch?: Maybe,\n reuse_count?: Maybe,\n rtls_attempts?: Maybe,\n rtls_landings?: Maybe,\n status?: Maybe,\n water_landing?: Maybe,\n};\n\nexport type CoreMission = {\n __typename?: 'CoreMission',\n name?: Maybe,\n flight?: Maybe,\n};\n\nexport type CoresFind = {\n asds_attempts?: Maybe,\n asds_landings?: Maybe,\n block?: Maybe,\n id?: Maybe,\n missions?: Maybe,\n original_launch?: Maybe,\n reuse_count?: Maybe,\n rtls_attempts?: Maybe,\n rtls_landings?: Maybe,\n status?: Maybe,\n water_landing?: Maybe,\n};\n\n\nexport type Distance = {\n __typename?: 'Distance',\n feet?: Maybe,\n meters?: Maybe,\n};\n\nexport type Dragon = {\n __typename?: 'Dragon',\n active?: Maybe,\n crew_capacity?: Maybe,\n description?: Maybe,\n diameter?: Maybe,\n dry_mass_kg?: Maybe,\n dry_mass_lb?: Maybe,\n first_flight?: Maybe,\n heat_shield?: Maybe,\n height_w_trunk?: Maybe,\n id?: Maybe,\n launch_payload_mass?: Maybe,\n launch_payload_vol?: Maybe,\n name?: Maybe,\n orbit_duration_yr?: Maybe,\n pressurized_capsule?: Maybe,\n return_payload_mass?: Maybe,\n return_payload_vol?: Maybe,\n sidewall_angle_deg?: Maybe,\n thrusters?: Maybe>>,\n trunk?: Maybe,\n type?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type DragonHeatShield = {\n __typename?: 'DragonHeatShield',\n dev_partner?: Maybe,\n material?: Maybe,\n size_meters?: Maybe,\n temp_degrees?: Maybe,\n};\n\nexport type DragonPressurizedCapsule = {\n __typename?: 'DragonPressurizedCapsule',\n payload_volume?: Maybe,\n};\n\nexport type DragonThrust = {\n __typename?: 'DragonThrust',\n amount?: Maybe,\n fuel_1?: Maybe,\n fuel_2?: Maybe,\n pods?: Maybe,\n thrust?: Maybe,\n type?: Maybe,\n};\n\nexport type DragonTrunk = {\n __typename?: 'DragonTrunk',\n cargo?: Maybe,\n trunk_volume?: Maybe,\n};\n\nexport type DragonTrunkCargo = {\n __typename?: 'DragonTrunkCargo',\n solar_array?: Maybe,\n unpressurized_cargo?: Maybe,\n};\n\nexport type Force = {\n __typename?: 'Force',\n kN?: Maybe,\n lbf?: Maybe,\n};\n\nexport type HistoriesResult = {\n __typename?: 'HistoriesResult',\n result?: Maybe,\n data?: Maybe>>,\n};\n\nexport type History = {\n __typename?: 'History',\n details?: Maybe,\n event_date_unix?: Maybe,\n event_date_utc?: Maybe,\n id?: Maybe,\n links?: Maybe,\n title?: Maybe,\n flight?: Maybe,\n};\n\nexport type HistoryFind = {\n end?: Maybe,\n flight_number?: Maybe,\n id?: Maybe,\n start?: Maybe,\n};\n\nexport type Info = {\n __typename?: 'Info',\n ceo?: Maybe,\n coo?: Maybe,\n cto_propulsion?: Maybe,\n cto?: Maybe,\n employees?: Maybe,\n founded?: Maybe,\n founder?: Maybe,\n headquarters?: Maybe
,\n launch_sites?: Maybe,\n links?: Maybe,\n name?: Maybe,\n summary?: Maybe,\n test_sites?: Maybe,\n valuation?: Maybe,\n vehicles?: Maybe,\n};\n\nexport type InfoLinks = {\n __typename?: 'InfoLinks',\n elon_twitter?: Maybe,\n flickr?: Maybe,\n twitter?: Maybe,\n website?: Maybe,\n};\n\nexport type Landpad = {\n __typename?: 'Landpad',\n attempted_landings?: Maybe,\n details?: Maybe,\n full_name?: Maybe,\n id?: Maybe,\n landing_type?: Maybe,\n location?: Maybe,\n status?: Maybe,\n successful_landings?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type Launch = {\n __typename?: 'Launch',\n details?: Maybe,\n id?: Maybe,\n is_tentative?: Maybe,\n launch_date_local?: Maybe,\n launch_date_unix?: Maybe,\n launch_date_utc?: Maybe,\n launch_site?: Maybe,\n launch_success?: Maybe,\n launch_year?: Maybe,\n links?: Maybe,\n mission_id?: Maybe>>,\n mission_name?: Maybe,\n rocket?: Maybe,\n static_fire_date_unix?: Maybe,\n static_fire_date_utc?: Maybe,\n telemetry?: Maybe,\n tentative_max_precision?: Maybe,\n upcoming?: Maybe,\n ships?: Maybe>>,\n};\n\nexport type LaunchesPastResult = {\n __typename?: 'LaunchesPastResult',\n result?: Maybe,\n data?: Maybe>>,\n};\n\nexport type LaunchFind = {\n apoapsis_km?: Maybe,\n block?: Maybe,\n cap_serial?: Maybe,\n capsule_reuse?: Maybe,\n core_flight?: Maybe,\n core_reuse?: Maybe,\n core_serial?: Maybe,\n customer?: Maybe,\n eccentricity?: Maybe,\n end?: Maybe,\n epoch?: Maybe,\n fairings_recovered?: Maybe,\n fairings_recovery_attempt?: Maybe,\n fairings_reuse?: Maybe,\n fairings_reused?: Maybe,\n fairings_ship?: Maybe,\n gridfins?: Maybe,\n id?: Maybe,\n inclination_deg?: Maybe,\n land_success?: Maybe,\n landing_intent?: Maybe,\n landing_type?: Maybe,\n landing_vehicle?: Maybe,\n launch_date_local?: Maybe,\n launch_date_utc?: Maybe,\n launch_success?: Maybe,\n launch_year?: Maybe,\n legs?: Maybe,\n lifespan_years?: Maybe,\n longitude?: Maybe,\n manufacturer?: Maybe,\n mean_motion?: Maybe,\n mission_id?: Maybe,\n mission_name?: Maybe,\n nationality?: Maybe,\n norad_id?: Maybe,\n orbit?: Maybe,\n payload_id?: Maybe,\n payload_type?: Maybe,\n periapsis_km?: Maybe,\n period_min?: Maybe,\n raan?: Maybe,\n reference_system?: Maybe,\n regime?: Maybe,\n reused?: Maybe,\n rocket_id?: Maybe,\n rocket_name?: Maybe,\n rocket_type?: Maybe,\n second_stage_block?: Maybe,\n semi_major_axis_km?: Maybe,\n ship?: Maybe,\n side_core1_reuse?: Maybe,\n side_core2_reuse?: Maybe,\n site_id?: Maybe,\n site_name_long?: Maybe,\n site_name?: Maybe,\n start?: Maybe,\n tbd?: Maybe,\n tentative_max_precision?: Maybe,\n tentative?: Maybe,\n};\n\nexport type LaunchLinks = {\n __typename?: 'LaunchLinks',\n article_link?: Maybe,\n flickr_images?: Maybe>>,\n mission_patch_small?: Maybe,\n mission_patch?: Maybe,\n presskit?: Maybe,\n reddit_campaign?: Maybe,\n reddit_launch?: Maybe,\n reddit_media?: Maybe,\n reddit_recovery?: Maybe,\n video_link?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type Launchpad = {\n __typename?: 'Launchpad',\n attempted_launches?: Maybe,\n details?: Maybe,\n id?: Maybe,\n location?: Maybe,\n name?: Maybe,\n status?: Maybe,\n successful_launches?: Maybe,\n vehicles_launched?: Maybe>>,\n wikipedia?: Maybe,\n};\n\nexport type LaunchRocket = {\n __typename?: 'LaunchRocket',\n fairings?: Maybe,\n first_stage?: Maybe,\n rocket_name?: Maybe,\n rocket_type?: Maybe,\n rocket?: Maybe,\n second_stage?: Maybe,\n};\n\nexport type LaunchRocketFairings = {\n __typename?: 'LaunchRocketFairings',\n recovered?: Maybe,\n recovery_attempt?: Maybe,\n reused?: Maybe,\n ship?: Maybe,\n};\n\nexport type LaunchRocketFirstStage = {\n __typename?: 'LaunchRocketFirstStage',\n cores?: Maybe>>,\n};\n\nexport type LaunchRocketFirstStageCore = {\n __typename?: 'LaunchRocketFirstStageCore',\n block?: Maybe,\n core?: Maybe,\n flight?: Maybe,\n gridfins?: Maybe,\n land_success?: Maybe,\n landing_intent?: Maybe,\n landing_type?: Maybe,\n landing_vehicle?: Maybe,\n legs?: Maybe,\n reused?: Maybe,\n};\n\nexport type LaunchRocketSecondStage = {\n __typename?: 'LaunchRocketSecondStage',\n block?: Maybe,\n payloads?: Maybe>>,\n};\n\nexport type LaunchSite = {\n __typename?: 'LaunchSite',\n site_id?: Maybe,\n site_name_long?: Maybe,\n site_name?: Maybe,\n};\n\nexport type LaunchTelemetry = {\n __typename?: 'LaunchTelemetry',\n flight_club?: Maybe,\n};\n\nexport type Link = {\n __typename?: 'Link',\n article?: Maybe,\n reddit?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type Location = {\n __typename?: 'Location',\n latitude?: Maybe,\n longitude?: Maybe,\n name?: Maybe,\n region?: Maybe,\n};\n\nexport type Mass = {\n __typename?: 'Mass',\n kg?: Maybe,\n lb?: Maybe,\n};\n\nexport type Mission = {\n __typename?: 'Mission',\n description?: Maybe,\n id?: Maybe,\n manufacturers?: Maybe>>,\n name?: Maybe,\n twitter?: Maybe,\n website?: Maybe,\n wikipedia?: Maybe,\n payloads?: Maybe>>,\n};\n\nexport type MissionResult = {\n __typename?: 'MissionResult',\n result?: Maybe,\n data?: Maybe>>,\n};\n\nexport type MissionsFind = {\n id?: Maybe,\n manufacturer?: Maybe,\n name?: Maybe,\n payload_id?: Maybe,\n};\n\n\nexport type Payload = {\n __typename?: 'Payload',\n customers?: Maybe>>,\n id?: Maybe,\n manufacturer?: Maybe,\n nationality?: Maybe,\n norad_id?: Maybe>>,\n orbit_params?: Maybe,\n orbit?: Maybe,\n payload_mass_kg?: Maybe,\n payload_mass_lbs?: Maybe,\n payload_type?: Maybe,\n reused?: Maybe,\n};\n\nexport type PayloadOrbitParams = {\n __typename?: 'PayloadOrbitParams',\n apoapsis_km?: Maybe,\n arg_of_pericenter?: Maybe,\n eccentricity?: Maybe,\n epoch?: Maybe,\n inclination_deg?: Maybe,\n lifespan_years?: Maybe,\n longitude?: Maybe,\n mean_anomaly?: Maybe,\n mean_motion?: Maybe,\n periapsis_km?: Maybe,\n period_min?: Maybe,\n raan?: Maybe,\n reference_system?: Maybe,\n regime?: Maybe,\n semi_major_axis_km?: Maybe,\n};\n\nexport type PayloadsFind = {\n apoapsis_km?: Maybe,\n customer?: Maybe,\n eccentricity?: Maybe,\n epoch?: Maybe,\n inclination_deg?: Maybe,\n lifespan_years?: Maybe,\n longitude?: Maybe,\n manufacturer?: Maybe,\n mean_motion?: Maybe,\n nationality?: Maybe,\n norad_id?: Maybe,\n orbit?: Maybe,\n payload_id?: Maybe,\n payload_type?: Maybe,\n periapsis_km?: Maybe,\n period_min?: Maybe,\n raan?: Maybe,\n reference_system?: Maybe,\n regime?: Maybe,\n reused?: Maybe,\n semi_major_axis_km?: Maybe,\n};\n\nexport type Query = {\n __typename?: 'Query',\n capsules?: Maybe>>,\n capsulesPast?: Maybe>>,\n capsulesUpcoming?: Maybe>>,\n capsule?: Maybe,\n company?: Maybe,\n cores?: Maybe>>,\n coresPast?: Maybe>>,\n coresUpcoming?: Maybe>>,\n core?: Maybe,\n dragons?: Maybe>>,\n dragon?: Maybe,\n histories?: Maybe>>,\n historiesResult?: Maybe,\n history?: Maybe,\n landpads?: Maybe>>,\n landpad?: Maybe,\n launches?: Maybe>>,\n launchesPast?: Maybe>>,\n launchesPastResult?: Maybe,\n launchesUpcoming?: Maybe>>,\n launch?: Maybe,\n launchLatest?: Maybe,\n launchNext?: Maybe,\n launchpads?: Maybe>>,\n launchpad?: Maybe,\n missions?: Maybe>>,\n missionsResult?: Maybe,\n mission?: Maybe,\n payloads?: Maybe>>,\n payload?: Maybe,\n roadster?: Maybe,\n rockets?: Maybe>>,\n rocketsResult?: Maybe,\n rocket?: Maybe,\n ships?: Maybe>>,\n shipsResult?: Maybe,\n ship?: Maybe,\n};\n\n\nexport type QueryCapsulesArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCapsulesPastArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCapsulesUpcomingArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCapsuleArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryCoresArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCoresPastArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCoresUpcomingArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryCoreArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryDragonsArgs = {\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryDragonArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryHistoriesArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryHistoriesResultArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryHistoryArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryLandpadsArgs = {\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryLandpadArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryLaunchesArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryLaunchesPastArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryLaunchesPastResultArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryLaunchesUpcomingArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryLaunchArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryLaunchLatestArgs = {\n offset?: Maybe\n};\n\n\nexport type QueryLaunchNextArgs = {\n offset?: Maybe\n};\n\n\nexport type QueryLaunchpadsArgs = {\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryLaunchpadArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryMissionsArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryMissionsResultArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryMissionArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryPayloadsArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryPayloadArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryRocketsArgs = {\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryRocketsResultArgs = {\n limit?: Maybe,\n offset?: Maybe\n};\n\n\nexport type QueryRocketArgs = {\n id: Scalars['ID']\n};\n\n\nexport type QueryShipsArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryShipsResultArgs = {\n find?: Maybe,\n limit?: Maybe,\n offset?: Maybe,\n order?: Maybe,\n sort?: Maybe\n};\n\n\nexport type QueryShipArgs = {\n id: Scalars['ID']\n};\n\nexport type Result = {\n __typename?: 'Result',\n totalCount?: Maybe,\n};\n\nexport type Roadster = {\n __typename?: 'Roadster',\n apoapsis_au?: Maybe,\n details?: Maybe,\n earth_distance_km?: Maybe,\n earth_distance_mi?: Maybe,\n eccentricity?: Maybe,\n epoch_jd?: Maybe,\n inclination?: Maybe,\n launch_date_unix?: Maybe,\n launch_date_utc?: Maybe,\n launch_mass_kg?: Maybe,\n launch_mass_lbs?: Maybe,\n longitude?: Maybe,\n mars_distance_km?: Maybe,\n mars_distance_mi?: Maybe,\n name?: Maybe,\n norad_id?: Maybe,\n orbit_type?: Maybe,\n periapsis_arg?: Maybe,\n periapsis_au?: Maybe,\n period_days?: Maybe,\n semi_major_axis_au?: Maybe,\n speed_kph?: Maybe,\n speed_mph?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type Rocket = {\n __typename?: 'Rocket',\n active?: Maybe,\n boosters?: Maybe,\n company?: Maybe,\n cost_per_launch?: Maybe,\n country?: Maybe,\n description?: Maybe,\n diameter?: Maybe,\n engines?: Maybe,\n first_flight?: Maybe,\n first_stage?: Maybe,\n height?: Maybe,\n id?: Maybe,\n landing_legs?: Maybe,\n mass?: Maybe,\n name?: Maybe,\n payload_weights?: Maybe>>,\n second_stage?: Maybe,\n stages?: Maybe,\n success_rate_pct?: Maybe,\n type?: Maybe,\n wikipedia?: Maybe,\n};\n\nexport type RocketEngines = {\n __typename?: 'RocketEngines',\n number?: Maybe,\n type?: Maybe,\n version?: Maybe,\n layout?: Maybe,\n engine_loss_max?: Maybe,\n propellant_1?: Maybe,\n propellant_2?: Maybe,\n thrust_sea_level?: Maybe,\n thrust_vacuum?: Maybe,\n thrust_to_weight?: Maybe,\n};\n\nexport type RocketFirstStage = {\n __typename?: 'RocketFirstStage',\n burn_time_sec?: Maybe,\n engines?: Maybe,\n fuel_amount_tons?: Maybe,\n reusable?: Maybe,\n thrust_sea_level?: Maybe,\n thrust_vacuum?: Maybe,\n};\n\nexport type RocketLandingLegs = {\n __typename?: 'RocketLandingLegs',\n number?: Maybe,\n material?: Maybe,\n};\n\nexport type RocketPayloadWeight = {\n __typename?: 'RocketPayloadWeight',\n id?: Maybe,\n kg?: Maybe,\n lb?: Maybe,\n name?: Maybe,\n};\n\nexport type RocketSecondStage = {\n __typename?: 'RocketSecondStage',\n burn_time_sec?: Maybe,\n engines?: Maybe,\n fuel_amount_tons?: Maybe,\n payloads?: Maybe,\n thrust?: Maybe,\n};\n\nexport type RocketSecondStagePayloadCompositeFairing = {\n __typename?: 'RocketSecondStagePayloadCompositeFairing',\n height?: Maybe,\n diameter?: Maybe,\n};\n\nexport type RocketSecondStagePayloads = {\n __typename?: 'RocketSecondStagePayloads',\n option_1?: Maybe,\n composite_fairing?: Maybe,\n};\n\nexport type RocketsResult = {\n __typename?: 'RocketsResult',\n result?: Maybe,\n data?: Maybe>>,\n};\n\nexport type Ship = {\n __typename?: 'Ship',\n abs?: Maybe,\n active?: Maybe,\n attempted_landings?: Maybe,\n class?: Maybe,\n course_deg?: Maybe,\n home_port?: Maybe,\n id?: Maybe,\n image?: Maybe,\n imo?: Maybe,\n missions?: Maybe>>,\n mmsi?: Maybe,\n model?: Maybe,\n name?: Maybe,\n position?: Maybe,\n roles?: Maybe>>,\n speed_kn?: Maybe,\n status?: Maybe,\n successful_landings?: Maybe,\n type?: Maybe,\n url?: Maybe,\n weight_kg?: Maybe,\n weight_lbs?: Maybe,\n year_built?: Maybe,\n};\n\nexport type ShipLocation = {\n __typename?: 'ShipLocation',\n latitude?: Maybe,\n longitude?: Maybe,\n};\n\nexport type ShipMission = {\n __typename?: 'ShipMission',\n flight?: Maybe,\n name?: Maybe,\n};\n\nexport type ShipsFind = {\n id?: Maybe,\n name?: Maybe,\n model?: Maybe,\n type?: Maybe,\n role?: Maybe,\n active?: Maybe,\n imo?: Maybe,\n mmsi?: Maybe,\n abs?: Maybe,\n class?: Maybe,\n weight_lbs?: Maybe,\n weight_kg?: Maybe,\n year_built?: Maybe,\n home_port?: Maybe,\n status?: Maybe,\n speed_kn?: Maybe,\n course_deg?: Maybe,\n latitude?: Maybe,\n longitude?: Maybe,\n successful_landings?: Maybe,\n attempted_landings?: Maybe,\n mission?: Maybe,\n};\n\nexport type ShipsResult = {\n __typename?: 'ShipsResult',\n result?: Maybe,\n data?: Maybe>>,\n};\n\nexport type Volume = {\n __typename?: 'Volume',\n cubic_feet?: Maybe,\n cubic_meters?: Maybe,\n};\nexport type LaunchDetailsQueryVariables = {\n id: Scalars['ID']\n};\n\n\nexport type LaunchDetailsQuery = (\n { __typename?: 'Query' }\n & { launch: Maybe<(\n { __typename?: 'Launch' }\n & Pick\n & { links: Maybe<(\n { __typename?: 'LaunchLinks' }\n & Pick\n )> }\n )> }\n);\n\nexport type PastLaunchesListQueryVariables = {\n limit: Scalars['Int']\n};\n\n\nexport type PastLaunchesListQuery = (\n { __typename?: 'Query' }\n & { launchesPast: Maybe\n & { links: Maybe<(\n { __typename?: 'LaunchLinks' }\n & Pick\n )>, rocket: Maybe<(\n { __typename?: 'LaunchRocket' }\n & Pick\n )> }\n )>>> }\n);\n\nexport const LaunchDetailsDocument = gql`\n query launchDetails($id: ID!) {\n launch(id: $id) {\n id\n mission_name\n details\n links {\n flickr_images\n mission_patch\n }\n }\n}\n `;\n\n @Injectable({\n providedIn: 'root'\n })\n export class LaunchDetailsGQL extends Apollo.Query {\n document = LaunchDetailsDocument;\n \n }\nexport const PastLaunchesListDocument = gql`\n query pastLaunchesList($limit: Int!) {\n launchesPast(limit: $limit) {\n id\n mission_name\n links {\n flickr_images\n mission_patch_small\n }\n rocket {\n rocket_name\n }\n launch_date_utc\n }\n}\n `;\n\n @Injectable({\n providedIn: 'root'\n })\n export class PastLaunchesListGQL extends Apollo.Query {\n document = PastLaunchesListDocument;\n \n }" }, { "path": "src/assets/.gitkeep", "content": "" }, { "path": "src/environments/environment.prod.ts", "content": "export const environment = {\n production: true\n};\n" }, { "path": "src/environments/environment.ts", "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\n" }, { "path": "src/index.html", "content": "\n\n\n \n AngularSpacexGraphqlCodegen\n \n \n \n \n \n\n\n \n\n\n" }, { "path": "src/main.ts", "content": "import 'hammerjs';\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.error(err));\n" }, { "path": "src/polyfills.ts", "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js'; // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js'; // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags.ts';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n * (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone'; // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n" }, { "path": "src/styles.css", "content": "/* You can add global styles to this file, and also import other style files */\n\nhtml, body { height: 100%; }\nbody { margin: 0; font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n" }, { "path": "src/test.ts", "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n" }, { "path": "tsconfig.app.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": [\n \"src/main.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.ts\"\n ],\n \"exclude\": [\n \"src/test.ts\",\n \"src/**/*.spec.ts\"\n ]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"es2015\",\n \"typeRoots\": [\n \"node_modules/@types\"\n ],\n \"lib\": [\n \"es2018\",\n \"dom\",\n \"esnext.asynciterable\"\n ]\n },\n \"angularCompilerOptions\": {\n \"fullTemplateTypeCheck\": true,\n \"strictInjectionParameters\": true\n }\n}" }, { "path": "tsconfig.spec.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\",\n \"node\"\n ]\n },\n \"files\": [\n \"src/test.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.spec.ts\",\n \"src/**/*.d.ts\"\n ]\n}\n" }, { "path": "tslint.json", "content": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\": {\n \"severity\": \"warning\"\n },\n \"component-class-suffix\": true,\n \"contextual-lifecycle\": true,\n \"directive-class-suffix\": true,\n \"directive-selector\": [\n true,\n \"attribute\",\n \"app\",\n \"camelCase\"\n ],\n \"component-selector\": [\n true,\n \"element\",\n \"app\",\n \"kebab-case\"\n ],\n \"import-blacklist\": [\n true,\n \"rxjs/Rx\"\n ],\n \"interface-name\": false,\n \"max-classes-per-file\": false,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-access\": false,\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-consecutive-blank-lines\": false,\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-empty\": false,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-non-null-assertion\": true,\n \"no-redundant-jsdoc\": true,\n \"no-switch-case-fall-through\": true,\n \"no-use-before-declare\": true,\n \"no-var-requires\": false,\n \"object-literal-key-quotes\": [\n true,\n \"as-needed\"\n ],\n \"object-literal-sort-keys\": false,\n \"ordered-imports\": false,\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"trailing-comma\": false,\n \"no-conflicting-lifecycle\": true,\n \"no-host-metadata-property\": true,\n \"no-input-rename\": true,\n \"no-inputs-metadata-property\": true,\n \"no-output-native\": true,\n \"no-output-on-prefix\": true,\n \"no-output-rename\": true,\n \"no-outputs-metadata-property\": true,\n \"template-banana-in-box\": true,\n \"template-no-negated-async\": true,\n \"use-lifecycle-interface\": true,\n \"use-pipe-transform-interface\": true\n },\n \"rulesDirectory\": [\n \"codelyzer\"\n ]\n}" } ]