Gain insights into GraphQL from a client perspective. Explore practical exercises, React integration, Apollo Client, and a live VM for real-time coding with GitHub’s GraphQL API.

GraphQLClient.tar.gz

REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN

GITHUB_PERSONAL_ACCESS_TOKEN

RunApp

RunApolllo

RunGraphQLReact

This course was written to be as practical as possible. It offers an interactive learning experience, starting off with a general introduction to GraphQL and proceeding to allow you to play with GraphQL Queries and Mutations using GitHub’s GraphQL API.

After getting you comfortable with the basics of GraphQL, the course moves on to how to use GraphQL with React and then on how to integrate it with Apollo Client. You'll implement an issue tracker application using GraphQL combined with both React and Apollo Client.

Finally, with this course Educative introduces its newest feature: A live VM. You will now have access to a terminal with a native look and feel where you can modify code and see changes in real time - all inside your browser!

A Practical Guide to GraphQL: From the Client Perspective

Because the GitHub's GraphQL API has no dedicated mutations for the Star and Unstar mutations.

Because it is only possible to watch a repository but not to unwatch it.

Because the Watch mutation has an additional argument to toggle the subscription.

Because the Watch mutation toggles the subscription in the backend without the client providing information.

Why is there only one Mutation component needed for the updateSubscription instead of two which were needed for the Star/Unstar feature?

Why is there only one Mutation component needed for the updateSubscription instead of two which were needed for the Star/Unstar feature?

A way improve the rendering performance of the UI.

A way to use async await instead of promises.

Because the function from the update prop runs thrice.

Because the function from the update prop runs once with the optimistic response.

Because Apollo does it without any code from your side.

Because the actual response includes the count of watchers.

Why does the count of watches update immediately as well?

Why does the count of watches update immediately as well?

Don’t add user benefiting features (e.g. optimistic response) to it for the sake of keeping your code concise.

Inline all configuration as props in the Mutation component.

What can be done to keep Mutation components concise?

What can be done to keep Mutation components concise?

An Introduction to GraphQL

How to Get Started

Exploring GitHub's GraphQL API

Combining React with GraphQL

Introducing Apollo Client with GraphQL

React with Apollo and GraphQL

Local Installation Guide

Quiz on Client Optimistic UI in React