cziermann
/
graphql-pizza-demo
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update presentation

dev
Christian Ziermann 5 years ago
parent
6a66462c55
commit
8177e12d11
4 changed files with 199 additions and 82 deletions
Split View Show Diff Stats
  1. +48
    -67
      README.md
  2. +3
    -4
      backend/src/index.ts
  3. +0
    -6
      backend/src/schema/schema.ts
  4. +148
    -5
      presentation/index.html

+ 48
- 67
README.md View File

@@ -1,68 +1,49 @@
# Prepation

```
npm init
```

See More <https://graphql-code-generator.com/docs/getting-started/installation>

```
npm add --save graphql
```
or
```
yarn add graphql
```


```
npm add --save-dev @graphql-codegen/cli
```
or
```
yarn add -D @graphql-codegen/cli
```


```
npx graphql-codegen init
```


```
npm add --save-dev @graphql-codegen/typescript
```
or
```
yarn add -D @graphql-codegen/typescript
```

# Server

```
npm add apollo-server
```
- start creating types in schema.ts

```
npm install @types/node --save-dev
```typescript
import gql from "graphql-tag";
export const pizzaSchema = gql``;
```

```
npx tsc --init --rootDir src --outDir build \
--esModuleInterop --resolveJsonModule --lib es6 \
--module commonjs --allowJs true --noImplicitAny true
```
- create types and querys
- show generated code

- create index.ts

- index.ts
```typescript
import { ApolloServer } from "apollo-server/dist";
const server = new ApolloServer({});
server.listen().then(({ url, subscriptionsUrl }) => {
console.log(`🚀 Server ready at ${url}`)
console.log(`🚀 Subscriptions ready at ${subscriptionsUrl}`);
});
```
npm install --save-dev ts-node nodemon rimraf uuid @types/uuid apollo-link-ws
```
- show playground and run listPizza
- create resolve config with empty array
- create pizza list
- create pizzaResolver.ts
- add read/list function
- add resolver to resolver config
- show get and list
- add toppings
- add list
- add resolver
- add toppings to pizza mocks
- show type resolvers
- show Mutation
- show Subscription

- show finished api

# UI

* init new Angular project
- init new Angular project

```
ng new frontend
git clone git@ziermach.de:cziermann/angular-demo-template.git
```

```
@@ -74,21 +55,22 @@ npm add --save-dev @graphql-codegen/cli
npm i
```

* init codegen
- init codegen

```
npx graphql-codegen init
npm i
```
* check angular
* use url "http://localhost:400"
* fragment path default
* plugin default
* output default

* set uri in graphql module
* move
* graphql.module
- check angular
- use url "http://localhost:400"
- fragment path default
- plugin default
- output default

- set uri in graphql module
- move
- graphql.module

## Pizza component

@@ -101,8 +83,7 @@ ng add @angular/material
ng g c pizza-list
```


* copy
* app.module.ts
* app.component.ts
* styles.css
- copy
- app.module.ts
- app.component.ts
- styles.css

+ 3
- 4
backend/src/index.ts View File

@@ -1,6 +1,6 @@
import { ApolloServer, PubSub } from "apollo-server/dist";
import { ApolloServer } from "apollo-server/dist";
import { Resolvers, ChangePizzaDto, ChangeToppingDto } from "./generated/graphql";
import { pizzaSchema } from "./schema/pizza";
import { pizzaSchema } from "./schema/schema";
import { PizzaResolver } from "./resolver/pizza-resolver";
import { ToppingResolver } from "./resolver/topping-resolver";

@@ -72,8 +72,7 @@ const resolvers: Resolvers = {
const server = new ApolloServer({
typeDefs: pizzaSchema,
resolvers: resolvers as any,
}
);
});

server.listen().then(({ url, subscriptionsUrl }) => {
console.log(`🚀 Server ready at ${url}`)

backend/src/schema/pizza.ts → backend/src/schema/schema.ts View File

@@ -22,12 +22,6 @@ export const pizzaSchema = gql`
listTopping: [Topping]!
}

interface MutationResponse {
code: String!
success: Boolean!
message: String!
}

input ChangePizzaDto {
name: String!
toppingIds: [ID]!

+ 148
- 5
presentation/index.html View File

@@ -151,10 +151,7 @@
</section>
<section>
<section>
<h1>Demo</h1>
</section>
<section>
<h2>Basics</h2>
<h1>Basics</h1>
</section>
<section>
<ul>
@@ -167,6 +164,9 @@
<li>
Mutations
</li>
<li>
Subscriptions
</li>
<li>
Variables
</li>
@@ -255,7 +255,8 @@
</section>
<section>
<h3>Mutation</h3>
<pre><code data-trim data-noescape>
<pre>
<code data-trim data-noescape>
mutation {
createPizza (createPizzaDto: {
name: "My Awesome Pizza"
@@ -272,8 +273,39 @@
</code>
</pre>
</section>

<section>
<h2>Subscriptions</h2>
</section>
<section>
<h3>Define Subscription</h3>
<pre>
<code data-trim data-noescape>
type Subscription {
pizzasChanged: [Pizza]!
toppingsChanged: [Topping]!
}
</code>
</pre>
</section>
<section>
<h3>Subscription</h3>
<pre>
<code data-trim data-noescape>
subscription PizzaChanged {
pizzasChanged {
id
name
}
}
</code>
</pre>
</section>
</section>
<section>
<section>
<h1>Live Demo</h1>
</section>
<section>
<img
src="/assets/apollo-logo.png"
@@ -284,6 +316,117 @@
<p>graphql-codegen</p>
<p>apollo-angular</p>
</section>
<section>
<h2>
Requirements
</h2>
<ul>
<li>npm</li>
<li>nodejs</li>
<li>tsc</li>
<li>npx</li>
<li>git</li>
</ul>
</section>
<section>
<h2>Setup Server</h2>
</section>
<section>
<h3>Init nodejs</h3>
<pre>
<code data-trim data-noescape>
$ mkdir server && cd server
$ npm init
# entry point: build/index.js
$ npx tsc --init --rootDir src --outDir build \
--esModuleInterop --resolveJsonModule --lib es6 \
--module commonjs --allowJs true --noImplicitAny true
$ npm i --save-dev uuid @types/uuid nodemon ts-node typescript
</code>
</pre>
</section>
<section>
<h3>Create nodemon</h3>
<pre>
<code data-trim data-noescape>
$ touch nodemon.json
</code>
<code data-trim data-noescape>
{
"watch": ["src"],
"ext": ".ts,.js",
"ignore": [],
"exec": "ts-node ./src/index.ts"
}
</code>
</pre>
</section>
<section>
<h3>add script commands to package.json</h3>
<pre>
<code data-trim data-noescape>
"scripts": {
"prebuild": "npm run generate",
"prestart": "npm run generate",
"generate": "graphql-codegen --config codegen.yml",
"start": "nodemon",
"build": "rimraf ./build && tsc"
}
</code>
</pre>
</section>
<section>
<h3>Init graphql</h3>
<pre>
<code data-trim data-noescape>
$ npm add --save-dev graphql
$ npm add --save-dev @graphql-codegen/cli
$ npm add --save-dev @graphql-codegen/typescript
$ npm add apollo-server
$ npm i --save-dev apollo-link-ws
$ npx graphql-codegen init
# (x) Backend
# schema: ./src/schema/*.ts
# plugins:
◉ TypeScript (required by other typescript plugins)
◉ TypeScript Resolvers (strongly typed resolve functions)
# output: skip
# introspection: n
# config: skip
# script: generate
$ npm i
$ mkdir src && touch src/index.ts
</code>
</pre>
</section>
<section>
<h2>Setup Frontend</h2>
</section>
<section>
<h3>Init Project</h3>
<pre>
<code data-trim data-noescape>
$ git clone git@ziermach.de:cziermann/angular-demo-template.git
$ git checkout graphql-template
or
$ cd angular-demo-template
$ npm add apollo-angular
$ ng add apollo-angular
$ npm add graphql
$ npm add --save-dev @graphql-codegen/cli
$ npm i
$ npx graphql-codegen init
# with Angular
# skip all
# script: generate
$ npm i
</code>
move the graphql.module.ts in src/
</pre>
</section>

</section>
</div>
</div>

Write Preview
Loading…
Cancel
Save