Skip to content

Commit

Permalink
Intial build (apollographql#1)
Browse files Browse the repository at this point in the history
* intial build of react-apollo connect and Provider
  • Loading branch information
James Baxley committed Apr 16, 2016
1 parent 4565d30 commit e919097
Show file tree
Hide file tree
Showing 18 changed files with 2,312 additions and 46 deletions.
32 changes: 32 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules

# don't commit compiled files
lib
test-lib
typings
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
example
15 changes: 15 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
language: node_js
node_js:
- "5"
- "4"
install:
- npm install -g coveralls
- npm install

script:
- npm test
- npm run coverage
- coveralls < ./coverage/lcov.info || true # ignore coveralls error

# Allow Travis tests to run in containers.
sudo: false
14 changes: 14 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Test",
"type": "node",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"stopOnEntry": false,
"args": ["lib/test/tests.js"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null
}
]
}
16 changes: 16 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// Place your settings in this file to overwrite default and user settings.
{
"editor.tabSize": 2,
"editor.rulers": [100],
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"editor.wrappingColumn": 100,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
// "node_modules": true,
"test-lib": true,
"lib": true,
"coverage": true
}
}
22 changes: 22 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
The MIT License (MIT)

Copyright (c) 2015 Ben Newman

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

97 changes: 56 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

Use your GraphQL server data in your React components, with the Apollo Client.

## API sketch

I'd like to base this very heavily on the [`react-redux` API](https://github.com/reactjs/react-redux/blob/master/docs/api.md#api) and have the same parts - a `Provider` component and a `connect` function. Ideally, if you are using Apollo and Redux together, you don't have to nest calls to providers and containers - they should just work together. So, here we go!
- [Provider](#provider)
- [connect](#connect)
- [Additional Props](#additional-props)
- [Using in concert with Redux](#using-in-concert-with-redux)

### Provider

Expand Down Expand Up @@ -54,7 +55,7 @@ ReactDOM.render(
)
```

Note that this design calls it just `Provider`, which is appropriate because in the base case you can use it instead of the Redux provider.
The wrapper is called `Provider` because in the base case you can use it instead of the Redux provider or you can use it as an Apollo enhanced Redux Provider.

### connect

Expand All @@ -72,9 +73,9 @@ import { connect } from 'apollo-react';

import Category from '../components/Category';

function mapQueriesToProps({ watchQuery, ownProps, state }) {
function mapQueriesToProps({ ownProps, state }) {
return {
category: watchQuery({
category: {
query: `
query getCategory($categoryId: Int!) {
category(id: $categoryId) {
Expand All @@ -88,44 +89,42 @@ function mapQueriesToProps({ watchQuery, ownProps, state }) {
},
forceFetch: false,
returnPartialData: true,
})
}
}
},
};
};

function mapMutationsToProps({ mutate, ownProps, state }) {
function mapMutationsToProps({ ownProps, state }) {
return {
onPostReply(raw) {
return mutate({
mutation: `
mutation postReply(
$topic_id: ID!
$category_id: ID!
$raw: String!
postReply: (raw) => ({
mutation: `
mutation postReply(
$topic_id: ID!
$category_id: ID!
$raw: String!
) {
createPost(
topic_id: $topic_id
category: $category_id
raw: $raw
) {
createPost(
topic_id: $topic_id
category: $category_id
raw: $raw
) {
id
cooked
}
id
cooked
}
`,
variables: {
// Use the container component's props
topic_id: ownProps.topic_id,
}
`,
variables: {
// Use the container component's props
topic_id: ownProps.topic_id,

// Use the redux state
category_id: state.selectedCategory,
// Use the redux state
category_id: state.selectedCategory,

// Use an argument passed from the callback
raw,
}
});
}
}
}
// Use an argument passed from the triggering of the mutation
raw,
}
}),
};
};

const CategoryWithData = connect({
mapQueriesToProps,
Expand All @@ -135,7 +134,7 @@ const CategoryWithData = connect({
export default CategoryWithData;
```

Note that `watchQuery` takes the same arguments as [`ApolloClient#watchQuery`](http://docs.apollostack.com/apollo-client/index.html#watchQuery). In this case, the `Category` component will get a prop called `category`, which has the following keys:
Each key on the object returned by mapQueriesToProps should be made up of the same possible arguments as [`ApolloClient#watchQuery`](http://docs.apollostack.com/apollo-client/index.html#watchQuery). In this case, the `Category` component will get a prop called `category`, which has the following keys:

```js
{
Expand All @@ -145,7 +144,23 @@ Note that `watchQuery` takes the same arguments as [`ApolloClient#watchQuery`](h
}
```

Using in concert with Redux:
`mapMutationsToProps` returns an object made up of keys and values that are custom functions to call the mutation. These can be used in children components (for instance, on a event handler) to trigger the mutation. The resulting function must return the same possible arguents as [`ApolloClient#mutate`](http://docs.apollostack.com/apollo-client/index.html#mutate). In this case, the `Category` component will get a prop called `postReply`, which has the following keys:

```js
{
loading: boolean,
error: Error,
result: GraphQLResult,
}
```

The `Category` component will also get a prop of `mutations` that will have a key of `postReply`. This key is the method that triggers the mutation and can take custom arguments (e.g. `this.props.mutations.postReply('Apollo and React are really great!')`). These arguments are passed to the method that creates the mutation.

### Additional Props

Redux's connect will pass `dispatch` as a prop unless action creators are passed using `mapDisptachToProps`. Likewise, the Apollo connect exposes part of the apollo-client api to props under the keys `query` and `mutate`. These correspond to the Apollo methods and can be used for custom needs outside of the ability of the wrapper component.

### Using in concert with Redux

```js
// ... same as above
Expand All @@ -165,4 +180,4 @@ const CategoryWithData = connect({
export default CategoryWithData;
```

In this case, `CategoryWithData` gets two props: `category` and `selectedCategory`.
In this case, `CategoryWithData` gets two props: `category` and `selectedCategory`.
26 changes: 26 additions & 0 deletions appveyor.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Test against this version of Node.js
environment:
matrix:
# node.js
- nodejs_version: "5"
- nodejs_version: "4"

# Install scripts. (runs after repo cloning)
install:
# Get the latest stable version of Node.js or io.js
- ps: Install-Product node $env:nodejs_version
# install modules
- npm install

# Post-install test scripts.
test_script:
# run tests
- npm test

# artifacts:
# - path: ./junit/xunit.xml
# - path: ./xunit.xml

# nothing to compile in this project
build: off
deploy: off
66 changes: 61 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,67 @@
{
"name": "apollo-react",
"name": "react-apollo",
"version": "0.0.1",
"description": "React data container for Apollo Client",
"main": "index.js",
"main": "./lib/src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"pretest": "npm run compile",
"test": "mocha --require ./test/fixtures/setup.js --reporter spec --full-trace --recursive ./lib/test",
"posttest": "npm run lint",
"compile": "tsc",
"watch": "tsc -w",
"prepublish": "npm run compile",
"lint": "tslint src/*.ts* && tslint test/*.ts*",
"coverage": "istanbul cover ./node_modules/mocha/bin/_mocha -- --reporter dot --full-trace lib/test/tests.js",
"postcoverage": "remap-istanbul --input coverage/coverage.json --type lcovonly --output coverage/lcov.info"
},
"author": "",
"license": "ISC"
"repository": {
"type": "git",
"url": "apollostack/react-apollo"
},
"keywords": [
"ecmascript",
"es2015",
"jsnext",
"javascript",
"relay",
"npm",
"react"
],
"author": "James Baxley <[email protected]>",
"license": "MIT",
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0",
"redux": "^2.0.0 || ^3.0.0",
"apollo-client": "0.0.5"
},
"devDependencies": {
"apollo-client": "0.0.5",
"chai": "^3.5.0",
"chai-as-promised": "^5.2.0",
"chai-enzyme": "^0.4.2",
"cheerio": "^0.20.0",
"enzyme": "^2.2.0",
"graphql": "^0.5.0",
"istanbul": "^0.4.2",
"jsdom": "^8.3.1",
"mocha": "^2.3.3",
"react": "^15.0.1",
"react-addons-test-utils": "^15.0.1",
"react-dom": "^0.14.8",
"redux": "^3.4.0",
"remap-istanbul": "^0.5.1",
"source-map-support": "^0.4.0",
"swapi-graphql": "0.0.4",
"tslint": "^3.6.0",
"typescript": "^1.8.9",
"typescript-require": "^0.2.9-1",
"typings": "^0.7.9"
},
"dependencies": {
"hoist-non-react-statics": "^1.0.5",
"lodash.isequal": "^4.1.1",
"lodash.isobject": "^3.0.2",
"object-assign": "^4.0.1",
"react-redux": "^4.4.4"
}
}
Loading

0 comments on commit e919097

Please sign in to comment.