Server

• start creating types in schema.ts

import gql from "graphql-tag";
export const pizzaSchema = gql``;

• create types and querys

• show generated code

• create index.ts

• index.ts

  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}`);
  });
  

• 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

git clone git@ziermach.de:cziermann/angular-demo-template.git

npm i
npm add apollo-angular
ng add apollo-angular
npm add graphql
npm add --save-dev @graphql-codegen/cli
npm i

• 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

Pizza component

ng add @angular/material
(style - default)

ng g c pizza-list

• copy
  • app.module.ts
  • app.component.ts
  • styles.css