All Projects → WeLikeGraphQL → Universal React Apollo Example

WeLikeGraphQL / Universal React Apollo Example

Universal React Apollo App (GraphQL) consuming: https://github.com/WeLikeGraphQL/wordpress-graphql-api-example!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Universal React Apollo Example

Apollo Universal Starter Kit
Apollo Universal Starter Kit is an SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.
Stars: ✭ 1,645 (+1305.98%)
Mutual labels:  graphql, apollo, universal
Next Advanced Apollo Starter
Advanced, but minimalistic Next.js pre-configured starter with focus on DX
Stars: ✭ 131 (+11.97%)
Mutual labels:  graphql, apollo, universal
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+1466.67%)
Mutual labels:  graphql, apollo, universal
Apollo
Meteor & Apollo integration
Stars: ✭ 87 (-25.64%)
Mutual labels:  graphql, apollo
Livepeerjs
JavaScript tools and applications that interact with Livepeer's smart contracts and peer-to-peer network
Stars: ✭ 116 (-0.85%)
Mutual labels:  graphql, apollo
Boilerplate Vue Apollo Graphql Mongodb
Start your magical stack journey!
Stars: ✭ 85 (-27.35%)
Mutual labels:  graphql, apollo
Nestjs Cqrs Starter
NestJS CQRS Microservices Starter Project
Stars: ✭ 80 (-31.62%)
Mutual labels:  graphql, apollo
Angular Fullstack Graphql
🚀 Starter projects for fullstack applications based on Angular & GraphQL.
Stars: ✭ 92 (-21.37%)
Mutual labels:  graphql, apollo
Quell
Quell is an easy-to-use, lightweight JavaScript library providing a client- and server-side caching solution for GraphQL. Use Quell to prevent redundant client-side API requests and to minimize costly server-side response latency.
Stars: ✭ 90 (-23.08%)
Mutual labels:  graphql, apollo
Booben
Web app constructor based on React, with GraphQL bindings
Stars: ✭ 96 (-17.95%)
Mutual labels:  graphql, apollo
Guide
📖 The GraphQL Guide website
Stars: ✭ 104 (-11.11%)
Mutual labels:  graphql, apollo
Graphql Transform Schema
Transform, filter & alias resolvers of a GraphQL schema
Stars: ✭ 84 (-28.21%)
Mutual labels:  graphql, apollo
Apollo Scalajs
Use Apollo GraphQL from Scala.js apps!
Stars: ✭ 83 (-29.06%)
Mutual labels:  graphql, apollo
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: ✭ 85 (-27.35%)
Mutual labels:  graphql, webpack2
Apollo Prophecy
🔮 GraphQL error management made Easy, generate custom machine-readable errors for Apollo Client/Server from the CLI
Stars: ✭ 83 (-29.06%)
Mutual labels:  graphql, apollo
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: ✭ 91 (-22.22%)
Mutual labels:  graphql, apollo
Leo
Highly Extensible, Declarative Static Site Generator
Stars: ✭ 100 (-14.53%)
Mutual labels:  graphql, apollo
Meteor Integration
🚀 meteor add apollo
Stars: ✭ 107 (-8.55%)
Mutual labels:  graphql, apollo
Apollo Link
🔗 Interface for fetching and modifying control flow of GraphQL requests
Stars: ✭ 1,434 (+1125.64%)
Mutual labels:  graphql, apollo
Nextjs Strapi Boilerplate
🎨 Boilerplate for building applications using Strapi and Next.js
Stars: ✭ 76 (-35.04%)
Mutual labels:  graphql, apollo

Universal React Apollo Example

Gitter Build Status

An example of the app that shows how to use a modern stack (strong accent on GraphQL!).

Features

  • GraphQL for fetching data! The most awesome part of the project!
  • Universal Rendering (Server Side Rendering)
  • ES6/ES2015 with Babel
  • React data container for the Apollo Client
  • Integrating predictable state container Redux with Apollo
  • Hot reloading using React-Hot-Loader
  • Recompose as a React utility belt for higher order components
  • Development and production bundling by Webpack
  • CSSNext: use of official W3C syntax of the future CSS
  • Transforming styles with JS plugins by PostCSS
  • Wow.js for CSS animations
  • Flexbox for resolving layout fatigue and making the app responsive (open the app in desktop, mobile, whatever...). Doesn't work on IE 9, but it should not be a problem nowadays. See browsers usage.
  • CSS Modules: say goodbye to global scope in CSS and most of conflicts
  • Jest Snapshot Testng, some parts in Enzyme and Sinon
  • Linting both JS and CSS, respectively by: ESLint and Stylelint

Running the app

1. This repository is the frontend for Wordpress GraphQL API Example. You need to run it first, however, you can also set up own endpoints.

2. Install Node/npm

Make sure you have Node.js installed (the app has been tested with Node 5.12.0). You can use npm or yarn for running commands (we prefer yarn, as it is faster).

3. Clone and install dependencies

git clone https://github.com/WeLikeGraphQL/react-apollo-example.git
cd react-apollo-example
yarn install

4. Build and run the app

Development mode:

yarn run build:dll
yarn run dev

Production mode:

yarn run build
yarn start

5. Running Tests

yarn test

How to Contribute:

Best way to keep up to date is check the issues. We really welcome improvements for all aspects of an app.

  1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
  2. Coding guidelines: Airbnb's Style Guide
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].