DEV Community

Robert Matyszewski
Robert Matyszewski

Posted on

Getting started with React & GraphQL part II

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

A React + Apollo + GraphQL GitHub Client

GitHub logo the-road-to-graphql / react-graphql-github-apollo

πŸš€A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.

A React + Apollo + GraphQL GitHub Client

Build Status Slack Greenkeeper badge

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

Installation

  • git clone git@github.com:the-road-to-graphql/react-graphql-github-apollo.git
  • cd react-graphql-github-apollo
  • add your own GitHub personal access token in a .env file in your root folder
    • scopes/permissions you need to check: admin:org, repo, user, notifications
    • REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxxXXX
  • npm install
  • npm start
  • visit http://localhost:3000

Contributing

Want to learn more about React + GraphQL + Apollo?




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

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

GitHub logo the-road-to-graphql / react-graphql-github-vanilla

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

react-graphql-github-vanilla

Build Status Slack Greenkeeper badge

A simple React application consuming the GitHub GraphQL API with plain HTTP requests. Read more about it over here.

Features

Installation

Want to learn more about React + GraphQL + Apollo?




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.

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

GitHub logo the-road-to-graphql / react-apollo-link-state-example

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

react-apollo-link-state-example

Build Status Slack Greenkeeper badge

A React application using Apollo Client with apollo-link-state 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.

Installation

Want to learn more about React + GraphQL + Apollo?




A React application using Apollo Client with apollo-link-state 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

A WhatsApp clone with React Native and Apollo

GitHub logo srtucker22 / chatty

A WhatsApp clone with React Native and Apollo (Tutorial)

Chatty

A WhatsApp clone with React Native and Apollo

Overview

View the Medium blog for this tutorial here.

This tutorial was created using 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?!

Steps

  1. Setup
  2. GraphQL Queries with ApolloServer
  3. GraphQL Queries with React Apollo
  4. GraphQL Mutations & Optimistic UI
  5. GraphQL Pagination
  6. GraphQL Subscriptions
  7. GraphQL Authentication
  8. GraphQL Input Types

Installing

npm install                       # install server dependencies
cd client && npm install          # install client dependencies

For Steps 7 and higher, please enter your…

Overview

This is a tutorial for building this example here. This tutorial was created using 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"

GitHub logo apollographql / frontpage-react-native-app

πŸ“„ Apollo "hello world" app, for React Native

Apollo React Native Hello World app

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

Installation

Clone the repository and run npm install:

git clone https://github.com/apollostack/frontpage-react-native-app
cd frontpage-react-native-app
npm install

Starting the app

Make sure you have React Native installed.

This app talks to the hello world server, available here: https://github.com/apollostack/frontpage-server

Once you've installed and started that server, start this app with:

react-native run-ios

It will open a iOS simulator.




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

6. Pokedex React Native App

GitHub logo learnapollo / pokedex-react-native

A Pokedex App using and teaching Apollo with React Native (Expo)

pokedex-react-native

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

Live Demo: http://demo.learnapollo.com

Getting started

If you haven't done it already, checkout the hands-on Learn Apollo tutorial.

git clone git@github.com:learnapollo/pokedex-react-native.git
cd pokedex-react-native
cd exercise-01
yarn
yarn start

Workflow

As you're following along the Learn Apollo tutorial, you will work on different coding excercises. Each exercise has a folder that you can use to start working and a solution folder where you can take a peek if the instructions given on Learn Apollo are not clear enough.

After you completed the step, you can compare your results to the official solution by looking into the respective folder. If you found a different solution than we're proposing, feel free to tell us about your solution. πŸ’‘

Help & Community Slack Status

Join our Slack community if you run into issues or have questions. We love talking to…

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

Live Demo: http://demo.learnapollo.com

7. Realtime, Offline AWS AppSync

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

GitHub logo aws-samples / aws-mobile-appsync-events-starter-react-native

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

Introduction

This is a Starter React Native application for using the Sample app in the AWS AppSync console when building your GraphQL API. The Sample app creates a GraphQL schema and provisions Amazon DynamoDB resources, then connects them appropriately with Resolvers. The application demonstrates GraphQL Mutations, Queries and Subscriptions using AWS AppSync. You can use this for learning purposes or adapt either the application or the GraphQL Schema to meet your needs.

EventDetails

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

AWS Setup

  1. Navigate to the AWS AppSync console using the URL: http://console.aws.amazon.com/appsync/home

  2. Click on Create API and select the Sample Schema option. Enter a API name of your choice. Click Create.

React Native

…

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

GitHub logo graphql-boilerplates / react-fullstack-graphql

Starter projects for fullstack applications based on React & GraphQL.

Fullstack GraphQL Boilerplates for React & Node.js


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) 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.

For a fully-fledged React & Apollo tutorial, visit How to GraphQL. You can more learn about the idea behind GraphQL boilerplates here.

Quickstart

Select a boilerplate and follow the instructions in the belonging README to get started:

  • minimal: Minimal boilerplate with basic "Hello World" functionality
  • basic: Basic boilerplate based on a simple data model…

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) 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.

Top comments (0)