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