A react client application communicating with lumen using GraphQL + Relay
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
public
scripts
src
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.graphqlconfig
README.md
icon.png
package.json
schema.graphql
yarn.lock

README.md

React client application + Relay Modern

This project was bootstrapped with Create React App and after ejection its been integrated with Flow, GraphQL & Relay. All tests during development been running against an API Laravel Lumen server .

Server code its here: React-Lumen-Boilerplate

VISIT THE APP DEMO SITE

Notes:

This isn´t a production package, its been built from scratch using minimum plugins, trying to avoid the hidden magic good packages provide, self teach getting hands dirty with code, hopefully will help others and will save you time learning GraphQL in a pure Relay Modern environment.

  • Todo CRUD its taken from RelayJS-examples, and lumen backend has been prepared to be able to serve the endpoints the Todo CRUD needs. Might not be the best approach but its a good way to see how both world work together.
  • The Auth uses Laravel Passport to generate tokens, based on the Personal Access Tokens functionality Passport provides out of the box.
  • No fetch, no Axios this is a pure Relay example thus this has no need to use any other network framework.
  • No Redux as Relay has its own personal storage. pending

Install

Clone or download the repo to your working environment-

git clone git@github.com:kikoseijo/react-relay-app.git

Using the console navigate to the project working root directory

cd react-relay-app

Install dependencies, you can use NPM or Yarn, its your choice-

yarn install

You will need a GraphQL server to work with, you can try the Lumen boilerplate that will respond to all the demo endpoints.

yarn run relay # will generate the necessary files for "**Relay Modern**" to work.

Libraries

Other libraries

Development libraries

Available commands

You can use npm or yarn, its your choice.

Commands Descriptions
yarn start starts application under development environment
yarn build builds application ready for production
yarn schema Will download db schema from configured server .graphqlconfig
yarn gen Generates compiled GraphQL to the __generated__ folders
yarn db yarn schema && yarn gen with a single command
yarn playground GraphQL playground, on port 3003
yarn pretty It does pretty things, called when pushing code trough git

Todo

This is what i consider the minimum features this package should have to help you start working with Relay.

  • Integrate with Laravel Lumen using laravel-graphql
  • Token based Auth with Laravel Passport
  • Integrate Bootstrap v4, SASS
  • Implement HashRouter for github pages
  • Full CRUDs
  • Optimize rendering user experience
  • Fix fake mutations on todo demo against server
  • Implement local & server form validation
  • Implement Relay paginations
  • ...

Credits

Sunnyface.com, is a software development company from Málaga, Spain. We provide quality software based on the cloud for local & international companies, providing technology solutions with the most modern programming languages.

DevOps Web development
Custom App Development Mobile aplications
Social Apps and Startups Residents mobile application
Graphic designer Freelance senior programmer


Created by Kiko Seijo