Skip to content

Commit cf125c1

Browse files
arjunyelarjunyel
committed
feature: lauch data fetching
1 parent 7a2612d commit cf125c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+16676
-62
lines changed

‎.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.gitignore

Lines changed: 46 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,46 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
8-
# Runtime data
9-
pids
10-
*.pid
11-
*.seed
12-
*.pid.lock
13-
14-
# Directory for instrumented libs generated by jscoverage/JSCover
15-
lib-cov
16-
17-
# Coverage directory used by tools like istanbul
18-
coverage
19-
20-
# nyc test coverage
21-
.nyc_output
22-
23-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24-
.grunt
25-
26-
# Bower dependency directory (https://bower.io/)
27-
bower_components
28-
29-
# node-waf configuration
30-
.lock-wscript
31-
32-
# Compiled binary addons (https://nodejs.org/api/addons.html)
33-
build/Release
34-
35-
# Dependency directories
36-
node_modules/
37-
jspm_packages/
38-
39-
# TypeScript v1 declaration files
40-
typings/
41-
42-
# Optional npm cache directory
43-
.npm
44-
45-
# Optional eslint cache
46-
.eslintcache
47-
48-
# Optional REPL history
49-
.node_repl_history
50-
51-
# Output of 'npm pack'
52-
*.tgz
53-
54-
# Yarn Integrity file
55-
.yarn-integrity
56-
57-
# dotenv environment variables file
58-
.env
59-
60-
# next.js build output
61-
.next
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎README.md

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,113 @@
1-
# angular-spacex-graphql-codegen
1+
# Angular Spacex Graphql Codegen
2+
3+
## Mission
4+
5+
Our 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.
6+
7+
### Steps
8+
9+
1. Generate a new angular application with routing
10+
11+
```bash
12+
ng new angular-spacex-graphql-codegen --routing=true --style=css
13+
```
14+
15+
Make sure to delete the default template in `src/app/app.component.html`
16+
17+
1. Install the [Apollo VS Code plugin](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) and in the root of the project add a file `apollo.config.js`
18+
19+
```javascript
20+
module.exports = {
21+
client: {
22+
service: {
23+
name: 'angular-spacex-graphql-codegen',
24+
url: 'https://api.spacex.land/graphql/'
25+
}
26+
}
27+
};
28+
```
29+
30+
This points the extension at the SpaceX GraphQL API so we get autocomplete when we make our queries among other cool features like type information.
31+
32+
1. Generate our two components:
33+
34+
```bash
35+
ng g component launch-list --changeDetection=OnPush
36+
```
37+
38+
```bash
39+
ng g component launch-details --changeDetection=OnPush
40+
```
41+
42+
Because our generated services use observables we choose OnPush change detection for the best performance. We let up them
43+
44+
1. Each component will have its own data requirments so we co-locate our graphql query files next to them
45+
46+
```graphql
47+
# src/app/launch-list/launch-list.graphql
48+
49+
query pastLaunchesList($limit: Int!) {
50+
launchesPast(limit: $limit) {
51+
id
52+
mission_name
53+
launch_site {
54+
site_name_long
55+
}
56+
links {
57+
flickr_images
58+
mission_patch_small
59+
}
60+
rocket {
61+
rocket_name
62+
}
63+
launch_success
64+
launch_date_utc
65+
}
66+
}
67+
```
68+
69+
```graphql
70+
# src/app/launch-details/launch-details.graphql
71+
72+
query launchDetails($id: ID!) {
73+
launch(id: $id) {
74+
id
75+
details
76+
launch_success
77+
links {
78+
flickr_images
79+
mission_patch
80+
}
81+
}
82+
}
83+
```
84+
85+
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.
86+
87+
1. 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 add our API url `const uri = 'https://api.spacex.land/graphql/';`.
88+
89+
1. 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`
90+
91+
1. In the root of the project create a `codegen.yml` file:
92+
93+
```yml
94+
# Where to get schema data
95+
schema:
96+
- https://api.spacex.land/graphql/
97+
# The client side queries to turn into services
98+
documents:
99+
- src/**/*.graphql
100+
# Where to output the services and the list of plugins
101+
generates:
102+
./src/app/services/spacexGraphql.service.ts:
103+
plugins:
104+
- typescript
105+
- typescript-operations
106+
- typescript-apollo-angular
107+
```
108+
109+
1. In package.json add a script `"codegen": "gql-gen"` then `npm run codegen` to generate the Angular Services.
110+
111+
1. To make it look nice we add Angular Material `ng add @angular/material` then in the `app.module.ts` we add the card module `import { MatCardModule } from '@angular/material/card';` and put it in imports.
112+
113+
1. Lets start with the list of past launches displayed on the screen:

‎angular.json

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-spacex-graphql-codegen": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/angular-spacex-graphql-codegen",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"aot": false,
22+
"assets": [
23+
"src/favicon.ico",
24+
"src/assets"
25+
],
26+
"styles": [
27+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
28+
"src/styles.css"
29+
],
30+
"scripts": []
31+
},
32+
"configurations": {
33+
"production": {
34+
"fileReplacements": [
35+
{
36+
"replace": "src/environments/environment.ts",
37+
"with": "src/environments/environment.prod.ts"
38+
}
39+
],
40+
"optimization": true,
41+
"outputHashing": "all",
42+
"sourceMap": false,
43+
"extractCss": true,
44+
"namedChunks": false,
45+
"aot": true,
46+
"extractLicenses": true,
47+
"vendorChunk": false,
48+
"buildOptimizer": true,
49+
"budgets": [
50+
{
51+
"type": "initial",
52+
"maximumWarning": "2mb",
53+
"maximumError": "5mb"
54+
},
55+
{
56+
"type": "anyComponentStyle",
57+
"maximumWarning": "6kb",
58+
"maximumError": "10kb"
59+
}
60+
]
61+
}
62+
}
63+
},
64+
"serve": {
65+
"builder": "@angular-devkit/build-angular:dev-server",
66+
"options": {
67+
"browserTarget": "angular-spacex-graphql-codegen:build"
68+
},
69+
"configurations": {
70+
"production": {
71+
"browserTarget": "angular-spacex-graphql-codegen:build:production"
72+
}
73+
}
74+
},
75+
"extract-i18n": {
76+
"builder": "@angular-devkit/build-angular:extract-i18n",
77+
"options": {
78+
"browserTarget": "angular-spacex-graphql-codegen:build"
79+
}
80+
},
81+
"test": {
82+
"builder": "@angular-devkit/build-angular:karma",
83+
"options": {
84+
"main": "src/test.ts",
85+
"polyfills": "src/polyfills.ts",
86+
"tsConfig": "tsconfig.spec.json",
87+
"karmaConfig": "karma.conf.js",
88+
"assets": [
89+
"src/favicon.ico",
90+
"src/assets"
91+
],
92+
"styles": [
93+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
94+
"src/styles.css"
95+
],
96+
"scripts": []
97+
}
98+
},
99+
"lint": {
100+
"builder": "@angular-devkit/build-angular:tslint",
101+
"options": {
102+
"tsConfig": [
103+
"tsconfig.app.json",
104+
"tsconfig.spec.json",
105+
"e2e/tsconfig.json"
106+
],
107+
"exclude": [
108+
"**/node_modules/**"
109+
]
110+
}
111+
},
112+
"e2e": {
113+
"builder": "@angular-devkit/build-angular:protractor",
114+
"options": {
115+
"protractorConfig": "e2e/protractor.conf.js",
116+
"devServerTarget": "angular-spacex-graphql-codegen:serve"
117+
},
118+
"configurations": {
119+
"production": {
120+
"devServerTarget": "angular-spacex-graphql-codegen:serve:production"
121+
}
122+
}
123+
}
124+
}
125+
}
126+
},
127+
"defaultProject": "angular-spacex-graphql-codegen"
128+
}

‎apollo.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
client: {
3+
service: {
4+
name: 'angular-spacex-graphql-codegen',
5+
url: 'https://api.spacex.land/graphql/'
6+
}
7+
}
8+
};

‎browserslist

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# You can see what browsers were selected by your queries by running:
6+
# npx browserslist
7+
8+
> 0.5%
9+
last 2 versions
10+
Firefox ESR
11+
not dead
12+
not IE 9-11 # For IE 9-11 support, remove 'not'.

0 commit comments

Comments
 (0)