6^th Practical Class:
GraphQL on FrontEnd

App Setup

Fix Apollo Cache

GraphQL Code Generation

We are using GraphQL Code Generator to generate TypeScript types from GraphQL queries.

Apollo Client

• Getting started

Apollo Provider

The component wraps the React app and places Apollo Client on the context, enabling you to access it from anywhere in your component tree.

Minimal setup:

Hook

• Getting started -
• API Docs

API

Example

Hook

API

Example

Fragments

GraphQL Fragments

Fragments in frontned code

Step 1 - Define fragment

Fragment name (e.g. ) has to be unique!

File:

Step 2 - Use fragment in GraphQL query/mutation/fragment

Also remember to send fragment data
to children: .

File:

Step 3 - Get fragment data in children

❗❗❗ Import from . If you import it from it will not work. ❗❗❗

and

and are generic types that can create TypeScript types from GraphQL queries.