Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: kennetpostigo/react-reach
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 0.0.2
Choose a base ref
...
head repository: kennetpostigo/react-reach
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Loading
Showing with 605 additions and 173 deletions.
  1. +12 −1 .babelrc
  2. +14 −17 .eslintrc
  3. +0 −21 .travis.yml
  4. +125 −15 README.md
  5. +217 −0 dist/react-reach.js
  6. +1 −0 dist/react-reach.min.js
  7. +26 −29 package.json
  8. +4 −4 src/index.js
  9. +7 −13 src/reachGraphQL.js
  10. +8 −12 src/reachWithDispatch.js
  11. +35 −0 src/reachWithOpts.js
  12. +30 −23 src/utils/transport.js
  13. +74 −38 test/reachGraphQL.spec.js
  14. +4 −0 test/testHelper.spec.js
  15. +48 −0 webpack.config.js
13 changes: 12 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
{
"presets": ["es2015"],
"plugins": ["syntax-async-functions","transform-regenerator"]
"plugins": [
"transform-runtime",
"syntax-async-functions",
"transform-async-to-generator"
],
"env": {
"commonjs": {
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
},
}
}
31 changes: 14 additions & 17 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
{
"rules": {
"no-unused-vars": 0
},
"env": {
"browser": true,
"mocha": true,
"node": true,
"es6": true
},
"extends": "eslint:recommended",
"ecmaFeatures": {
"modules": true,
"jsx": true
},
"plugins": [
"react"
]
"ecmaFeatures": {
"modules": true
},
"env": {
"browser": true,
"mocha": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"]
}
}
21 changes: 0 additions & 21 deletions .travis.yml

This file was deleted.

140 changes: 125 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
# react-reach
> A small library for react to communicate with graphQL
[![travis build](https://img.shields.io/travis/kennetpostigo/react-reach.svg?style=flat-square)](https://travis-ci.org/kennetpostigo/react-reach)
[![codecov coverage](https://img.shields.io/codecov/c/github/kennetpostigo/react-reach.svg?style=flat-square)](https://codecov.io/github/kennetpostigo/react-reach)
[![version](https://img.shields.io/npm/v/react-reach.svg?style=flat-square)](http://npm.im/react-reach)
[![downloads](https://img.shields.io/npm/dm/react-reach.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-reach&from=2015-08-01)
[![MIT License](https://img.shields.io/npm/l/react-reach.svg?style=flat-square)](http://opensource.org/licenses/MIT)

It helps you write applications that use tools you are familiar with from the
react-reach helps you write applications that use tools you are familiar with from the
react ecosystem. react-reach is designed to be used along side redux and react.
React-reach works as the layer that handles communication of data between React
and graphQL. Reach enables developers to make queries and mutations against GraphQL.
@@ -18,32 +16,144 @@ to account for request to the server. Usually you would go about making network
request to specified endpoints with REST, or networks request to `"/graphql"`
if you use GraphQL. Now Relay may come to mind, and what makes reach different
is that it only does one thing. You can use reach along Redux.

## Features are a Work In Progress
* [x] __Talk to a GraphQL server__
* [x] __Cache responses in [Redux](https://github.com/rackt/redux) store__
* [ ] __Optimistic Updates__
* [ ] __Create Example Application__
* [ ] __Create Blog Post with Explanations__
* [x] __UMD Build__
* [x] __When used with [react-router](https://github.com/rackt/react-router) dynamically request data needed `onEnter` & `onLeave` Hooks__

## Developer Guide
+ Need to create a blog post to demonstrate how to use it in a sample application

## Usage
The goal is to make fetching data from a GraphQL server as easy as this:
```js
//.reachGraphQL() to make a query for some data
npm install --save react-reach
```

react-reach makes fetching data from a GraphQL server as easy as this:
```js
//reachGraphQL() to make a query for some data, or add mutation
//I created this function with for simply communicating back and forth with graphQL
//params: reachGraphQL(url, query/mutation, queryParameters)
import React from 'react';
import reactDOM from 'react-dom';
import {reachGraphQL} from 'react-reach';

.reachGraphQL('localhost:1000', `{
user(id: "1") {
name
class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
shipName: ''
};
};

getAllStarShips () {
reachGraphQL('http://localhost:4000/', `{
allStarships(first: 7) {
edges {
node {
id
name
model
costInCredits
pilotConnection {
edges {
node {
...pilotFragment
}
}
}
}
}
}
}
}`, {})
fragment pilotFragment on Person {
name
homeworld { name }
}`, {})
.then((data) => {
this.setState({
shipName: data.allStarships.edges[1].node.name
});
});
}

componentDidMount() {
this.getAllStarShips();
}

render() {
console.log('state:',JSON.stringify(this.state.shipName, null, 2));
return (
<div>
<h1>React-Reach!</h1>
<p>{this.state.shipName}</p>
</div>
);
}
}

reactDOM.render(
<App></App>,
document.getElementById('app')
);

//.reachWithDispatch() to make a query and dispatch actionCreator passed in
//reachWithDispatch() to make a query and dispatch actionCreator passed in
//I created this function for receiving data from the server and automatically caching it in the redux store.
//To be used with redux-thunk or any similar middleware.
//params: reachWithDispatch(url, query/mutation, queryParameters, actionCreator)

.reachWithDispatch('localhost:1000', `{
import { reachWithDispatch } from 'react-reach';

reachWithDispatch('localhost:1000', `{
user(id: "1") {
name
}
}`, {}, somePredefinedActionCreator)
}`, {}, somePredefinedActionCreator);


//reachWithOpts() to make a query and dispatch specified actionCreators from an Object passed in
//I created this function for sending data to the server and optimistically updating the redux store client-side
//To be used with redux-thunk or any similar middleware.
//params: reachWithDispatch(url, query/mutation, queryParameters, actionCreator, store, retry)
//Automatically handles updating redux store client-side
//This function is still a WIP not implemented

import { reachWithOpts } from 'react-reach';

reachWithOpts('localhost:1000', `mutation {
CreateUser {
_id: "12345",
name: JohnDoe
}
}`, {}, ObjectContainingActionCreators, store, true);
```

## Caveat

Make sure to enable CORS on your server with __ OPTIONS__ to avoid CORS error
or Preflight fetch error. Heres an example when using Express:

```js
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');

if (req.method === "OPTIONS") {
res.status(200).end();
} else {
next();
}
next();
});
```

## Status on react-reach
Its now in Beta. Basic Functionality, if you find bugs or if anything isn't working
properly please report it.
## The State of react-reach
I began working on react-reach the past few day. I hope people are willing to
try it out and help me spot bugs and problems.Feel free to give me feedback and
request features you would like to see in the project.
Loading