GraphQL -

End to End

Type Safety

Lightning Talk

@vilvaathibanpb

GraphQL -

End to End

Type Safety

Lightning Talk

@vilvaathibanpb

About me

  • Javascript Developer @ Omio (GoEuro), ex-Sixt, ex-Flipkart
  •  
  • I teach @ JsFactory.in
  •  
  • Passionate about Browser
  •  
  • Open Source
  •  
  • I code on JS, React, GraphQL

Lets Begin

Twitter floods with what and why type-safety. So lets SKIP

Demo time

Type Safety in

GraphQL(Apollo) Client

  • Step1: Create codegen.yml
  • Step2: Install the code-generator library
  • Step3: Run the code generator command
  • Step4: Import the Type
  • Bonus

Step1: Create codegen.yml

schema: https://api.spacex.land/graphql
documents:
  - src/**/*.tsx
overwrite: true
watch: false
generates:
  ./src/types/types.d.ts:
    plugins:
      - typescript-common
      - typescript-client

Step2: Install the code-generator library

npm install graphql-code-generator graphql-codegen-typescript-common
npm install graphql-codegen-typescript-client

Step3: Run the code generator command

//package.json
"generate": "gql-gen"

npm run generate

Step4: Import the Type

import { GetLaunches } from "./types/types";


// Use it with query
useQuery<GetLaunches.Query>(query);

Bonus

Apollo-GraphQL

VS Code Extension

  • Install the extension
  • Add apollo.config.js file
  • Press `Ctrl + Spacebar` inside the query.
//apollo.config.js

module.exports = {
    client: {
      service: {
        name: "GQL",
        url: "https://api.spacex.land/graphql"
      }
    }
};

Thank you

Any questions, Reach out to me  

Feedbacks are appreciated as its my first Presentation in Berlin

@vilvaathibanpb

GraphQL e2e Type safety - (Client only)

By Vilva Athiban

Made with Slides.com

GraphQL e2e Type safety - (Client only)

My talk in TypeScript Berlin on e2e Type safe GraphQL

  • 412

More from Vilva Athiban