README.md

Graphql with SpaceX API

This project was generated with Angular CLI version 8.3.4.

https://graphql-spacex.firebaseapp.com/

Steps

1. Generate a new angular application with routing

   ng new graphql-spacex --routing=true --style=scss

   Make sure to delete the default template in src/app/app.component.html

2. Install the Apollo VS Code plugin and in the root of the project add apollo.config.js

   module.exports = {
     client: {
       service: {
         name: 'angular-spacex-graphql-codegen',
         url: 'https://api.spacex.land/graphql/'
       }
     }
   };

   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.

3. Generate our two components:

   ng g component launch-list --changeDetection=OnPush

   ng g component launch-details --changeDetection=OnPush

   Because our generated services use observables we choose OnPush change detection for the best performance.

4. In src/app/app-routing.module.ts we setup the routing:

   import { LaunchListComponent } from './launch-list/launch-list.component';
   import { LaunchDetailsComponent } from './launch-details/launch-details.component';
   
   const routes: Routes = [
     {
       path: '',
       component: LaunchListComponent
     },
     {
       path: ':id',
       component: LaunchDetailsComponent
     }
   ];

5. Each component will have its own data requirements so we co-locate our graphql query files next to them

   # launch-list.graphql
   
   query pastLaunchesList($limit: Int!) {
     launchesPast(limit: $limit) {
       id
       mission_name
       links {
         flickr_images
         mission_patch_small
       }
       rocket {
         rocket_name
       }
       launch_date_utc
     }
   }

   # launch-details.graphql
   
   query launchDetails($id: ID!) {
     launch(id: $id) {
       id
       mission_name
       details
       links {
         flickr_images
         mission_patch
       }
     }
   }

   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.

6. We add Apollo 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/';.

7. 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

8. In the root of the project create a codegen.yml file:

   # Where to get schema data
   schema:
     - https://api.spacex.land/graphql/
   # The client side queries to turn into services
   documents:
     - src/**/*.graphql
   # Where to output the services and the list of plugins
   generates:
     ./src/app/services/spacexGraphql.service.ts:
       plugins:
         - typescript
         - typescript-operations
         - typescript-apollo-angular

9. In package.json add a script "codegen": "gql-gen" then npm run codegen to generate the Angular Services. At any time, if you make changes to the .graphql files created earlier, run this step again.

10. 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';

11. Check the .ts, .html and .scss files for Launch-List and Launch-Details

12. Thanks to the new builtin relative time formating in V8, we can add launched x days ago

13. Generate the pipe: ng g pipe relative-time --module=app.module --flat=false

14. Update [relative-time pipe] accordingly and add pipe logic to [launch-list.component.html]

  <mat-card-subtitle>
    {{ launch.rocket.rocket_name }} - launched {{ launch.launch_date_utc | relativeTime }}
  </mat-card-subtitle>

1. npm start, navigate to http://localhost:4200/, and it should work!