A React + Apollo + GraphQL GitHub Client

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

• Please install Prettier integration to your editor and turn on format on save option.
  • Prettier For Atom
  • Prettier for VSCode
  • Prettier for EMACS
  • Prettier for VIM
  • others...

Want to learn more about React + GraphQL + Apollo?

• Don't miss upcoming Tutorials and Courses
• Check out current React Courses

react-graphql-github-vanilla

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

Features

• React 16 with create-react-app
• GitHub GraphQL API
• Consuming GraphQL with plain JS
• no Apollo/Relay
  • are you curious about Apollo though?

Installation

• git clone git@github.com:the-road-to-graphql/react-graphql-github-vanilla.git
• cd react-graphql-github-vanilla
• npm install
• add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file
  • scopes/permissions you need to check: admin:org, repo, user, notifications
• npm start
• visit http://localhost:3000

Want to learn more about React + GraphQL + Apollo?

• Don't miss upcoming Tutorials and Courses
• Check out current React Courses

react-apollo-link-state-example

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

• git clone git@github.com:the-road-to-graphql/react-apollo-link-state-example.git
• cd react-apollo-link-state-example
• npm install
• add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file
  • scopes/permissions you need to check: admin:org, repo, user, notifications
• npm start
• visit http://localhost:3000

Want to learn more about React + GraphQL + Apollo?

• Don't miss upcoming Tutorials and Courses
• Check out current React Courses

Chatty

A WhatsApp clone with React Native and Apollo

• Overview
• Steps
• Installing
• Getting Started
• Contributing
• Licence

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…

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.

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

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

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.

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

Fullstack GraphQL Boilerplates for React & Node.js

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…