Getting started with React & GraphQL part II
Tags: react, graphql, tutorial, webdev
Published: 2019-05-21 09:25:34

---
title: Getting started with React & GraphQL part II
published: true
description: 
image: https://thepracticaldev.s3.amazonaws.com/i/c02343qbbz3qhrebrnp2.png
tags: react, graphql, tutorial, webdev
series: Getting started with React & GraphQL
---

This is the second part of series *Getting started with React & GraphQL* containing most popular starter kits and example apps. Let's explore at the start what people like and dislike about each technology. Data show below comes from the state of js survey 2018.

| ** React liked aspects** | ** React disliked aspects**|
|----------------|----------------|
| ⚙️ Elegant programming style & patterns | ⚙️ Clumsy programming style |
| 🎁 Rich package ecosystem | 🎈 Bloated & complex |
| 🏛️ Well-established option |👶 Hard learning curve |
| 📖 Good documentation |👫 Concerns about the team/company |
| ⚡ Fast performance | 📖 Bad documentation |
| 🔧 Powerful developer tooling|⚖️ Fast-changing & breaks often | 

| ** GraphQL liked aspects** | ** GraphQL disliked aspects**|
|----------------|----------------|
| ⚙️ Elegant programming style & patterns |🎈 Bloated & complex|
| 📉 Growing momentum/popularity |⚙️ Clumsy programming style
| 🔧 Powerful developer tooling|👶 Hard learning curve|
| 🕹️ Full-featured & powerful| 📖 Bad documentation|
| 📖 Good documentation|🔧 Lacking developer tooling|
| ⚡ Fast performance| 🕹️ Limited & lacking in features|


# Agenda

1. Extensive React Apollo.
2. React GraphQL vanilla.js.
3. React app with local state management.
4. React Apollo mocking example.
5. WhatsApp clone.
6. React Native "hello world".
7. Pokedex React Native App.
8. Realtime, Offline AWS AppSync.
9. Starter fullstack app.

# [1. Extensive React app](https://github.com/rwieruch/react-graphql-github-apollo)

###A React + Apollo + GraphQL GitHub Client

{% github rwieruch/react-graphql-github-apollo %}

![](https://thepracticaldev.s3.amazonaws.com/i/359i2n7b986j08jyrqfw.gif)

### Features

* React 16 with create-react-app
* Responsive
* React Router 4
* Apollo with GitHub GraphQL API
  * Queries and Mutations with render props
  * Optimistic Updates
  * Pagination
  * Optimistic Fetch (e.g. Issues)
    * not everywhere for the purpose of demonstrating though

# [2. React GraphQL vanilla.js](https://github.com/rwieruch/react-graphql-github-vanilla)

###A React GraphQL example using GitHub's GraphQL API with vanilla JS

{% github rwieruch/react-graphql-github-vanilla %}

### Features

* React 16 with create-react-app
* GitHub GraphQL API
* Consuming GraphQL with plain JS
* no Apollo/Relay


# [3. React app with local state management.](https://github.com/rwieruch/react-apollo-link-state-example)

###A React application using Apollo Client with apollo-link-state for local state management.

{% github rwieruch/react-apollo-link-state-example %}

A React application using Apollo Client with [apollo-link-state](https://www.apollographql.com/docs/link/links/state.html) for local state management. While **apollo-link-state (as alternative to React's local state, Redux or MobX)** is used to manage selected items in a list as local data, the remaining queries and mutations are used for remote data.

# [4. WhatsApp clone](https://github.com/srtucker22/chatty)

###A WhatsApp clone with React Native and Apollo

{% github srtucker22/chatty %}

### Overview
This is a tutorial for building this example [here](https://medium.com/react-native-training/building-chatty-a-whatsapp-clone-with-react-native-and-apollo-part-1-setup-68a02f7e11). This tutorial was created using [tortilla](https://github.com/Urigo/tortilla), an incredible framework for building tutorials. Starting with the very first commit, every commit in Chatty represents the next step in the tutorial. Follow the tutorial for a guided walk through the code, or investigate a commit to see exactly what code changed for a given step. Since this is git, you can even download the app at any step in the tutorial -- how cool is that?!

# [5. React Native "hello world"](https://github.com/apollographql/frontpage-react-native-app)

{% github apollographql/frontpage-react-native-app %}

This is the simple example React Native/Apollo app that lives at dev.apollodata.com.


# [6. Pokedex React Native App](https://github.com/learnapollo/pokedex-react-native)

{% github learnapollo/pokedex-react-native %}

Pokedex React Native app based on CRNA & Expo using and teaching Apollo and GraphQL

### Live Demo: [http://demo.learnapollo.com](http://demo.learnapollo.com/)

![](https://i.gyazo.com/adcc4675cd466195adf727ba8a32b544.gif)

# [7. Realtime, Offline AWS AppSync](https://github.com/aws-samples/aws-mobile-appsync-events-starter-react-native)

###GraphQL starter application with Realtime and Offline functionality using AWS AppSync 

{% github aws-samples/aws-mobile-appsync-events-starter-react-native %}

![](https://thepracticaldev.s3.amazonaws.com/i/2rkf6dkpytxc9d9hosw5.png)

### Features

- GraphQL Mutations
  - Create new events
  - Create comments on existing events

- GraphQL Queries
  - Get all events (w/ pagination support)
  - Get an event by Id

- GraphQL Subscriptions
  - Real time updates for comments on an event

- Authorization
  - The app uses API Key as the authoriation mechanism


# [8. Starter fullstack app](https://github.com/graphql-boilerplates/react-fullstack-graphql/)

{% github graphql-boilerplates/react-fullstack-graphql %}

Bootstrap your fullstack GraphQL app within seconds. GraphQL boilerplates provide the perfect foundation for your GraphQL server, no matter if you're just getting started with GraphQL or aim to build a fully-fledged application.

### Features

- **Rapid scaffolding**: Simply use `graphql create` (from the [GraphQL CLI](https://github.com/graphql-cli/graphql-cli)) to download the boilerplate you want.
- **Easily extensible**: A boilerplate only provides the minimum setup so you can tailor the API to your use case.
- **Best practices**: Each boilerplate incorporates best practices from the GraphQL community.