├── examples ├── react-native │ ├── .watchmanconfig │ ├── .babelrc │ ├── android │ │ ├── settings.gradle │ │ ├── app │ │ │ ├── src │ │ │ │ └── main │ │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── reactnative │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ │ └── AndroidManifest.xml │ │ │ ├── BUCK │ │ │ ├── proguard-rules.pro │ │ │ └── build.gradle │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── keystores │ │ │ ├── debug.keystore.properties │ │ │ └── BUCK │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradlew.bat │ │ └── gradlew │ ├── .buckconfig │ ├── __tests__ │ │ ├── index.ios.js │ │ └── index.android.js │ ├── ios │ │ ├── reactnative │ │ │ ├── AppDelegate.h │ │ │ ├── main.m │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── AppDelegate.m │ │ │ ├── Info.plist │ │ │ └── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ ├── reactnativeTests │ │ │ ├── Info.plist │ │ │ └── reactnativeTests.m │ │ └── reactnative.xcodeproj │ │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── reactnative.xcscheme │ ├── .gitignore │ ├── index.ios.js │ ├── package.json │ ├── Pokemon.js │ └── .flowconfig ├── meteor │ ├── .gitignore │ ├── .meteor │ │ ├── .gitignore │ │ ├── release │ │ ├── platforms │ │ ├── .id │ │ ├── .finished-upgraders │ │ ├── packages │ │ └── versions │ ├── client │ │ ├── main.html │ │ └── index.js │ ├── package.json │ ├── imports │ │ ├── App.js │ │ └── Pokemon.js │ └── server │ │ └── index.js └── create-react-app │ ├── .flowconfig │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── index.js │ ├── App.test.js │ ├── App.js │ ├── __snapshots__ │ │ └── Pokemon.test.js.snap │ ├── Pokemon.js │ └── Pokemon.test.js │ ├── .gitignore │ └── package.json ├── src ├── index.ts ├── browser.ts ├── shallowEqual.ts ├── ApolloProvider.tsx ├── withApollo.tsx ├── parser.ts ├── server.ts └── test-utils.tsx ├── .npmignore ├── test ├── react-native │ ├── __snapshots__ │ │ └── component.test.js.snap │ └── component.test.js ├── lib.test.ts ├── flow.js ├── react-web │ └── client │ │ ├── graphql │ │ ├── statics.test.tsx │ │ ├── fragments.test.tsx │ │ ├── queries │ │ │ ├── polling.test.tsx │ │ │ ├── reducer.test.tsx │ │ │ └── updateQuery.test.tsx │ │ ├── mutations │ │ │ ├── lifecycle.test.tsx │ │ │ ├── index.test.tsx │ │ │ └── queries.test.tsx │ │ └── subscriptions.test.tsx │ │ └── libraries │ │ └── mobx.test.tsx ├── shallowEqual.test.ts └── parser.test.ts ├── .flowconfig ├── .vscode ├── launch.json ├── spell.json ├── launchReactNative.js ├── typings │ └── react │ │ ├── react-addons-create-fragment.d.ts │ │ ├── react-addons-pure-render-mixin.d.ts │ │ ├── react-addons-transition-group.d.ts │ │ ├── react-global.d.ts │ │ ├── react-addons-linked-state-mixin.d.ts │ │ ├── react-addons-update.d.ts │ │ ├── react-addons-css-transition-group.d.ts │ │ ├── react-addons-perf.d.ts │ │ ├── react-dom.d.ts │ │ └── react-addons-test-utils.d.ts └── settings.json ├── rollup.config.js ├── rollup.test-utils.config.js ├── rollup.browser.config.js ├── scripts ├── gzip.js └── filesize.js ├── appveyor.yml ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── tsconfig.json ├── preprocessor.js ├── LICENSE ├── typings.d.ts ├── .travis.yml ├── tslint.json ├── index.js.flow ├── package.json ├── README.md └── CONTRIBUTING.md /examples/react-native/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /examples/meteor/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.4.2 2 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /examples/react-native/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /examples/react-native/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'reactnative' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './browser'; 2 | 3 | export { getDataFromTree, renderToStringWithData } from './server'; 4 | -------------------------------------------------------------------------------- /examples/create-react-app/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | /node_modules/fbjs/.* 3 | 4 | [options] 5 | suppress_type=$FlowIssue 6 | -------------------------------------------------------------------------------- /examples/meteor/client/main.html: -------------------------------------------------------------------------------- 1 | 2 | Charmander 3 | 4 | 5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | reactnative 3 | 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | src 3 | test 4 | .vscode 5 | appveyor.yml 6 | tsconfig.json 7 | tslint.json 8 | typings.json 9 | ambient.d.ts 10 | coverage 11 | -------------------------------------------------------------------------------- /examples/react-native/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/react-native/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/react-native/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/react-native/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/functions/react-apollo/master/examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); 9 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log 16 | -------------------------------------------------------------------------------- /examples/react-native/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /examples/meteor/client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Meteor } from 'meteor/meteor'; 3 | import { render } from 'react-dom'; 4 | 5 | import App from '../imports/App'; 6 | 7 | Meteor.startup(() => { 8 | render(, document.getElementById('root')); 9 | }); 10 | -------------------------------------------------------------------------------- /test/react-native/__snapshots__/component.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`App renders correctly 1`] = ` 4 | 9 | Loading... 10 | 11 | `; 12 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/examples/**/.* 3 | .*/node_modules/art/.* 4 | .*/node_modules/react-native/**/.* 5 | .*/node_modules/apollo-client/test/**/.* 6 | 7 | [include] 8 | 9 | [libs] 10 | ./node_modules/apollo-client/index.js.flow 11 | ./index.js.flow 12 | 13 | [options] 14 | suppress_comment= \\(.\\|\n\\)*\\$ExpectError 15 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 1ku8q2i1enghdmf8tpdu 8 | -------------------------------------------------------------------------------- /examples/react-native/__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /examples/react-native/__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Test", 6 | "type": "node", 7 | "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", 8 | "stopOnEntry": false, 9 | "args": ["lib/test/tests.js"], 10 | "cwd": "${workspaceRoot}", 11 | "runtimeExecutable": null 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | entry: "lib/index.js", 3 | dest: "lib/react-apollo.umd.js", 4 | format: "umd", 5 | sourceMap: true, 6 | moduleName: "react-apollo", 7 | onwarn, 8 | }; 9 | 10 | function onwarn(message) { 11 | const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; 12 | 13 | if (!suppressed.find(code => message.code === code)) { 14 | return console.warn(message.message); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /rollup.test-utils.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | entry: "lib/test-utils.js", 3 | dest: "lib/test-utils.js", 4 | format: "umd", 5 | sourceMap: true, 6 | moduleName: "react-apollo", 7 | onwarn, 8 | }; 9 | 10 | function onwarn(message) { 11 | const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; 12 | 13 | if (!suppressed.find(code => message.code === code)) { 14 | return console.warn(message.message); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /rollup.browser.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | entry: "lib/browser.js", 3 | dest: "lib/react-apollo.browser.umd.js", 4 | format: "umd", 5 | sourceMap: true, 6 | moduleName: "react-apollo", 7 | onwarn, 8 | }; 9 | 10 | function onwarn(message) { 11 | const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; 12 | 13 | if (!suppressed.find(code => message.code === code)) { 14 | return console.warn(message.message); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scripts/gzip.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 'use strict'; 3 | 4 | var Flags = require('minimist')(process.argv.slice(1)), 5 | Fs = require('fs'), 6 | Path = require('path'), 7 | Zlib = require('zlib'); 8 | 9 | var filePath = Path.resolve(process.cwd(), Flags.file); 10 | var gzip = Zlib.createGzip({level: 9}); 11 | 12 | var readStream = Fs.createReadStream(filePath); 13 | var writeStream = Fs.createWriteStream(`${filePath}.gz`); 14 | 15 | readStream.pipe(gzip).pipe(writeStream); 16 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/java/com/reactnative/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.reactnative; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "reactnative"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.vscode/spell.json: -------------------------------------------------------------------------------- 1 | {"language":"en","ignoreWordsList":["graphql"],"mistakeTypeToStatus":{"Passive voice":"Hint","Spelling":"Error","Complex Expression":"Disable","Hidden Verbs":"Information","Hyphen Required":"Disable","Redundant Expression":"Disable","Did you mean...":"Disable","Repeated Word":"Warning","Missing apostrophe":"Warning","Cliches":"Disable","Missing Word":"Disable","Make I uppercase":"Warning"},"languageIDs":["markdown","text"],"ignoreRegExp":["/\\(.*\\.(jpg|jpeg|png|md|gif|JPG|JPEG|PNG|MD|GIF)\\)/g","/((http|https|ftp|git)\\S*)/g"]} -------------------------------------------------------------------------------- /test/lib.test.ts: -------------------------------------------------------------------------------- 1 | import { ApolloClient, createNetworkInterface } from '../src'; 2 | import { gql } from '../src'; 3 | 4 | describe('react-apollo pacakge', () => { 5 | it('exports apollo-client', () => { 6 | expect(new ApolloClient()).toBeInstanceOf(ApolloClient); 7 | }); 8 | 9 | it('exports createNetworkInterface', () => { 10 | expect(typeof createNetworkInterface).toBe('function'); 11 | }); 12 | 13 | it('exports gql from graphql-tag', () => { 14 | expect(typeof gql).toBe('function'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /.vscode/launchReactNative.js: -------------------------------------------------------------------------------- 1 | // This file is automatically generated by vscode-react-native@0.2.0 2 | // Please do not modify it manually. All changes will be lost. 3 | try { 4 | var path = require("path"); 5 | var Launcher = require("/Users/james.baxley/.vscode/extensions/vsmobile.vscode-react-native-0.2.0/out/debugger/launcher.js").Launcher; 6 | new Launcher(path.resolve(__dirname, "..")).launch(); 7 | } catch (e) { 8 | throw new Error("Unable to launch application. Try deleting .vscode/launchReactNative.js and restarting vscode."); 9 | } -------------------------------------------------------------------------------- /src/browser.ts: -------------------------------------------------------------------------------- 1 | export { default as ApolloProvider } from './ApolloProvider'; 2 | export { 3 | default as graphql, 4 | MutationOpts, 5 | QueryOpts, 6 | QueryProps, 7 | MutationFunc, 8 | OptionProps, 9 | DefaultChildProps, 10 | OperationOption, 11 | } from './graphql'; 12 | export { withApollo } from './withApollo'; 13 | 14 | // expose easy way to join queries from redux 15 | export { compose } from 'redux'; 16 | 17 | // re-exports of close dependencies. 18 | export * from 'apollo-client'; 19 | export { default as gql } from 'graphql-tag'; 20 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | 1.4.0-remove-old-dev-bundle-link 15 | 1.4.1-add-shell-server-package 16 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/meteor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "meteor", 3 | "private": true, 4 | "scripts": { 5 | "start": "METEOR_DISABLE_FS_FIBERS=1 meteor run" 6 | }, 7 | "dependencies": { 8 | "apollo-client": "^0.5.0", 9 | "cheerio": "^0.22.0", 10 | "graphql-tag": "^0.1.15", 11 | "meteor-node-stubs": "~0.2.0", 12 | "node-fetch": "^1.6.3", 13 | "react": "^15.3.2", 14 | "react-apollo": "^0.5.14", 15 | "react-dom": "^15.3.2" 16 | }, 17 | "devDependencies": { 18 | "jest": "^16.0.2", 19 | "react-test-renderer": "^15.3.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/react-native/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | # Test against this version of Node.js 2 | environment: 3 | matrix: 4 | # node.js 5 | - nodejs_version: "5" 6 | - nodejs_version: "4" 7 | 8 | # Install scripts. (runs after repo cloning) 9 | install: 10 | # Get the latest stable version of Node.js or io.js 11 | - ps: Install-Product node $env:nodejs_version 12 | # install modules 13 | - npm install 14 | 15 | # Post-install test scripts. 16 | test_script: 17 | # run tests 18 | - npm test 19 | 20 | # artifacts: 21 | # - path: ./junit/xunit.xml 22 | # - path: ./xunit.xml 23 | 24 | # nothing to compile in this project 25 | build: off 26 | deploy: off 27 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ApolloClient, { createNetworkInterface } from 'apollo-client'; 3 | import { ApolloProvider } from "../../../"; 4 | 5 | import Pokemon from "./Pokemon"; 6 | 7 | export const networkInterface = createNetworkInterface({ uri: 'https://graphql-pokemon.now.sh/' }); 8 | export const client = new ApolloClient({ networkInterface }); 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | ## Steps to Reproduce 10 | 11 | Describe how to reproduce this issue. 12 | 13 | > code samples are greatly appreciated! 14 | 15 | 1. Do a thing 16 | 2. Do another thing 17 | 3. etc. 18 | 19 | ### Buggy Behavior 20 | 21 | Describe the thing that happens that is the issue. 22 | 23 | ### Expected Behavior 24 | 25 | Describe what you think should actually happen. 26 | 27 | ### Version 28 | - apollo-client@ 29 | - react-apollo@ 30 | -------------------------------------------------------------------------------- /examples/create-react-app/src/__snapshots__/Pokemon.test.js.snap: -------------------------------------------------------------------------------- 1 | exports[`Pokemon Component should render a loading state without data 1`] = ` 2 |
3 | Loading 4 |
5 | `; 6 | 7 | exports[`Pokemon Component should render an error 1`] = ` 8 |

9 | ERROR 10 |

11 | `; 12 | 13 | exports[`Pokemon Component should render name and image in order 1`] = `
`; 14 | 15 | exports[`Pokemon query should match expected shape 1`] = ` 16 | "query GetPokemon($name: String!) { 17 | pokemon(name: $name) { 18 | name 19 | image 20 | } 21 | } 22 | " 23 | `; 24 | 25 | exports[`default export renders without crashing 1`] = ` 26 |
27 | Loading 28 |
29 | `; 30 | -------------------------------------------------------------------------------- /src/shallowEqual.ts: -------------------------------------------------------------------------------- 1 | // https://github.com/reactjs/react-redux/blob/master/src/utils/shallowEqual.js 2 | 3 | export default function shallowEqual(objA, objB) { 4 | if (!objA || !objB) return true; 5 | if (objA === objB) return true; 6 | 7 | const keysA = Object.keys(objA); 8 | const keysB = Object.keys(objB); 9 | 10 | if (keysA.length !== keysB.length) return false; 11 | 12 | // Test for A's keys different from B. 13 | const hasOwn = Object.prototype.hasOwnProperty; 14 | for (let i = 0; i < keysA.length; i++) { 15 | if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) { 16 | return false; 17 | } 18 | } 19 | 20 | return true; 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-create-fragment.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-create-fragment) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | namespace __Addons { 10 | export function createFragment(object: { [key: string]: ReactNode }): ReactFragment; 11 | } 12 | } 13 | 14 | declare module "react-addons-create-fragment" { 15 | export = __React.__Addons.createFragment; 16 | } 17 | -------------------------------------------------------------------------------- /examples/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "createreactapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "flow-bin": "^0.33.0", 7 | "react-scripts": "0.7.0", 8 | "react-test-renderer": "^15.3.2" 9 | }, 10 | "dependencies": { 11 | "apollo-client": "^0.6.0", 12 | "graphql-tag": "^0.1.15", 13 | "react": "^15.3.2", 14 | "react-dom": "^15.3.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom --coverage=true", 20 | "eject": "react-scripts eject", 21 | "flow": "flow; test $? -eq 0 -o $? -eq 2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # don't commit compiled files 30 | lib 31 | test-lib 32 | dist 33 | -------------------------------------------------------------------------------- /examples/react-native/index.ios.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import ApolloClient, { createNetworkInterface } from 'apollo-client'; 4 | import { ApolloProvider } from 'react-apollo'; 5 | import { AppRegistry } from 'react-native'; 6 | 7 | import Pokemon from './Pokemon'; 8 | 9 | export const networkInterface = createNetworkInterface({ uri: 'https://graphql-pokemon.now.sh/' }); 10 | export const client = new ApolloClient({ networkInterface }); 11 | 12 | class App extends Component { 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | AppRegistry.registerComponent('reactnative', () => App); 23 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "editor.tabSize": 2, 4 | "editor.rulers": [100], 5 | "files.trimTrailingWhitespace": true, 6 | "files.insertFinalNewline": true, 7 | "files.exclude": { 8 | "**/.git": true, 9 | "**/.DS_Store": true, 10 | "node_modules": false, 11 | "test-lib": true, 12 | "lib": false, 13 | ".gitignore": true, 14 | ".npmignore": true, 15 | ".travis.*": false, 16 | "appveyor.yml": true, 17 | "LICENSE": true, 18 | "typings.d.ts": false, 19 | "tsconfig.json": false, 20 | "tslint.json": true, 21 | "coverage": true 22 | } 23 | , 24 | "typescript.tsdk": "./node_modules/typescript/lib" 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "lib": ["es6", "dom"], 6 | "moduleResolution": "node", 7 | "sourceMap": true, 8 | "declaration": true, 9 | "noImplicitAny": false, 10 | "rootDir": "src", 11 | "outDir": "lib", 12 | "allowSyntheticDefaultImports": true, 13 | "experimentalDecorators": true, 14 | "pretty": true, 15 | "removeComments": true, 16 | "jsx": "react", 17 | "skipLibCheck": true 18 | }, 19 | "include": [ 20 | "./typings.d.ts", 21 | "./src/index.ts", 22 | "./src/server.ts", 23 | "./src/test-utils.tsx" 24 | ], 25 | "exclude": [ 26 | "node_modules", 27 | "dist", 28 | "lib" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /preprocessor.js: -------------------------------------------------------------------------------- 1 | // Copyright 2004-present Facebook. All Rights Reserved. 2 | 3 | const tsc = require('typescript'); 4 | const babelJest = require('babel-jest'); 5 | const babelTransform = babelJest.createTransformer(); 6 | 7 | module.exports = { 8 | process(src, path) { 9 | if (path.endsWith('.ts') || path.endsWith('.tsx')) { 10 | return tsc.transpile( 11 | src, 12 | { 13 | module: tsc.ModuleKind.CommonJS, 14 | jsx: tsc.JsxEmit.React, 15 | target: tsc.ScriptTarget.ES5 16 | }, 17 | path, 18 | [] 19 | ); 20 | } 21 | if (path.endsWith('.js') || path.endsWith('.jsx')) { 22 | return babelTransform.process(src, path); 23 | } 24 | return src; 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /examples/meteor/imports/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ApolloClient, { createNetworkInterface } from 'apollo-client'; 3 | import { ApolloProvider } from 'react-apollo'; // XXX figure out local dev 4 | 5 | import Pokemon from "./Pokemon"; 6 | 7 | export const networkInterface = createNetworkInterface({ uri: 'https://graphql-pokemon.now.sh/' }); 8 | export const client = new ApolloClient({ 9 | networkInterface, 10 | initialState: typeof window !== "undefined" && window.__APOLLO_STATE__ 11 | }); 12 | 13 | class App extends Component { 14 | render() { 15 | return ( 16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /examples/react-native/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-pure-render-mixin.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-pure-render-mixin) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | interface PureRenderMixin extends Mixin {} 10 | 11 | namespace __Addons { 12 | export var PureRenderMixin: PureRenderMixin; 13 | } 14 | } 15 | 16 | declare module "react-addons-pure-render-mixin" { 17 | var PureRenderMixin: __React.PureRenderMixin; 18 | type PureRenderMixin = __React.PureRenderMixin; 19 | export = PureRenderMixin; 20 | } 21 | -------------------------------------------------------------------------------- /examples/react-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactnative", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "apollo-client": "^0.5.0", 11 | "graphql-tag": "^0.1.15", 12 | "jest": "^16.1.0-alpha.691b0e22", 13 | "jest-react-native": "^16.1.0-alpha.691b0e22", 14 | "react": "15.3.2", 15 | "react-apollo": "^0.5.14", 16 | "react-native": "0.36.0" 17 | }, 18 | "jest": { 19 | "preset": "jest-react-native" 20 | }, 21 | "devDependencies": { 22 | "babel-jest": "16.0.0", 23 | "babel-preset-react-native": "1.9.0", 24 | "jest": "16.0.2", 25 | "jest-react-native": "16.0.0", 26 | "react-test-renderer": "15.3.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | TODO: 9 | 10 | - [ ] If this PR is a new feature, reference an issue where a consensus about the design was reached (not necessary for small changes) 11 | - [ ] Make sure all of the significant new logic is covered by tests 12 | - [ ] Rebase your changes on master so that they can be merged easily 13 | - [ ] Make sure all tests and linter rules pass 14 | - [ ] Update CHANGELOG.md with your change 15 | - [ ] If this was a change that affects the external API, update the docs and post a link to the PR in the discussion 16 | - [ ] If this was a change that affects GitHunt-React, update GitHunt-React and post a link to the PR in the discussion 17 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnativeTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base@1.0.4 # Packages every Meteor app needs to have 8 | mobile-experience@1.0.4 # Packages for a great mobile UX 9 | mongo@1.1.14 # The database Meteor supports right now 10 | 11 | standard-minifier-css@1.3.2 # CSS minifier run for production mode 12 | standard-minifier-js@1.2.1 # JS minifier run for production mode 13 | es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers. 14 | ecmascript@0.5.9 # Enable ECMAScript2015+ syntax in app code 15 | shell-server@0.2.1 # Server-side component of the `meteor shell` command 16 | static-html 17 | -------------------------------------------------------------------------------- /test/flow.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | This file is used to validate the flow typings for react-apollo. 4 | Currently it just serves as a smoke test around used imports and 5 | common usage patterns. 6 | 7 | Ideally this should include tests for all of the functionality of 8 | react-apollo 9 | 10 | */ 11 | 12 | // @flow 13 | import { graphql } from "react-apollo"; 14 | import type { OperationComponent } from "react-apollo"; 15 | import type { DocumentNode } from "graphql"; 16 | import gql from "graphql-tag"; 17 | 18 | const query: DocumentNode = gql`{ foo }`; 19 | const mutation: DocumentNode = gql`mutation { foo }`; 20 | 21 | type IQuery = { 22 | foo: string, 23 | }; 24 | 25 | // common errors 26 | 27 | const withData: OperationComponent = graphql(query); 28 | 29 | const ComponentWithData = withData(({ data: { foo }}) => { 30 | // $ExpectError 31 | if (foo > 1) return ; 32 | 33 | return null; 34 | }); 35 | -------------------------------------------------------------------------------- /examples/react-native/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-transition-group.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-transition-group) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | 10 | interface TransitionGroupProps { 11 | component?: ReactType; 12 | childFactory?: (child: ReactElement) => ReactElement; 13 | } 14 | 15 | type TransitionGroup = ComponentClass; 16 | 17 | namespace __Addons { 18 | export var TransitionGroup: __React.TransitionGroup; 19 | } 20 | } 21 | 22 | declare module "react-addons-transition-group" { 23 | var TransitionGroup: __React.TransitionGroup; 24 | type TransitionGroup = __React.TransitionGroup; 25 | export = TransitionGroup; 26 | } 27 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-global.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (namespace) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | /// 15 | /// 16 | 17 | import React = __React; 18 | import ReactDOM = __React.__DOM; 19 | 20 | declare namespace __React { 21 | export import addons = __React.__Addons; 22 | } 23 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/java/com/reactnative/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.reactnative; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/statics.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import gql from 'graphql-tag'; 4 | 5 | import graphql from '../../../../src/graphql'; 6 | 7 | let sampleOperation = gql`{ user { name } }`; 8 | 9 | describe('statics', () => { 10 | it('should be preserved', () => { 11 | @graphql(sampleOperation) 12 | class ApolloContainer extends React.Component { 13 | static veryStatic = 'such global'; 14 | }; 15 | 16 | expect(ApolloContainer.veryStatic).toBe('such global'); 17 | }); 18 | 19 | it('exposes a debuggable displayName', () => { 20 | @graphql(sampleOperation) 21 | class ApolloContainer extends React.Component {} 22 | 23 | expect((ApolloContainer as any).displayName).toBe('Apollo(ApolloContainer)'); 24 | }); 25 | 26 | it('honors custom display names', () => { 27 | @graphql(sampleOperation) 28 | class ApolloContainer extends React.Component { 29 | static displayName = 'Foo'; 30 | } 31 | 32 | expect((ApolloContainer as any).displayName).toBe('Apollo(Foo)'); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ben Newman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-linked-state-mixin.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-linked-state-mixin) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | interface ReactLink { 10 | value: T; 11 | requestChange(newValue: T): void; 12 | } 13 | 14 | interface LinkedStateMixin extends Mixin { 15 | linkState(key: string): ReactLink; 16 | } 17 | 18 | interface HTMLAttributes { 19 | checkedLink?: ReactLink; 20 | valueLink?: ReactLink; 21 | } 22 | 23 | namespace __Addons { 24 | export var LinkedStateMixin: LinkedStateMixin; 25 | } 26 | } 27 | 28 | declare module "react-addons-linked-state-mixin" { 29 | var LinkedStateMixin: __React.LinkedStateMixin; 30 | type LinkedStateMixin = __React.LinkedStateMixin; 31 | export = LinkedStateMixin; 32 | } 33 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-update.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-update) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | interface UpdateSpecCommand { 10 | $set?: any; 11 | $merge?: {}; 12 | $apply?(value: any): any; 13 | } 14 | 15 | interface UpdateSpecPath { 16 | [key: string]: UpdateSpec; 17 | } 18 | 19 | type UpdateSpec = UpdateSpecCommand | UpdateSpecPath; 20 | 21 | interface UpdateArraySpec extends UpdateSpecCommand { 22 | $push?: any[]; 23 | $unshift?: any[]; 24 | $splice?: any[][]; 25 | } 26 | 27 | namespace __Addons { 28 | export function update(value: any[], spec: UpdateArraySpec): any[]; 29 | export function update(value: {}, spec: UpdateSpec): any; 30 | } 31 | } 32 | 33 | declare module "react-addons-update" { 34 | export = __React.__Addons.update; 35 | } 36 | -------------------------------------------------------------------------------- /examples/create-react-app/src/Pokemon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import gql from 'graphql-tag'; 3 | import { graphql } from '../../../'; 4 | 5 | // The data prop, which is provided by the wrapper below contains, 6 | // a `loading` key while the query is in flight and posts when it is ready 7 | export const Pokemon = ({ data: { loading, pokemon, error } }) => { 8 | if (loading) return
Loading
; 9 | if (error) return

ERROR

; 10 | return ( 11 |
12 | {pokemon && ( 13 |
14 |

{pokemon.name}

15 | {pokemon.name} 16 |
17 | )} 18 |
19 | ); 20 | } 21 | 22 | export const POKEMON_QUERY = gql` 23 | query GetPokemon($name: String!) { 24 | pokemon(name: $name) { 25 | name 26 | image 27 | } 28 | } 29 | `; 30 | 31 | // The `graphql` wrapper executes a GraphQL query and makes the results 32 | // available on the `data` prop of the wrapped component (Pokemon here) 33 | export const withPokemon = graphql(POKEMON_QUERY, { options: { 34 | variables: { name: "charmander" }, 35 | }}); 36 | 37 | export default withPokemon(Pokemon); 38 | -------------------------------------------------------------------------------- /examples/meteor/imports/Pokemon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import gql from 'graphql-tag'; 3 | import { graphql } from 'react-apollo'; // XXX figure out local dev 4 | 5 | // The data prop, which is provided by the wrapper below contains, 6 | // a `loading` key while the query is in flight and posts when it is ready 7 | export const Pokemon = ({ data: { loading, pokemon, error } }) => { 8 | if (loading) return
Loading
; 9 | if (error) return

ERROR

; 10 | return ( 11 |
12 | {pokemon && ( 13 |
14 |

{pokemon.name}

15 | {pokemon.name} 16 |
17 | )} 18 |
19 | ); 20 | } 21 | 22 | export const POKEMON_QUERY = gql` 23 | query GetPokemon($name: String!) { 24 | pokemon(name: $name) { 25 | name 26 | image 27 | } 28 | } 29 | `; 30 | 31 | // The `graphql` wrapper executes a GraphQL query and makes the results 32 | // available on the `data` prop of the wrapped component (Pokemon here) 33 | export const withPokemon = graphql(POKEMON_QUERY, { options: { 34 | variables: { name: "charmander" }, 35 | }}); 36 | 37 | export default withPokemon(Pokemon); 38 | -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | LODASH 3 | */ 4 | declare module 'lodash.isobject' { 5 | import main = require('lodash/isObject'); 6 | export = main; 7 | } 8 | 9 | declare module 'lodash.isequal' { 10 | import main = require('lodash/isEqual'); 11 | export = main; 12 | } 13 | 14 | declare module 'lodash.flatten' { 15 | import main = require('lodash/flatten'); 16 | export = main; 17 | } 18 | 19 | declare module 'lodash.pick' { 20 | import main = require('lodash/pick'); 21 | export = main; 22 | } 23 | 24 | declare module 'hoist-non-react-statics' { 25 | /** 26 | * Copies any static properties present on `source` to `target`, excluding those that are specific 27 | * to React. 28 | * 29 | * Returns the target component. 30 | */ 31 | function hoistNonReactStatics(targetComponent: any, sourceComponent: any, customStatics: {[name: string]: boolean}): any; 32 | namespace hoistNonReactStatics {} 33 | export = hoistNonReactStatics; 34 | } 35 | 36 | declare module 'redux-loop' { 37 | function combineReducers(reducers: any, state?: any, get?: any, set?: any): any; 38 | function install(): any; 39 | } 40 | 41 | declare module 'react-test-renderer' { 42 | function create(elements: any): any; 43 | } 44 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/meteor/.meteor/versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.0.5 2 | autoupdate@1.2.11 3 | babel-compiler@6.13.0 4 | babel-runtime@0.1.12 5 | base64@1.0.10 6 | binary-heap@1.0.10 7 | blaze@2.1.9 8 | blaze-tools@1.0.10 9 | boilerplate-generator@1.0.11 10 | caching-compiler@1.1.8 11 | caching-html-compiler@1.0.7 12 | callback-hook@1.0.10 13 | check@1.2.4 14 | ddp@1.2.5 15 | ddp-client@1.2.9 16 | ddp-common@1.2.7 17 | ddp-server@1.2.10 18 | deps@1.0.12 19 | diff-sequence@1.0.7 20 | ecmascript@0.5.9 21 | ecmascript-runtime@0.3.15 22 | ejson@1.0.13 23 | es5-shim@4.6.15 24 | fastclick@1.0.13 25 | geojson-utils@1.0.10 26 | hot-code-push@1.0.4 27 | html-tools@1.0.11 28 | htmljs@1.0.11 29 | http@1.1.8 30 | id-map@1.0.9 31 | jquery@1.11.10 32 | launch-screen@1.0.12 33 | livedata@1.0.18 34 | logging@1.1.16 35 | meteor@1.6.0 36 | meteor-base@1.0.4 37 | minifier-css@1.2.15 38 | minifier-js@1.2.15 39 | minimongo@1.0.18 40 | mobile-experience@1.0.4 41 | mobile-status-bar@1.0.13 42 | modules@0.7.7 43 | modules-runtime@0.7.7 44 | mongo@1.1.14 45 | mongo-id@1.0.6 46 | npm-mongo@2.2.11_2 47 | observe-sequence@1.0.14 48 | ordered-dict@1.0.9 49 | promise@0.8.8 50 | random@1.0.10 51 | reactive-var@1.0.11 52 | reload@1.1.11 53 | retry@1.0.9 54 | routepolicy@1.0.12 55 | shell-server@0.2.1 56 | spacebars@1.0.13 57 | spacebars-compiler@1.0.13 58 | standard-minifier-css@1.3.2 59 | standard-minifier-js@1.2.1 60 | static-html@1.1.13 61 | templating-tools@1.0.5 62 | tracker@1.1.1 63 | ui@1.0.12 64 | underscore@1.0.10 65 | url@1.0.11 66 | webapp@1.3.12 67 | webapp-hashing@1.0.9 68 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"reactnative" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-css-transition-group.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-css-transition-group) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | /// 8 | 9 | declare namespace __React { 10 | interface CSSTransitionGroupTransitionName { 11 | enter: string; 12 | enterActive?: string; 13 | leave: string; 14 | leaveActive?: string; 15 | appear?: string; 16 | appearActive?: string; 17 | } 18 | 19 | interface CSSTransitionGroupProps extends TransitionGroupProps { 20 | transitionName: string | CSSTransitionGroupTransitionName; 21 | transitionAppear?: boolean; 22 | transitionAppearTimeout?: number; 23 | transitionEnter?: boolean; 24 | transitionEnterTimeout?: number; 25 | transitionLeave?: boolean; 26 | transitionLeaveTimeout?: number; 27 | } 28 | 29 | type CSSTransitionGroup = ComponentClass; 30 | 31 | namespace __Addons { 32 | export var CSSTransitionGroup: __React.CSSTransitionGroup; 33 | } 34 | } 35 | 36 | declare module "react-addons-css-transition-group" { 37 | var CSSTransitionGroup: __React.CSSTransitionGroup; 38 | type CSSTransitionGroup = __React.CSSTransitionGroup; 39 | export = CSSTransitionGroup; 40 | } 41 | -------------------------------------------------------------------------------- /scripts/filesize.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 'use strict'; 3 | 4 | var Flags = require('minimist')(process.argv.slice(2)), 5 | Fs = require('fs'), 6 | Path = require('path'), 7 | PrettyBytes = require('pretty-bytes'), 8 | Colors = require('colors'); 9 | 10 | if (!Flags.file) { 11 | process.exit(1); 12 | } 13 | 14 | let totalSize = 0, 15 | totalGzippedSize = 0, 16 | filePath = Path.resolve(process.cwd(), Flags.file); 17 | 18 | var rawSize = Fs.statSync(filePath).size; 19 | totalSize = PrettyBytes(rawSize); 20 | var rawGzippedSize = Fs.statSync(`${filePath}.gz`).size; 21 | totalGzippedSize = PrettyBytes(rawGzippedSize); 22 | 23 | console.log('\n'); 24 | console.log('=============================== FileSize summary ==============================='); 25 | console.log(`The total size of ${Path.basename(filePath)} is ${Colors.green(totalSize)}.`); 26 | console.log(`The total gzipped size of ${Path.basename(filePath)} is ${Colors.green(totalGzippedSize)}.`); 27 | console.log('================================================================================'); 28 | console.log('\n'); 29 | 30 | if (Flags.max) { 31 | var max = Number(Flags.max) * 1000; // kb to bytes 32 | if (max > totalSize) { 33 | process.exitCode = 1; 34 | console.log(Colors.red(`The total size of ${Path.basename(filePath)} exceeds ${PrettyBytes(max)}.`)); 35 | } 36 | } 37 | 38 | if (Flags.maxGzip) { 39 | var maxGzip = Number(Flags.maxGzip) * 1000; // kb to bytes 40 | if (rawGzippedSize > maxGzip) { 41 | process.exitCode = 1; 42 | console.log(Colors.red(`The total gzipped size of ${Path.basename(filePath)} exceeds ${PrettyBytes(maxGzip)}.`)); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/react-native/Pokemon.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import { 4 | StyleSheet, 5 | Text, 6 | View, 7 | Image 8 | } from 'react-native'; 9 | 10 | import gql from 'graphql-tag'; 11 | import { graphql } from 'react-apollo'; 12 | 13 | 14 | const styles = StyleSheet.create({ 15 | container: { 16 | flex: 1, 17 | justifyContent: 'center', 18 | alignItems: 'center', 19 | }, 20 | welcome: { 21 | fontSize: 20, 22 | textAlign: 'center', 23 | margin: 10, 24 | }, 25 | }); 26 | 27 | // The data prop, which is provided by the wrapper below contains, 28 | // a `loading` key while the query is in flight and posts when it is ready 29 | export const Pokemon = ({ data: { loading, pokemon, error } }) => { 30 | if (loading) { 31 | return Loading; 32 | } 33 | return ( 34 | 35 | {pokemon && ( 36 | 37 | {pokemon.name} 38 | 39 | 40 | )} 41 | 42 | ); 43 | } 44 | 45 | export const POKEMON_QUERY = gql` 46 | query GetPokemon($name: String!) { 47 | pokemon(name: $name) { 48 | name 49 | image 50 | } 51 | } 52 | `; 53 | 54 | // The `graphql` wrapper executes a GraphQL query and makes the results 55 | // available on the `data` prop of the wrapped component (Pokemon here) 56 | export const withPokemon = graphql(POKEMON_QUERY, { options: { 57 | variables: { name: "charmander" }, 58 | }}); 59 | 60 | export default withPokemon(Pokemon); 61 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-perf.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-perf) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | interface ComponentPerfContext { 10 | current: string; 11 | owner: string; 12 | } 13 | 14 | interface NumericPerfContext { 15 | [key: string]: number; 16 | } 17 | 18 | interface Measurements { 19 | exclusive: NumericPerfContext; 20 | inclusive: NumericPerfContext; 21 | render: NumericPerfContext; 22 | counts: NumericPerfContext; 23 | writes: NumericPerfContext; 24 | displayNames: { 25 | [key: string]: ComponentPerfContext; 26 | }; 27 | totalTime: number; 28 | } 29 | 30 | namespace __Addons { 31 | namespace Perf { 32 | export function start(): void; 33 | export function stop(): void; 34 | export function printInclusive(measurements: Measurements[]): void; 35 | export function printExclusive(measurements: Measurements[]): void; 36 | export function printWasted(measurements: Measurements[]): void; 37 | export function printDOM(measurements: Measurements[]): void; 38 | export function getLastMeasurements(): Measurements[]; 39 | } 40 | } 41 | } 42 | 43 | declare module "react-addons-perf" { 44 | import Perf = __React.__Addons.Perf; 45 | export = Perf; 46 | } 47 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | cache: 5 | directories: 6 | - $HOME/.npm 7 | - $HOME/.yarn-cache 8 | - node_modules 9 | 10 | before_install: 11 | - npm install -g npm@^3 --cache-min 999999999 12 | - npm install -g coveralls --cache-min 999999999 13 | - time npm i -g yarn --cache-min 999999999 14 | 15 | install: 16 | - npm install 17 | - cd examples/create-react-app && yarn && cd ../../ 18 | 19 | script: 20 | - npm test 21 | - coveralls < ./coverage/lcov.info || true # ignore coveralls error 22 | - npm run compile 23 | - npm run bundle 24 | - cd examples/create-react-app && npm test && cd ../../ 25 | - npm run filesize 26 | - python node_modules/travis-weigh-in/weigh_in.py ./dist/index.min.js.gz || true # ignore size errors 27 | 28 | # Allow Travis tests to run in containers. 29 | sudo: false 30 | 31 | deploy: 32 | provider: npm 33 | email: james.baxley@newspring.cc 34 | api_key: 35 | secure: jctKs4JKowu1fYaqy2ALIBQAq+yRGVxdDlQGG5rlItmPKLd2mMHZ8Cz/+bew0Y8E9jTCExxGP0tX7HN32RoDWFID7sZspPhEiuh6QKVtyxVoiEyLGiH1qCFYJsD/H8Ms7xVjnNgbqTwj+CiJyPsLjXRahLNn1cAE6E6As9S2QVKc/1O9cLesqRdilZoKcLxSu8ppwxoqvLyOilgg0iiPMepp90B2suLmXht2CPFhDqbWhF8s8IblNB8m6xBLHkH3nrTPTISWjZqSHjKz6rmknrwI9LJQHVXkrB7xEpvIkzTbQWajTdDPkGS6EyZyltIFoEICG9Yecski0wuxRXU64dsrSPcB4vEvJv8qq5LckvqHjT84JTWfKDZl3LjlRJY7Oig5Z93YlnV89W1sMJMQOKzt7XMEMHyER1ja/ZY6SbPfJxer2JIy0MNo1CDNLMDBS1OcmCvw6joZwSBm3sJd9Fe9g898K5UIiY/jRnh6CqG0U9BzY9L2wjtrB3biSF4iIaMZvFF/pwS8JI7MZOdo0bwTJIRqhqDcLpF7nS3+ph0rytemjMhEP4IgVCqXyiBiAAMXtN7D3RWe7E+I4dBvK1Cgdjgp2bNJTcAaBdLsFCiBSkKH0JYAV7mj6nt77EpqEgoyJD+32gSDomzUq2Nxo4USxwiHq5F4vBbX99+XJuw= 36 | on: 37 | tags: true 38 | node: '4' 39 | repo: apollographql/react-apollo 40 | branch: master 41 | -------------------------------------------------------------------------------- /src/ApolloProvider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as PropTypes from 'prop-types'; 3 | import { Component } from 'react'; 4 | 5 | import { Store } from 'redux'; 6 | 7 | import ApolloClient, { ApolloStore } from 'apollo-client'; 8 | 9 | const invariant = require('invariant'); 10 | 11 | export declare interface ProviderProps { 12 | store?: Store; 13 | client: ApolloClient; 14 | } 15 | 16 | export default class ApolloProvider extends Component { 17 | static propTypes = { 18 | store: PropTypes.shape({ 19 | subscribe: PropTypes.func.isRequired, 20 | dispatch: PropTypes.func.isRequired, 21 | getState: PropTypes.func.isRequired, 22 | }), 23 | client: PropTypes.object.isRequired, 24 | children: PropTypes.element.isRequired, 25 | }; 26 | 27 | static childContextTypes = { 28 | store: PropTypes.object, 29 | client: PropTypes.object.isRequired, 30 | }; 31 | 32 | static contextTypes = { 33 | store: PropTypes.object, 34 | }; 35 | 36 | constructor(props, context) { 37 | super(props, context); 38 | 39 | invariant( 40 | props.client, 41 | 'ApolloClient was not passed a client instance. Make ' + 42 | 'sure you pass in your client via the "client" prop.', 43 | ); 44 | 45 | if (!props.store) { 46 | props.client.initStore(); 47 | } 48 | } 49 | 50 | componentWillReceiveProps(nextProps) { 51 | if (nextProps.client !== this.props.client && !nextProps.store) { 52 | nextProps.client.initStore(); 53 | } 54 | } 55 | 56 | getChildContext() { 57 | return { 58 | store: this.props.store || this.context.store, 59 | client: this.props.client, 60 | }; 61 | } 62 | 63 | render() { 64 | return React.Children.only(this.props.children); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /examples/react-native/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.reactnative', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.reactnative', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /test/shallowEqual.test.ts: -------------------------------------------------------------------------------- 1 | // https://github.com/reactjs/react-redux/blob/master/test/utils/shallowEqual.spec.js 2 | 3 | import shallowEqual from '../src/shallowEqual'; 4 | 5 | it('should return true if input is the same', () => { 6 | expect(shallowEqual('foo', 'foo')).toBe(true); 7 | }); 8 | 9 | it('should return true if arguments fields are equal', () => { 10 | expect( 11 | shallowEqual( 12 | { a: 1, b: 2, c: undefined }, 13 | { a: 1, b: 2, c: undefined }, 14 | ), 15 | ).toBe(true); 16 | 17 | expect( 18 | shallowEqual( 19 | { a: 1, b: 2, c: 3 }, 20 | { a: 1, b: 2, c: 3 }, 21 | ), 22 | ).toBe(true); 23 | 24 | const o = {}; 25 | expect( 26 | shallowEqual( 27 | { a: 1, b: 2, c: o }, 28 | { a: 1, b: 2, c: o }, 29 | ), 30 | ).toBe(true); 31 | 32 | const d = () => 1; 33 | expect( 34 | shallowEqual( 35 | { a: 1, b: 2, c: o, d }, 36 | { a: 1, b: 2, c: o, d }, 37 | ), 38 | ).toBe(true); 39 | }); 40 | 41 | it('should return false if arguments fields are different function identities', () => { 42 | expect( 43 | shallowEqual( 44 | { a: 1, b: 2, d: () => 1 }, 45 | { a: 1, b: 2, d: () => 1 }, 46 | ), 47 | ).toBe(false); 48 | }); 49 | 50 | it('should return false if first argument has too many keys', () => { 51 | expect( 52 | shallowEqual( 53 | { a: 1, b: 2, c: 3 }, 54 | { a: 1, b: 2 }, 55 | ), 56 | ).toBe(false); 57 | }); 58 | 59 | it('should return false if second argument has too many keys', () => { 60 | expect( 61 | shallowEqual( 62 | { a: 1, b: 2 }, 63 | { a: 1, b: 2, c: 3 }, 64 | ), 65 | ).toBe(false); 66 | }); 67 | 68 | it('should return false if arguments have different keys', () => { 69 | expect( 70 | shallowEqual( 71 | { a: 1, b: 2, c: undefined }, 72 | { a: 1, bb: 2, c: undefined }, 73 | ), 74 | ).toBe(false); 75 | }); 76 | -------------------------------------------------------------------------------- /examples/react-native/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*[.]android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | 21 | # Ignore duplicate module providers 22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 23 | .*/Libraries/react-native/React.js 24 | .*/Libraries/react-native/ReactNative.js 25 | .*/node_modules/jest-runtime/build/__tests__/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | node_modules/react-native/flow 32 | flow/ 33 | 34 | [options] 35 | module.system=haste 36 | 37 | esproposal.class_static_fields=enable 38 | esproposal.class_instance_fields=enable 39 | 40 | experimental.strict_type_args=true 41 | 42 | munge_underscores=true 43 | 44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 45 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 46 | 47 | suppress_type=$FlowIssue 48 | suppress_type=$FlowFixMe 49 | suppress_type=$FixMe 50 | 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 54 | 55 | unsafe.enable_getters_and_setters=true 56 | 57 | [version] 58 | ^0.33.0 59 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnativeTests/reactnativeTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface reactnativeTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation reactnativeTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /test/react-native/component.test.js: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet, 3 | Text, 4 | View 5 | } from 'react-native'; 6 | import React, { Component } from 'react'; 7 | 8 | // import { mount, shallow } from 'enzyme'; 9 | 10 | // Note: test renderer must be required after react-native. 11 | import renderer from 'react-test-renderer'; 12 | 13 | import ApolloClient from 'apollo-client'; 14 | import gql from 'graphql-tag'; 15 | import { ApolloProvider, graphql } from '../../src'; 16 | import { mockNetworkInterface } from '../../src/test-utils'; 17 | 18 | describe('App', () => { 19 | 20 | it('renders correctly', () => { 21 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 22 | const data = { allPeople: { people: { name: 'Luke Skywalker' } } }; 23 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 24 | const client = new ApolloClient({ networkInterface, addTypename: false }); 25 | 26 | const ContainerWithData = graphql(query)(({ data }) => { 27 | if (data.loading) return Loading...; 28 | return {data.allPeople.people.name}; 29 | }); 30 | const output = renderer.create( 31 | 32 | ) 33 | expect(output.toJSON()).toMatchSnapshot(); 34 | }); 35 | 36 | it('executes a query', (done) => { 37 | jest.useRealTimers() 38 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 39 | const data = { allPeople: { people: { name: 'Luke Skywalker' } } }; 40 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 41 | const client = new ApolloClient({ networkInterface, addTypename: false }); 42 | 43 | class Container extends Component { 44 | componentWillReceiveProps(props) { 45 | expect(props.data.loading).toBeFalsy(); 46 | expect(props.data.allPeople.people.name).toEqual(data.allPeople.people.name); 47 | done(); 48 | } 49 | render() { 50 | if (this.props.data.loading) return Loading...; 51 | return {this.props.data.allPeople.people.name}; 52 | } 53 | }; 54 | 55 | const ContainerWithData = graphql(query)(Container); 56 | 57 | const output = renderer.create( 58 | 59 | ) 60 | }); 61 | 62 | }); 63 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/fragments.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import * as renderer from 'react-test-renderer'; 4 | import gql from 'graphql-tag'; 5 | 6 | import ApolloClient, { createFragment } from 'apollo-client'; 7 | 8 | declare function require(name: string); 9 | 10 | import { mockNetworkInterface } from '../../../../src/test-utils'; 11 | 12 | import { ApolloProvider, graphql } from '../../../../src'; 13 | 14 | describe('fragments', () => { 15 | 16 | // XXX in a later version, we should support this for composition 17 | it('throws if you only pass a fragment', () => { 18 | const query = gql` 19 | fragment Failure on PeopleConnection { people { name } } 20 | `; 21 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 22 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 23 | const client = new ApolloClient({ networkInterface, addTypename: false }); 24 | 25 | try { 26 | @graphql(query) 27 | class Container extends React.Component { 28 | componentWillReceiveProps(props) { 29 | expect(props.data.loading).toBe(false); 30 | expect(props.data.allPeople).toEqual(data.allPeople); 31 | done(); 32 | } 33 | render() { 34 | return null; 35 | } 36 | }; 37 | 38 | renderer.create(); 39 | throw new Error(); 40 | } catch (e) { 41 | expect(e.name).toMatch(/Invariant Violation/); 42 | } 43 | }); 44 | 45 | it('correctly fetches a query with inline fragments', (done) => { 46 | const query = gql` 47 | query people { allPeople(first: 1) { __typename ...person } } 48 | fragment person on PeopleConnection { people { name } } 49 | `; 50 | const data = { allPeople: { 51 | __typename: 'PeopleConnection', people: [ { name: 'Luke Skywalker' } ] } }; 52 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 53 | const client = new ApolloClient({ networkInterface, addTypename: false }); 54 | 55 | @graphql(query) 56 | class Container extends React.Component { 57 | componentWillReceiveProps(props) { 58 | expect(props.data.loading).toBe(false); 59 | expect(props.data.allPeople).toEqual(data.allPeople); 60 | done(); 61 | } 62 | render() { 63 | return null; 64 | } 65 | }; 66 | 67 | renderer.create(); 68 | }); 69 | }); 70 | -------------------------------------------------------------------------------- /src/withApollo.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | createElement, 4 | ComponentClass, 5 | StatelessComponent, 6 | } from 'react'; 7 | import * as PropTypes from 'prop-types'; 8 | 9 | const invariant = require('invariant'); 10 | const assign = require('object-assign'); 11 | 12 | const hoistNonReactStatics = require('hoist-non-react-statics'); 13 | 14 | import ApolloClient, { 15 | ObservableQuery, 16 | MutationQueryReducersMap, 17 | Subscription, 18 | ApolloStore, 19 | ApolloQueryResult, 20 | ApolloError, 21 | FetchPolicy, 22 | FetchMoreOptions, 23 | UpdateQueryOptions, 24 | FetchMoreQueryOptions, 25 | SubscribeToMoreOptions, 26 | } from 'apollo-client'; 27 | 28 | import { 29 | // GraphQLResult, 30 | DocumentNode, 31 | } from 'graphql'; 32 | 33 | import { parser, DocumentType } from './parser'; 34 | import { 35 | OperationOption, 36 | } from './graphql'; 37 | 38 | function getDisplayName(WrappedComponent) { 39 | return WrappedComponent.displayName || WrappedComponent.name || 'Component'; 40 | } 41 | 42 | export function withApollo( 43 | WrappedComponent, 44 | operationOptions: OperationOption = {}, 45 | ) { 46 | 47 | const withDisplayName = `withApollo(${getDisplayName(WrappedComponent)})`; 48 | 49 | class WithApollo extends Component { 50 | static displayName = withDisplayName; 51 | static WrappedComponent = WrappedComponent; 52 | static contextTypes = { client: PropTypes.object.isRequired }; 53 | 54 | // data storage 55 | private client: ApolloClient; // apollo client 56 | 57 | constructor(props, context) { 58 | super(props, context); 59 | this.client = context.client; 60 | 61 | invariant(!!this.client, 62 | `Could not find "client" in the context of ` + 63 | `"${withDisplayName}". ` + 64 | `Wrap the root component in an `, 65 | ); 66 | 67 | } 68 | 69 | getWrappedInstance() { 70 | invariant(operationOptions.withRef, 71 | `To access the wrapped instance, you need to specify ` + 72 | `{ withRef: true } in the options`, 73 | ); 74 | 75 | return (this.refs as any).wrappedInstance; 76 | } 77 | 78 | render() { 79 | const props = assign({}, this.props); 80 | props.client = this.client; 81 | if (operationOptions.withRef) props.ref = 'wrappedInstance'; 82 | return createElement(WrappedComponent, props); 83 | } 84 | } 85 | 86 | // Make sure we preserve any custom statics on the original component. 87 | return hoistNonReactStatics(WithApollo, WrappedComponent, {}); 88 | } 89 | 90 | -------------------------------------------------------------------------------- /examples/meteor/server/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import ReactDOMServer from 'react-dom/server' 4 | import { renderToStringWithData } from 'react-apollo/server'; 5 | import { WebApp } from 'meteor/webapp'; 6 | import Cheerio from "cheerio/lib/cheerio"; 7 | import ApolloClient from 'apollo-client'; 8 | import fetch from "node-fetch"; 9 | import App, { networkInterface } from '/imports/App'; 10 | 11 | global.fetch = fetch; 12 | 13 | function isAppUrl({ url }) { 14 | if (url === "/favicon.ico" || url === "/robots.txt") return false; 15 | if (url === "/app.manifest") return false; 16 | return true; 17 | } 18 | 19 | // Thank you FlowRouter for this wonderful idea :) 20 | // https://github.com/kadirahq/flow-router/blob/ssr/server/route.js 21 | function moveScripts(data) { 22 | const $ = Cheerio.load(data, { decodeEntities: false }); 23 | const heads = $("head script").not("[data-ssr-ignore=\"true\"]"); 24 | const bodies = $("body script").not("[data-ssr-ignore=\"true\"]"); 25 | $("body").append([...heads, ...bodies]); 26 | 27 | // Remove empty lines caused by removing scripts 28 | $("head").html($("head").html().replace(/(^[ \t]*\n)/gm, "")); 29 | $("body").html($("body").html().replace(/(^[ \t]*\n)/gm, "")); 30 | return $.html(); 31 | } 32 | 33 | function moveStyles(data) { 34 | const $ = Cheerio.load(data, { decodeEntities: false }); 35 | const styles = $("head link[type=\"text/css\"]").not("[data-ssr-ignore=\"true\"]"); 36 | $("head").append(styles); 37 | 38 | // Remove empty lines caused by removing scripts 39 | $("head").html($("head").html().replace(/(^[ \t]*\n)/gm, "")); 40 | return $.html(); 41 | } 42 | 43 | 44 | function patchResWrite(originalWrite, { markup, initialState }) { 45 | return function patch(data) { 46 | if (typeof data === "string" && data.indexOf("") === 0) { 47 | data = data.replace("", ` 48 | 51 | 52 | `) 53 | data = moveStyles(data); 54 | data = moveScripts(data); 55 | data = data.replace("", `
${markup}
`); 56 | } 57 | originalWrite.call(this, data); 58 | }; 59 | } 60 | 61 | WebApp.connectHandlers.use(Meteor.bindEnvironment((req, res, next) => { 62 | const client = new ApolloClient({ ssrMode: true, networkInterface }); 63 | 64 | renderToStringWithData() 65 | .then(result => { 66 | delete result.initialState.apollo.queries; 67 | delete result.initialState.apollo.mutations; 68 | res.write = patchResWrite(res.write, result); 69 | next(); 70 | }); 71 | })); 72 | -------------------------------------------------------------------------------- /examples/react-native/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /examples/react-native/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-dom.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-dom) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | namespace __DOM { 10 | function findDOMNode(instance: ReactInstance): E; 11 | function findDOMNode(instance: ReactInstance): Element; 12 | 13 | function render

( 14 | element: DOMElement

, 15 | container: Element, 16 | callback?: (element: Element) => any): Element; 17 | function render( 18 | element: ClassicElement

, 19 | container: Element, 20 | callback?: (component: ClassicComponent) => any): ClassicComponent; 21 | function render( 22 | element: ReactElement

, 23 | container: Element, 24 | callback?: (component: Component) => any): Component; 25 | 26 | function unmountComponentAtNode(container: Element): boolean; 27 | 28 | var version: string; 29 | 30 | function unstable_batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; 31 | function unstable_batchedUpdates(callback: (a: A) => any, a: A): void; 32 | function unstable_batchedUpdates(callback: () => any): void; 33 | 34 | function unstable_renderSubtreeIntoContainer

( 35 | parentComponent: Component, 36 | nextElement: DOMElement

, 37 | container: Element, 38 | callback?: (element: Element) => any): Element; 39 | function unstable_renderSubtreeIntoContainer( 40 | parentComponent: Component, 41 | nextElement: ClassicElement

, 42 | container: Element, 43 | callback?: (component: ClassicComponent) => any): ClassicComponent; 44 | function unstable_renderSubtreeIntoContainer( 45 | parentComponent: Component, 46 | nextElement: ReactElement

, 47 | container: Element, 48 | callback?: (component: Component) => any): Component; 49 | } 50 | 51 | namespace __DOMServer { 52 | function renderToString(element: ReactElement): string; 53 | function renderToStaticMarkup(element: ReactElement): string; 54 | var version: string; 55 | } 56 | } 57 | 58 | declare module "react-dom" { 59 | import DOM = __React.__DOM; 60 | export = DOM; 61 | } 62 | 63 | declare module "react-dom/server" { 64 | import DOMServer = __React.__DOMServer; 65 | export = DOMServer; 66 | } 67 | -------------------------------------------------------------------------------- /src/parser.ts: -------------------------------------------------------------------------------- 1 | import { 2 | DocumentNode, 3 | DefinitionNode, 4 | VariableDefinitionNode, 5 | OperationDefinitionNode, 6 | } from 'graphql'; 7 | 8 | const invariant = require('invariant'); 9 | 10 | export enum DocumentType { 11 | Query, 12 | Mutation, 13 | Subscription, 14 | } 15 | 16 | export interface IDocumentDefinition { 17 | type: DocumentType; 18 | name: string; 19 | variables: VariableDefinitionNode[]; 20 | } 21 | 22 | // the parser is mainly a safety check for the HOC 23 | export function parser(document: DocumentNode): IDocumentDefinition { 24 | // variables 25 | let variables, type, name; 26 | 27 | /* 28 | 29 | Saftey checks for proper usage of react-apollo 30 | 31 | */ 32 | invariant((!!document && !!document.kind), 33 | // tslint:disable-line 34 | `Argument of ${document} passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document`, 35 | ); 36 | 37 | const fragments = document.definitions.filter( 38 | (x: DefinitionNode) => x.kind === 'FragmentDefinition', 39 | ); 40 | 41 | const queries = document.definitions.filter( 42 | (x: DefinitionNode) => x.kind === 'OperationDefinition' && x.operation === 'query', 43 | ); 44 | 45 | const mutations = document.definitions.filter( 46 | (x: DefinitionNode) => x.kind === 'OperationDefinition' && x.operation === 'mutation', 47 | ); 48 | 49 | const subscriptions = document.definitions.filter( 50 | (x: DefinitionNode) => x.kind === 'OperationDefinition' && x.operation === 'subscription', 51 | ); 52 | 53 | invariant(!fragments.length || (queries.length || mutations.length || subscriptions.length), 54 | `Passing only a fragment to 'graphql' is not yet supported. You must include a query, subscription or mutation as well`, 55 | ); 56 | 57 | 58 | invariant(((queries.length + mutations.length + subscriptions.length) <= 1), 59 | // tslint:disable-line 60 | `react-apollo only supports a query, subscription, or a mutation per HOC. ${document} had ${queries.length} queries, ${subscriptions.length} subscriptions and ${mutations.length} mutations. You can use 'compose' to join multiple operation types to a component`, 61 | ); 62 | 63 | 64 | type = queries.length ? DocumentType.Query : DocumentType.Mutation; 65 | if (!queries.length && !mutations.length) type = DocumentType.Subscription; 66 | 67 | const definitions = queries.length ? queries : 68 | (mutations.length ? mutations : subscriptions); 69 | 70 | invariant(definitions.length === 1, 71 | // tslint:disable-line 72 | `react-apollo only supports one defintion per HOC. ${document} had ${definitions.length} definitions. You can use 'compose' to join multiple operation types to a component`, 73 | ); 74 | 75 | const definition = definitions[0] as OperationDefinitionNode; 76 | variables = definition.variableDefinitions || []; 77 | let hasName = definition.name && definition.name.kind === 'Name'; 78 | name = hasName ? definition.name.value : 'data'; // fallback to using data if no name 79 | return { name, type, variables }; 80 | } 81 | -------------------------------------------------------------------------------- /test/react-web/client/libraries/mobx.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import { mount } from 'enzyme'; 4 | import { observer } from 'mobx-react'; 5 | import { observable } from 'mobx'; 6 | import gql from 'graphql-tag'; 7 | 8 | import ApolloClient from 'apollo-client'; 9 | 10 | declare function require(name: string); 11 | 12 | import { mockNetworkInterface } from '../../../../src/test-utils'; 13 | import { ApolloProvider, graphql } from '../../../../src'; 14 | 15 | describe('mobx integration', () => { 16 | 17 | class AppState { 18 | @observable first = 0; 19 | 20 | reset() { 21 | this.first = 0; 22 | } 23 | } 24 | 25 | it('works with mobx', () => new Promise((resolve, reject) => { 26 | const query = gql`query people($first: Int) { allPeople(first: $first) { people { name } } }`; 27 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 28 | const variables = { first: 0 }; 29 | 30 | const data2 = { allPeople: { people: [ { name: 'Leia Skywalker' } ] } }; 31 | const variables2 = { first: 1 }; 32 | 33 | const networkInterface = mockNetworkInterface( 34 | { request: { query, variables }, result: { data } }, 35 | { request: { query, variables: variables2 }, result: { data: data2 } } 36 | ); 37 | 38 | const client = new ApolloClient({ networkInterface, addTypename: false }); 39 | 40 | let count = 0; 41 | 42 | @graphql(query, { 43 | options: (props) => ({ variables: { first: props.appState.first } }), 44 | }) 45 | @observer 46 | class Container extends React.Component { 47 | componentDidUpdate() { 48 | try { 49 | switch (count++) { 50 | case 0: 51 | expect(this.props.appState.first).toEqual(0); 52 | expect(this.props.data.loading).toEqual(false); 53 | expect(this.props.data.allPeople).toEqual(data.allPeople); 54 | break; 55 | case 1: 56 | expect(this.props.appState.first).toEqual(1); 57 | expect(this.props.data.loading).toEqual(false); 58 | expect(this.props.data.allPeople).toEqual(data.allPeople); 59 | this.props.data.refetch({ first: this.props.appState.first }).catch(reject); 60 | break; 61 | case 2: 62 | expect(this.props.appState.first).toEqual(1); 63 | expect(this.props.data.loading).toEqual(true); 64 | expect(this.props.data.allPeople).toEqual(data.allPeople); 65 | break; 66 | case 3: 67 | expect(this.props.appState.first).toEqual(1); 68 | expect(this.props.data.loading).toEqual(false); 69 | expect(this.props.data.allPeople).toEqual(data2.allPeople); 70 | resolve(); 71 | break; 72 | default: 73 | throw new Error('Component updated to many times.'); 74 | } 75 | } catch (error) { 76 | reject(error); 77 | } 78 | } 79 | 80 | render() { 81 | return

; 82 | } 83 | }; 84 | 85 | const appState = new AppState(); 86 | 87 | mount( 88 | 89 | 90 | 91 | ) as any; 92 | 93 | setTimeout(() => { 94 | appState.first += 1; 95 | }, 10); 96 | })); 97 | 98 | }); 99 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "align": [ 4 | false, 5 | "parameters", 6 | "arguments", 7 | "statements" 8 | ], 9 | "ban": false, 10 | "class-name": true, 11 | "curly": false, 12 | "eofline": true, 13 | "forin": false, 14 | "indent": [ 15 | true, 16 | "spaces" 17 | ], 18 | "jsdoc-format": true, 19 | "label-position": true, 20 | "max-line-length": [ 21 | true, 22 | 140 23 | ], 24 | "member-access": false, 25 | "member-ordering": [ 26 | true, 27 | "public-before-private", 28 | "static-before-instance", 29 | "variables-before-functions" 30 | ], 31 | "no-any": false, 32 | "no-arg": true, 33 | "no-bitwise": true, 34 | "no-conditional-assignment": true, 35 | "no-consecutive-blank-lines": false, 36 | "no-console": [ 37 | true, 38 | "log", 39 | "debug", 40 | "info", 41 | "time", 42 | "timeEnd", 43 | "trace" 44 | ], 45 | "no-construct": true, 46 | "no-debugger": true, 47 | "no-duplicate-variable": true, 48 | "no-empty": true, 49 | "no-eval": true, 50 | "no-inferrable-types": false, 51 | "no-internal-module": true, 52 | "no-null-keyword": false, 53 | "no-require-imports": false, 54 | "no-var-requires": false, 55 | "no-shadowed-variable": true, 56 | "no-switch-case-fall-through": true, 57 | "no-trailing-whitespace": true, 58 | "no-unused-expression": true, 59 | "no-use-before-declare": true, 60 | "no-var-keyword": true, 61 | "no-var-requires": false, 62 | "object-literal-sort-keys": false, 63 | "one-line": [ 64 | true, 65 | "check-open-brace", 66 | "check-catch", 67 | "check-else", 68 | "check-finally", 69 | "check-whitespace" 70 | ], 71 | "quotemark": [ 72 | true, 73 | "single", 74 | "avoid-escape" 75 | ], 76 | "radix": true, 77 | "semicolon": [ 78 | true, 79 | "always" 80 | ], 81 | "switch-default": true, 82 | "trailing-comma": [ 83 | true, 84 | { 85 | "multiline": "always", 86 | "singleline": "never" 87 | } 88 | ], 89 | "triple-equals": [ 90 | true, 91 | "allow-null-check" 92 | ], 93 | "typedef": [ 94 | false, 95 | "call-signature", 96 | "parameter", 97 | "arrow-parameter", 98 | "property-declaration", 99 | "variable-declaration", 100 | "member-variable-declaration" 101 | ], 102 | "typedef-whitespace": [ 103 | true, 104 | { 105 | "call-signature": "nospace", 106 | "index-signature": "nospace", 107 | "parameter": "nospace", 108 | "property-declaration": "nospace", 109 | "variable-declaration": "nospace" 110 | }, 111 | { 112 | "call-signature": "space", 113 | "index-signature": "space", 114 | "parameter": "space", 115 | "property-declaration": "space", 116 | "variable-declaration": "space" 117 | } 118 | ], 119 | "variable-name": [ 120 | false, 121 | "check-format", 122 | "allow-leading-underscore", 123 | "ban-keywords" 124 | ], 125 | "whitespace": [ 126 | true, 127 | "check-branch", 128 | "check-decl", 129 | "check-operator", 130 | "check-separator", 131 | "check-type" 132 | ] 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/create-react-app/src/Pokemon.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import { MockedProvider } from "../../../lib/test-utils"; 4 | import { print } from "graphql"; 5 | import { addTypenameToDocument } from "apollo-client/queries/queryTransform"; 6 | 7 | import PokemonWithData, { 8 | POKEMON_QUERY, 9 | Pokemon, 10 | withPokemon, 11 | } from "./Pokemon"; 12 | 13 | const mockedData = { 14 | pokemon: { 15 | __typename: "Pokemon", 16 | name: "Charmander", 17 | image: "https://img.pokemondb.net/artwork/charmander.jpg", 18 | }, 19 | }; 20 | 21 | const query = addTypenameToDocument(POKEMON_QUERY); 22 | const variables = { name: "charmander" }; 23 | 24 | describe("default export", () => { 25 | it("renders without crashing", () => { 26 | const output = renderer.create( 27 | 32 | 33 | 34 | ); 35 | expect(output.toJSON()).toMatchSnapshot(); 36 | }); 37 | }); 38 | 39 | describe("Pokemon enhancer", () => { 40 | it("renders with loading first", done => { 41 | class Container extends React.Component { 42 | componentWillMount() { 43 | expect(this.props.data.loading).toBe(true); 44 | expect(this.props.data.pokemon).toBeFalsy(); 45 | done(); 46 | } 47 | render() { 48 | return null; 49 | } 50 | } 51 | const ContainerWithData = withPokemon(Container); 52 | const output = renderer.create( 53 | 58 | 59 | 60 | ); 61 | }); 62 | 63 | it("renders data without crashing", done => { 64 | class Container extends React.Component { 65 | componentWillReceiveProps(props) { 66 | expect(props.data.loading).toBe(false); 67 | expect(props.data.pokemon).toEqual(mockedData.pokemon); 68 | done(); 69 | } 70 | render() { 71 | return null; 72 | } 73 | } 74 | const ContainerWithData = withPokemon(Container); 75 | const output = renderer.create( 76 | 81 | 82 | 83 | ); 84 | }); 85 | 86 | it("renders with an error correctly", done => { 87 | try { 88 | class Container extends React.Component { 89 | componentWillReceiveProps(props) { 90 | expect(props.data.error).toBeTruthy(); 91 | done(); 92 | } 93 | render() { 94 | return null; 95 | } 96 | } 97 | const ContainerWithData = withPokemon(Container); 98 | const output = renderer.create( 99 | 102 | 103 | 104 | ); 105 | } catch (e) { 106 | console.log(e); 107 | } 108 | }); 109 | }); 110 | 111 | describe("Pokemon query", () => { 112 | // it('should match expected structure', () => { 113 | // expect(POKEMON_QUERY).toMatchSnapshot(); 114 | // }); 115 | 116 | it("should match expected shape", () => { 117 | expect(print(POKEMON_QUERY)).toMatchSnapshot(); 118 | }); 119 | }); 120 | 121 | describe("Pokemon Component", () => { 122 | it("should render a loading state without data", () => { 123 | const output = renderer.create(); 124 | expect(output.toJSON()).toMatchSnapshot(); 125 | }); 126 | 127 | it("should render an error", () => { 128 | const output = renderer.create( 129 | 130 | ); 131 | expect(output.toJSON()).toMatchSnapshot(); 132 | }); 133 | 134 | it("should render name and image in order", () => { 135 | const output = renderer.create( 136 | 137 | ); 138 | expect(output.toJSON()).toMatchSnapshot(); 139 | }); 140 | }); 141 | -------------------------------------------------------------------------------- /test/parser.test.ts: -------------------------------------------------------------------------------- 1 | 2 | import { OperationDefinition } from 'graphql'; 3 | 4 | import gql from 'graphql-tag'; 5 | 6 | import { parser, DocumentType } from '../src/parser'; 7 | 8 | describe('parser', () => { 9 | 10 | // XXX can this be tested with strictly typed functions? 11 | // it('should error on an invalid document', () => { 12 | // expect(parser('{ user { name } }')).to.throw(); 13 | // }); 14 | 15 | it('should error if both a query and a mutation is present', () => { 16 | const query = gql` 17 | query { user { name } } 18 | mutation ($t: String) { addT(t: $t) { user { name } } } 19 | `; 20 | 21 | expect(parser.bind(null, query)).toThrowError(/react-apollo only supports/); 22 | }); 23 | 24 | it('should error if multiple operations are present', () => { 25 | const query = gql` 26 | query One { user { name } } 27 | query Two { user { name } } 28 | `; 29 | 30 | expect(parser.bind(null, query)).toThrowError(/react-apollo only supports/); 31 | }); 32 | 33 | it('should error if not a DocumentNode', () => { 34 | const query = ` 35 | query One { user { name } } 36 | `; 37 | 38 | expect(parser.bind(null, query)).toThrowError(/not a valid GraphQL DocumentNode/); 39 | }); 40 | 41 | it('should return the name of the operation', () => { 42 | const query = gql`query One { user { name } }`; 43 | expect(parser(query).name).toBe('One'); 44 | 45 | const mutation = gql`mutation One { user { name } }`; 46 | expect(parser(mutation).name).toBe('One'); 47 | 48 | const subscription = gql`subscription One { user { name } }`; 49 | expect(parser(subscription).name).toBe('One'); 50 | }); 51 | 52 | it('should return data as the name of the operation if not named', () => { 53 | const query = gql`query { user { name } }`; 54 | expect(parser(query).name).toBe('data'); 55 | 56 | const unnamedQuery = gql`{ user { name } }`; 57 | expect(parser(unnamedQuery).name).toBe('data'); 58 | 59 | const mutation = gql`mutation { user { name } }`; 60 | expect(parser(mutation).name).toBe('data'); 61 | 62 | const subscription = gql`subscription { user { name } }`; 63 | expect(parser(subscription).name).toBe('data'); 64 | }); 65 | 66 | it('should return the type of operation', () => { 67 | const query = gql`query One { user { name } }`; 68 | expect(parser(query).type).toBe(DocumentType.Query); 69 | 70 | const unnamedQuery = gql`{ user { name } }`; 71 | expect(parser(unnamedQuery).type).toBe(DocumentType.Query); 72 | 73 | const mutation = gql`mutation One { user { name } }`; 74 | expect(parser(mutation).type).toBe(DocumentType.Mutation); 75 | 76 | const subscription = gql`subscription One { user { name } }`; 77 | expect(parser(subscription).type).toBe(DocumentType.Subscription); 78 | }); 79 | 80 | it('should return the variable definitions of the operation', () => { 81 | 82 | const query = gql`query One($t: String!) { user(t: $t) { name } }`; 83 | let definition = query.definitions[0] as OperationDefinition; 84 | expect(parser(query).variables).toEqual(definition.variableDefinitions); 85 | 86 | const mutation = gql`mutation One($t: String!) { user(t: $t) { name } }`; 87 | definition = mutation.definitions[0] as OperationDefinition; 88 | expect(parser(mutation).variables).toEqual(definition.variableDefinitions); 89 | 90 | const subscription = gql`subscription One($t: String!) { user(t: $t) { name } }`; 91 | definition = subscription.definitions[0] as OperationDefinition; 92 | expect(parser(subscription).variables).toEqual(definition.variableDefinitions); 93 | }); 94 | 95 | it('should not error if the operation has no variables', () => { 96 | const query = gql`query { user(t: $t) { name } }`; 97 | let definition = query.definitions[0] as OperationDefinition; 98 | expect(parser(query).variables).toEqual(definition.variableDefinitions); 99 | 100 | const mutation = gql`mutation { user(t: $t) { name } }`; 101 | definition = mutation.definitions[0] as OperationDefinition; 102 | expect(parser(mutation).variables).toEqual(definition.variableDefinitions); 103 | 104 | const subscription = gql`subscription { user(t: $t) { name } }`; 105 | definition = subscription.definitions[0] as OperationDefinition; 106 | expect(parser(subscription).variables).toEqual(definition.variableDefinitions); 107 | }); 108 | 109 | 110 | }); 111 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/queries/polling.test.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import * as React from 'react'; 4 | import * as PropTypes from 'prop-types'; 5 | import * as ReactDOM from 'react-dom'; 6 | import * as renderer from 'react-test-renderer'; 7 | import { mount } from 'enzyme'; 8 | import gql from 'graphql-tag'; 9 | import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client'; 10 | import { NetworkInterface } from 'apollo-client'; 11 | import { connect } from 'react-redux'; 12 | import { withState } from 'recompose'; 13 | 14 | declare function require(name: string); 15 | 16 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 17 | import { ApolloProvider, graphql} from '../../../../../src'; 18 | 19 | // XXX: this is also defined in apollo-client 20 | // I'm not sure why mocha doesn't provide something like this, you can't 21 | // always use promises 22 | const wrap = (done: Function, cb: (...args: any[]) => any) => (...args: any[]) => { 23 | try { 24 | return cb(...args); 25 | } catch (e) { 26 | done(e); 27 | } 28 | }; 29 | 30 | function wait(ms) { 31 | return new Promise(resolve => setTimeout(() => resolve(), ms)); 32 | } 33 | 34 | describe('[queries] polling', () => { 35 | 36 | // polling 37 | it('allows a polling query to be created', (done) => { 38 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 39 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 40 | const data2 = { allPeople: { people: [ { name: 'Leia Skywalker' } ] } }; 41 | const networkInterface = mockNetworkInterface( 42 | { request: { query }, result: { data } }, 43 | { request: { query }, result: { data: data2 } }, 44 | { request: { query }, result: { data: data2 } } 45 | ); 46 | const client = new ApolloClient({ networkInterface, addTypename: false }); 47 | 48 | let count = 0; 49 | const Container = graphql(query, { options: () => ({ pollInterval: 75, notifyOnNetworkStatusChange: false }) })(() => { 50 | count++; 51 | return null; 52 | }); 53 | 54 | const wrapper = renderer.create(); 55 | 56 | setTimeout(() => { 57 | expect(count).toBe(3); 58 | (wrapper as any).unmount(); 59 | done(); 60 | }, 160); 61 | }); 62 | 63 | it('exposes stopPolling as part of the props api', (done) => { 64 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 65 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 66 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 67 | const client = new ApolloClient({ networkInterface, addTypename: false }); 68 | 69 | @graphql(query) 70 | class Container extends React.Component { 71 | componentWillReceiveProps({ data }) { // tslint:disable-line 72 | expect(data.stopPolling).toBeTruthy(); 73 | expect(data.stopPolling instanceof Function).toBe(true); 74 | expect(data.stopPolling).not.toThrow(); 75 | done(); 76 | } 77 | render() { 78 | return null; 79 | } 80 | }; 81 | 82 | renderer.create(); 83 | }); 84 | 85 | it('exposes startPolling as part of the props api', (done) => { 86 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 87 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 88 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 89 | const client = new ApolloClient({ networkInterface, addTypename: false }); 90 | let wrapper; 91 | 92 | // @graphql(query) 93 | @graphql(query, { options: { pollInterval: 10 }}) 94 | class Container extends React.Component { 95 | componentWillReceiveProps({ data }) { // tslint:disable-line 96 | expect(data.startPolling).toBeTruthy(); 97 | expect(data.startPolling instanceof Function).toBe(true); 98 | // XXX this does throw because of no pollInterval 99 | // expect(data.startPolling).not.toThrow(); 100 | setTimeout(() => { 101 | wrapper.unmount(); 102 | done(); 103 | }, 0); 104 | } 105 | render() { 106 | return null; 107 | } 108 | }; 109 | 110 | wrapper = renderer.create(); 111 | }); 112 | 113 | }); 114 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/queries/reducer.test.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import * as React from 'react'; 4 | import * as PropTypes from 'prop-types'; 5 | import * as ReactDOM from 'react-dom'; 6 | import * as renderer from 'react-test-renderer'; 7 | import { mount } from 'enzyme'; 8 | import gql from 'graphql-tag'; 9 | import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client'; 10 | import { NetworkInterface } from 'apollo-client'; 11 | import { connect } from 'react-redux'; 12 | import { withState } from 'recompose'; 13 | 14 | declare function require(name: string); 15 | 16 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 17 | import { ApolloProvider, graphql} from '../../../../../src'; 18 | 19 | // XXX: this is also defined in apollo-client 20 | // I'm not sure why mocha doesn't provide something like this, you can't 21 | // always use promises 22 | const wrap = (done: Function, cb: (...args: any[]) => any) => (...args: any[]) => { 23 | try { 24 | return cb(...args); 25 | } catch (e) { 26 | done(e); 27 | } 28 | }; 29 | 30 | function wait(ms) { 31 | return new Promise(resolve => setTimeout(() => resolve(), ms)); 32 | } 33 | 34 | describe('[queries] reducer', () => { 35 | 36 | // props reducer 37 | it('allows custom mapping of a result to props', () => { 38 | const query = gql`query thing { getThing { thing } }`; 39 | const data = { getThing: { thing: true } }; 40 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 41 | const client = new ApolloClient({ networkInterface, addTypename: false }); 42 | 43 | type ResultData = { 44 | getThing: { thing: boolean } 45 | } 46 | type ResultShape = { 47 | showSpinner: boolean 48 | } 49 | 50 | const props = (result) => ({ showSpinner: result.data && result.data.loading }); 51 | const ContainerWithData = graphql(query, { props })(({ showSpinner }) => { 52 | expect(showSpinner).toBe(true); 53 | return null; 54 | }); 55 | 56 | const wrapper = renderer.create(); 57 | (wrapper as any).unmount(); 58 | }); 59 | 60 | it('allows custom mapping of a result to props that includes the passed props', () => { 61 | const query = gql`query thing { getThing { thing } }`; 62 | const data = { getThing: { thing: true } }; 63 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 64 | const client = new ApolloClient({ networkInterface, addTypename: false }); 65 | 66 | const props = ({ data, ownProps }) => { 67 | expect(ownProps.sample).toBe(1); 68 | return { showSpinner: data.loading }; 69 | }; 70 | type ResultData = { 71 | getThing: { thing: boolean } 72 | } 73 | type ReducerResult = { 74 | showSpinner: boolean, 75 | } 76 | type Props = { 77 | sample: number 78 | } 79 | const ContainerWithData = graphql(query, { props })(({ showSpinner }) => { 80 | expect(showSpinner).toBe(true); 81 | return null; 82 | }); 83 | 84 | const wrapper = renderer.create( 85 | 86 | ); 87 | (wrapper as any).unmount(); 88 | }); 89 | 90 | it('allows custom mapping of a result to props', (done) => { 91 | const query = gql`query thing { getThing { thing } }`; 92 | const data = { getThing: { thing: true } }; 93 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 94 | const client = new ApolloClient({ networkInterface, addTypename: false }); 95 | 96 | type Result = { 97 | getThing?: { thing: boolean } 98 | } 99 | 100 | type PropsResult = { 101 | thingy: boolean 102 | } 103 | 104 | const withData = graphql(query, { 105 | props: ({ data }) => ({ thingy: data.getThing }) 106 | }) 107 | 108 | class Container extends React.Component { 109 | componentWillReceiveProps(props: PropsResult) { 110 | expect(props.thingy).toEqual(data.getThing); 111 | done(); 112 | } 113 | render() { 114 | return null; 115 | } 116 | }; 117 | 118 | const ContainerWithData = withData(Container); 119 | 120 | renderer.create(); 121 | }); 122 | 123 | 124 | }); 125 | -------------------------------------------------------------------------------- /examples/react-native/ios/reactnative.xcodeproj/xcshareddata/xcschemes/reactnative.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/mutations/lifecycle.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import * as renderer from 'react-test-renderer'; 4 | import gql from 'graphql-tag'; 5 | import assign = require('object-assign'); 6 | 7 | import ApolloClient from 'apollo-client'; 8 | 9 | declare function require(name: string); 10 | 11 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 12 | 13 | 14 | import { ApolloProvider, graphql } from '../../../../../src'; 15 | 16 | describe('[mutations] lifecycle', () => { 17 | 18 | it('allows falsy values in the mapped variables from props', (done) => { 19 | const query = gql` 20 | mutation addPerson($id: Int) { 21 | allPeople(id: $id) { people { name } } 22 | } 23 | `; 24 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 25 | const variables = { id: null }; 26 | const networkInterface = mockNetworkInterface({ 27 | request: { query, variables }, 28 | result: { data }, 29 | }); 30 | const client = new ApolloClient({ networkInterface, addTypename: false }); 31 | 32 | @graphql(query) 33 | class Container extends React.Component { 34 | componentDidMount() { 35 | this.props.mutate() 36 | .then(result => { 37 | expect(result.data).toEqual(data); 38 | done(); 39 | }) 40 | ; 41 | } 42 | render() { 43 | return null; 44 | } 45 | }; 46 | 47 | renderer.create(); 48 | }); 49 | 50 | it('errors if the passed props don\'t contain the needed variables', () => { 51 | const query = gql` 52 | mutation addPerson($first: Int) { 53 | allPeople(first: $first) { people { name } } 54 | } 55 | `; 56 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 57 | const variables = { first: 1 }; 58 | const networkInterface = mockNetworkInterface({ 59 | request: { query, variables }, 60 | result: { data }, 61 | }); 62 | const client = new ApolloClient({ networkInterface, addTypename: false }); 63 | const Container = graphql(query)(() => null); 64 | 65 | try { 66 | renderer.create(); 67 | } catch (e) { 68 | expect(e).toMatch(/Invariant Violation: The operation 'addPerson'/); 69 | } 70 | 71 | }); 72 | 73 | it('rebuilds the mutation on prop change when using `options`', (done) => { 74 | const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`; 75 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 76 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 77 | const client = new ApolloClient({ networkInterface, addTypename: false }); 78 | 79 | function options(props) { 80 | // expect(props.listId).toBe(2); 81 | return {}; 82 | }; 83 | 84 | @graphql(query, { options }) 85 | class Container extends React.Component { 86 | componentWillReceiveProps(props) { 87 | if (props.listId !== 2) return; 88 | props.mutate().then(x => done()); 89 | } 90 | render() { 91 | return null; 92 | } 93 | }; 94 | class ChangingProps extends React.Component { 95 | state = { listId: 1 }; 96 | 97 | componentDidMount() { 98 | setTimeout(() => this.setState({ listId: 2 }), 50); 99 | } 100 | 101 | render() { 102 | return ; 103 | } 104 | } 105 | 106 | renderer.create(); 107 | }); 108 | 109 | it('can execute a mutation with custom variables', (done) => { 110 | const query = gql` 111 | mutation addPerson($id: Int) { 112 | allPeople(id: $id) { people { name } } 113 | } 114 | `; 115 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 116 | const variables = { id: 1 }; 117 | const networkInterface = mockNetworkInterface({ 118 | request: { query, variables }, 119 | result: { data }, 120 | }); 121 | const client = new ApolloClient({ networkInterface, addTypename: false }); 122 | 123 | @graphql(query) 124 | class Container extends React.Component { 125 | componentDidMount() { 126 | this.props.mutate({ variables: { id: 1 } }) 127 | .then(result => { 128 | expect(result.data).toEqual(data); 129 | done(); 130 | }) 131 | ; 132 | } 133 | render() { 134 | return null; 135 | } 136 | }; 137 | 138 | renderer.create(); 139 | }); 140 | 141 | }); 142 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/mutations/index.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import * as renderer from 'react-test-renderer'; 4 | import gql from 'graphql-tag'; 5 | import assign = require('object-assign'); 6 | 7 | import ApolloClient from 'apollo-client'; 8 | 9 | declare function require(name: string); 10 | 11 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 12 | 13 | 14 | import { ApolloProvider, graphql } from '../../../../../src'; 15 | 16 | describe('[mutations]', () => { 17 | 18 | it('binds a mutation to props', () => { 19 | const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`; 20 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 21 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 22 | const client = new ApolloClient({ networkInterface, addTypename: false }); 23 | 24 | const ContainerWithData = graphql(query)(({ mutate }) => { 25 | expect(mutate).toBeTruthy(); 26 | expect(typeof mutate).toBe('function'); 27 | return null; 28 | }); 29 | 30 | renderer.create(); 31 | }); 32 | 33 | it('binds a mutation to custom props', () => { 34 | const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`; 35 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 36 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 37 | const client = new ApolloClient({ networkInterface, addTypename: false }); 38 | 39 | const props = ({ ownProps, addPerson }) => ({ 40 | [ownProps.methodName]: (name: string) => addPerson({ variables: { name }}), 41 | }); 42 | 43 | const ContainerWithData = graphql(query, { props })(({ test }) => { 44 | expect(test).toBeTruthy(); 45 | expect(typeof test).toBe('function'); 46 | return null; 47 | }); 48 | 49 | renderer.create(); 50 | }); 51 | 52 | it('does not swallow children errors', () => { 53 | const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`; 54 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 55 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 56 | const client = new ApolloClient({ networkInterface, addTypename: false }); 57 | let bar; 58 | const ContainerWithData = graphql(query)(() => { 59 | bar(); // this will throw 60 | return null; 61 | }); 62 | 63 | try { 64 | renderer.create(); 65 | throw new Error(); 66 | } catch (e) { 67 | expect(e.name).toMatch(/TypeError/); 68 | } 69 | 70 | }); 71 | 72 | it('can execute a mutation', (done) => { 73 | const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`; 74 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 75 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 76 | const client = new ApolloClient({ networkInterface, addTypename: false }); 77 | 78 | @graphql(query) 79 | class Container extends React.Component { 80 | componentDidMount() { 81 | this.props.mutate() 82 | .then(result => { 83 | expect(result.data).toEqual(data); 84 | done(); 85 | }) 86 | ; 87 | } 88 | render() { 89 | return null; 90 | } 91 | }; 92 | 93 | renderer.create(); 94 | }); 95 | 96 | it('can execute a mutation with variables from props', (done) => { 97 | const query = gql` 98 | mutation addPerson($id: Int) { 99 | allPeople(id: $id) { people { name } } 100 | } 101 | `; 102 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 103 | const variables = { id: 1 }; 104 | const networkInterface = mockNetworkInterface({ 105 | request: { query, variables }, 106 | result: { data }, 107 | }); 108 | const client = new ApolloClient({ networkInterface, addTypename: false }); 109 | 110 | @graphql(query) 111 | class Container extends React.Component { 112 | componentDidMount() { 113 | this.props.mutate() 114 | .then(result => { 115 | expect(result.data).toEqual(data); 116 | done(); 117 | }) 118 | ; 119 | } 120 | render() { 121 | return null; 122 | } 123 | }; 124 | 125 | renderer.create(); 126 | }); 127 | 128 | }); 129 | -------------------------------------------------------------------------------- /index.js.flow: -------------------------------------------------------------------------------- 1 | import type { 2 | ApolloClient, 3 | MutationQueryReducersMap, 4 | ApolloQueryResult, 5 | ApolloError, 6 | FetchPolicy, 7 | FetchMoreOptions, 8 | UpdateQueryOptions, 9 | FetchMoreQueryOptions, 10 | SubscribeToMoreOptions, 11 | } from "apollo-client"; 12 | import type { Store } from "redux"; 13 | import type { DocumentNode, VariableDefinitionNode } from "graphql"; 14 | import type { Component } from "react"; 15 | 16 | declare module "react-apollo" { 17 | declare type StatelessComponent

= (props: P) => ?React$Element; 18 | 19 | declare export interface ProviderProps { 20 | store?: Store, 21 | client: ApolloClient, 22 | } 23 | 24 | declare export class ApolloProvider extends React$Component { 25 | props: ProviderProps, 26 | childContextTypes: { 27 | store: Store, 28 | client: ApolloClient, 29 | }, 30 | contextTypes: { 31 | store: Store, 32 | }, 33 | getChildContext(): { 34 | store: Store, 35 | client: ApolloClient, 36 | }, 37 | render(): React$Element<*>, 38 | } 39 | declare export type MutationFunc = ( 40 | opts: MutationOpts 41 | ) => Promise>; 42 | 43 | declare export type DefaultChildProps = { 44 | data: QueryProps & R, 45 | mutate: MutationFunc, 46 | } & P; 47 | 48 | declare export interface MutationOpts { 49 | variables?: Object, 50 | optimisticResponse?: Object, 51 | updateQueries?: MutationQueryReducersMap, 52 | } 53 | 54 | declare export interface QueryOpts { 55 | ssr?: boolean, 56 | variables?: Object, 57 | fetchPolicy?: FetchPolicy, 58 | pollInterval?: number, 59 | skip?: boolean, 60 | } 61 | 62 | declare export interface QueryProps { 63 | error?: ApolloError, 64 | networkStatus: number, 65 | loading: boolean, 66 | variables: Object, 67 | fetchMore: ( 68 | fetchMoreOptions: FetchMoreQueryOptions & FetchMoreOptions 69 | ) => Promise>, 70 | refetch: (variables?: Object) => Promise>, 71 | startPolling: (pollInterval: number) => void, 72 | stopPolling: () => void, 73 | subscribeToMore: (options: SubscribeToMoreOptions) => () => void, 74 | updateQuery: ( 75 | mapFn: (previousQueryResult: any, options: UpdateQueryOptions) => any 76 | ) => void, 77 | } 78 | 79 | declare export interface OptionProps { 80 | ownProps: TProps, 81 | data?: QueryProps & TResult, 82 | mutate?: MutationFunc, 83 | } 84 | 85 | declare export type OptionDescription

= ( 86 | props: P 87 | ) => QueryOpts | MutationOpts; 88 | 89 | declare export interface OperationOption { 90 | options?: OptionDescription, 91 | props?: (props: OptionProps) => any, 92 | skip?: boolean | ((props: any) => boolean), 93 | name?: string, 94 | withRef?: boolean, 95 | shouldResubscribe?: (props: TProps, nextProps: TProps) => boolean, 96 | alias?: string, 97 | } 98 | 99 | declare export interface OperationComponent< 100 | TResult: Object = {}, 101 | TOwnProps: Object = {}, 102 | TMergedProps = DefaultChildProps 103 | > { 104 | ( 105 | component: 106 | | StatelessComponent 107 | | React$Component 108 | ): Class>, 109 | } 110 | 111 | declare export function graphql( 112 | document: DocumentNode, 113 | operationOptions?: OperationOption 114 | ): OperationComponent; 115 | 116 | declare export interface IDocumentDefinition { 117 | type: DocumentType, 118 | name: string, 119 | variables: VariableDefinitionNode[], 120 | } 121 | 122 | declare export function parser(document: DocumentNode): IDocumentDefinition; 123 | 124 | declare export interface Context { 125 | client?: ApolloClient, 126 | store?: Store, 127 | [key: string]: any 128 | } 129 | 130 | declare export interface QueryTreeArgument { 131 | rootElement: React$Element<*>, 132 | rootContext?: Context 133 | } 134 | 135 | declare export interface QueryResult { 136 | query: Promise>, 137 | element: React$Element<*>, 138 | context: Context 139 | } 140 | 141 | declare export function walkTree( 142 | element: React$Element<*>, 143 | context: Context, 144 | visitor: ( 145 | element: React$Element<*>, 146 | instance: any, 147 | context: Context 148 | ) => boolean | void 149 | ): void; 150 | 151 | declare export function getDataFromTree( 152 | rootElement: React$Element<*>, 153 | rootContext?: any, 154 | fetchRoot?: boolean 155 | ): Promise; 156 | 157 | declare export function renderToStringWithData( 158 | component: React$Element<*> 159 | ): Promise; 160 | 161 | declare export function cleanupApolloState(apolloState: any): void; 162 | } 163 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-apollo", 3 | "version": "1.4.2", 4 | "description": "React data container for Apollo Client", 5 | "main": "lib/react-apollo.umd.js", 6 | "module": "./lib/index.js", 7 | "jsnext:main": "./lib/index.js", 8 | "browser": "lib/react-apollo.browser.umd.js", 9 | "typings": "lib/index.d.ts", 10 | "scripts": { 11 | "deploy": "npm run compile && npm test && npm publish --tag next && git push --tags", 12 | "test": "npm run compile && jest", 13 | "testonly": "jest", 14 | "test-watch": "jest --watch", 15 | "posttest": "npm run lint", 16 | "filesize": "npm run compile:browser && ./scripts/filesize.js --file=./dist/index.min.js --maxGzip=20", 17 | "flow-check": "flow check", 18 | "compile": "tsc", 19 | "bundle": "rollup -c && rollup -c rollup.browser.config.js && rollup -c rollup.test-utils.config.js && cp ./index.js.flow ./lib", 20 | "compile:browser": "rm -rf ./dist && mkdir ./dist && browserify ./lib/react-apollo.browser.umd.js --i graphql-tag --i react --i apollo-client -o=./dist/index.js && npm run minify:browser && npm run compress:browser", 21 | "minify:browser": "uglifyjs -c -m -o ./dist/index.min.js -- ./dist/index.js", 22 | "compress:browser": "./scripts/gzip.js --file=./dist/index.min.js", 23 | "watch": "tsc -w", 24 | "lint": "tslint 'src/*.ts*' && tslint 'test/*.ts*'" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "apollostack/react-apollo" 29 | }, 30 | "keywords": [ 31 | "ecmascript", 32 | "es2015", 33 | "jsnext", 34 | "javascript", 35 | "relay", 36 | "npm", 37 | "react" 38 | ], 39 | "author": "James Baxley ", 40 | "babel": { 41 | "presets": [ 42 | "react-native" 43 | ] 44 | }, 45 | "jest": { 46 | "preset": "jest-react-native", 47 | "testEnvironment": "jsdom", 48 | "transform": { 49 | ".*": "/preprocessor.js" 50 | }, 51 | "moduleFileExtensions": [ 52 | "ts", 53 | "tsx", 54 | "js", 55 | "json" 56 | ], 57 | "modulePathIgnorePatterns": [ 58 | "/examples", 59 | "/test/flow.js" 60 | ], 61 | "testRegex": "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$", 62 | "collectCoverage": true 63 | }, 64 | "license": "MIT", 65 | "files": [ 66 | "dist", 67 | "lib", 68 | "src", 69 | "exports.d.ts", 70 | "CHANGELOG.md", 71 | "LICENSE", 72 | "README.md" 73 | ], 74 | "peerDependencies": { 75 | "react": "0.14.x || 15.* || ^15.0.0 || ^16.0.0-alpha", 76 | "redux": "^2.0.0 || ^3.0.0" 77 | }, 78 | "optionalDependencies": { 79 | "react-dom": "0.14.x || 15.* || ^15.0.0 || ^16.0.0-alpha" 80 | }, 81 | "devDependencies": { 82 | "@types/enzyme": "^2.4.32", 83 | "@types/graphql": "^0.9.0", 84 | "@types/invariant": "^2.2.27", 85 | "@types/isomorphic-fetch": "0.0.34", 86 | "@types/jest": "^19.2.0", 87 | "@types/lodash": "^4.14.36", 88 | "@types/node": "^7.0.5", 89 | "@types/object-assign": "^4.0.28", 90 | "@types/react": "^15.0.12", 91 | "@types/react-addons-test-utils": "^0.14.14", 92 | "@types/react-dom": "^15.5.0", 93 | "@types/react-redux": "^4.4.31", 94 | "@types/redux-form": "^6.3.2", 95 | "@types/redux-immutable": "^3.0.30", 96 | "@types/sinon": "^2.1.1", 97 | "babel-jest": "^19.0.0", 98 | "babel-preset-react-native": "^1.9.0", 99 | "browserify": "^14.1.0", 100 | "cheerio": "^0.22.0", 101 | "colors": "^1.1.2", 102 | "enzyme": "^2.2.0", 103 | "enzyme-to-json": "^1.1.5", 104 | "flow-bin": "^0.46.0", 105 | "graphql": "^0.9.1", 106 | "immutable": "^3.8.1", 107 | "isomorphic-fetch": "^2.2.1", 108 | "jest": "^19.0.0", 109 | "jest-react-native": "^18.0.0", 110 | "jsdom": "^11.0.0", 111 | "lodash": "^4.16.6", 112 | "minimist": "^1.2.0", 113 | "mobx": "^3.1.0", 114 | "mobx-react": "^4.1.0", 115 | "pretty-bytes": "^4.0.2", 116 | "react": "^15.5.4", 117 | "react-addons-test-utils": "^15.5.1", 118 | "react-dom": "^15.5.4", 119 | "react-native": "^0.42.3", 120 | "react-redux": "^5.0.3", 121 | "react-test-renderer": "^15.5.4", 122 | "recompose": "^0.23.0", 123 | "redux": "^3.5.2", 124 | "redux-form": "^6.0.5", 125 | "redux-immutable": "^4.0.0", 126 | "redux-loop": "^2.2.2", 127 | "rollup": "^0.42.0", 128 | "source-map-support": "^0.4.0", 129 | "swapi-graphql": "0.0.6", 130 | "travis-weigh-in": "^1.0.2", 131 | "tslint": "^5.1.0", 132 | "typescript": "^2.3.0", 133 | "typescript-require": "^0.2.9-1", 134 | "typings": "^2.1.0", 135 | "uglify-js": "^3.0.13" 136 | }, 137 | "dependencies": { 138 | "apollo-client": "^1.4.0", 139 | "graphql-anywhere": "^3.0.0", 140 | "graphql-tag": "^2.0.0", 141 | "hoist-non-react-statics": "^1.2.0", 142 | "invariant": "^2.2.1", 143 | "lodash.flatten": "^4.2.0", 144 | "lodash.isequal": "^4.1.1", 145 | "lodash.isobject": "^3.0.2", 146 | "lodash.pick": "^4.4.0", 147 | "object-assign": "^4.0.1", 148 | "prop-types": "^15.5.8" 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/mutations/queries.test.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | import * as renderer from 'react-test-renderer'; 4 | import gql from 'graphql-tag'; 5 | import assign = require('object-assign'); 6 | 7 | import ApolloClient from 'apollo-client'; 8 | 9 | declare function require(name: string); 10 | 11 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 12 | 13 | 14 | import { ApolloProvider, graphql } from '../../../../../src'; 15 | 16 | describe('[mutations] query integration', () => { 17 | 18 | it('allows for passing optimisticResponse for a mutation', (done) => { 19 | const query = gql` 20 | mutation createTodo { 21 | createTodo { id, text, completed, __typename } 22 | __typename 23 | } 24 | `; 25 | 26 | const data = { 27 | __typename: 'Mutation', 28 | createTodo: { 29 | __typename: 'Todo', 30 | id: '99', 31 | text: 'This one was created with a mutation.', 32 | completed: true, 33 | }, 34 | }; 35 | 36 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 37 | const client = new ApolloClient({ networkInterface, addTypename: false }); 38 | 39 | @graphql(query) 40 | class Container extends React.Component { 41 | componentDidMount() { 42 | const optimisticResponse = { 43 | __typename: 'Mutation', 44 | createTodo: { 45 | __typename: 'Todo', 46 | id: '99', 47 | text: 'Optimistically generated', 48 | completed: true, 49 | }, 50 | }; 51 | this.props.mutate({ optimisticResponse }) 52 | .then(result => { 53 | expect(result.data).toEqual(data); 54 | done(); 55 | }) 56 | ; 57 | 58 | const dataInStore = client.queryManager.getDataWithOptimisticResults(); 59 | expect(dataInStore['Todo:99']).toEqual( 60 | optimisticResponse.createTodo 61 | ); 62 | 63 | } 64 | render() { 65 | return null; 66 | } 67 | }; 68 | 69 | renderer.create(); 70 | }); 71 | 72 | it('allows for updating queries from a mutation', (done) => { 73 | const mutation = gql` 74 | mutation createTodo { 75 | createTodo { id, text, completed } 76 | } 77 | `; 78 | 79 | const mutationData = { 80 | createTodo: { 81 | id: '99', 82 | text: 'This one was created with a mutation.', 83 | completed: true, 84 | }, 85 | }; 86 | 87 | const optimisticResponse = { 88 | createTodo: { 89 | id: '99', 90 | text: 'Optimistically generated', 91 | completed: true, 92 | }, 93 | }; 94 | 95 | const updateQueries = { 96 | todos: (previousQueryResult, { mutationResult, queryVariables }) => { 97 | if (queryVariables.id !== '123') { 98 | // this isn't the query we updated, so just return the previous result 99 | return previousQueryResult; 100 | } 101 | // otherwise, create a new object with the same shape as the 102 | // previous result with the mutationResult incorporated 103 | const originalList = previousQueryResult.todo_list; 104 | const newTask = mutationResult.data.createTodo; 105 | return { 106 | todo_list: assign(originalList, { tasks: [...originalList.tasks, newTask] }), 107 | }; 108 | }, 109 | }; 110 | 111 | const query = gql` 112 | query todos($id: ID!) { 113 | todo_list(id: $id) { 114 | id, title, tasks { id, text, completed } 115 | } 116 | } 117 | `; 118 | 119 | const data = { 120 | todo_list: { id: '123', title: 'how to apollo', tasks: [] }, 121 | }; 122 | 123 | const networkInterface = mockNetworkInterface( 124 | { request: { query, variables: { id: '123' } }, result: { data } }, 125 | { request: { query: mutation }, result: { data: mutationData } } 126 | ); 127 | const client = new ApolloClient({ networkInterface, addTypename: false }); 128 | 129 | let count = 0; 130 | @graphql(query) 131 | @graphql(mutation, { options: () => ({ optimisticResponse, updateQueries }) }) 132 | class Container extends React.Component { 133 | componentWillReceiveProps(props) { 134 | if (!props.data.todo_list) return; 135 | if (!props.data.todo_list.tasks.length) { 136 | props.mutate() 137 | .then(result => { 138 | expect(result.data).toEqual(mutationData); 139 | }); 140 | 141 | const dataInStore = client.queryManager.getDataWithOptimisticResults(); 142 | expect(dataInStore['$ROOT_MUTATION.createTodo']).toEqual( 143 | optimisticResponse.createTodo 144 | ); 145 | return; 146 | } 147 | 148 | if (count === 0) { 149 | count ++; 150 | expect(props.data.todo_list.tasks).toEqual([optimisticResponse.createTodo]); 151 | } else if (count === 1) { 152 | expect(props.data.todo_list.tasks).toEqual([mutationData.createTodo]); 153 | done(); 154 | } 155 | } 156 | render() { 157 | return null; 158 | } 159 | }; 160 | 161 | renderer.create(); 162 | }); 163 | 164 | }); 165 | -------------------------------------------------------------------------------- /examples/react-native/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /examples/react-native/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.reactnative" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /src/server.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Children, ReactElement, ComponentClass, StatelessComponent } from 'react'; 3 | import * as ReactDOM from 'react-dom/server'; 4 | import ApolloClient, { ApolloQueryResult } from 'apollo-client'; 5 | const assign = require('object-assign'); 6 | 7 | 8 | export declare interface Context { 9 | client?: ApolloClient; 10 | store?: any; 11 | [key: string]: any; 12 | } 13 | 14 | export declare interface QueryTreeArgument { 15 | rootElement: ReactElement; 16 | rootContext?: Context; 17 | } 18 | 19 | export declare interface QueryResult { 20 | query: Promise>; 21 | element: ReactElement; 22 | context: Context; 23 | } 24 | 25 | // Recurse a React Element tree, running visitor on each element. 26 | // If visitor returns `false`, don't call the element's render function 27 | // or recurse into its child elements 28 | export function walkTree( 29 | element: ReactElement, 30 | context: Context, 31 | visitor: (element: ReactElement, instance: any, context: Context) => boolean | void, 32 | ) { 33 | const Component = element.type; 34 | // a stateless functional component or a class 35 | if (typeof Component === 'function') { 36 | const props = assign({}, Component.defaultProps, element.props); 37 | let childContext = context; 38 | let child; 39 | 40 | // Are we are a react class? 41 | // https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L66 42 | if (Component.prototype && Component.prototype.isReactComponent) { 43 | // typescript force casting since typescript doesn't have definitions for class 44 | // methods 45 | const _component = Component as any; 46 | const instance = new _component(props, context); 47 | // In case the user doesn't pass these to super in the constructor 48 | instance.props = instance.props || props; 49 | instance.context = instance.context || context; 50 | 51 | // Override setState to just change the state, not queue up an update. 52 | // (we can't do the default React thing as we aren't mounted "properly" 53 | // however, we don't need to re-render as well only support setState in 54 | // componentWillMount, which happens *before* render). 55 | instance.setState = (newState) => { 56 | instance.state = assign({}, instance.state, newState); 57 | }; 58 | 59 | // this is a poor man's version of 60 | // https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181 61 | if (instance.componentWillMount) { 62 | instance.componentWillMount(); 63 | } 64 | 65 | if (instance.getChildContext) { 66 | childContext = assign({}, context, instance.getChildContext()); 67 | } 68 | 69 | if (visitor(element, instance, context) === false) { 70 | return; 71 | } 72 | 73 | child = instance.render(); 74 | } else { // just a stateless functional 75 | if (visitor(element, null, context) === false) { 76 | return; 77 | } 78 | 79 | // typescript casting for stateless component 80 | const _component = Component as StatelessComponent; 81 | child = _component(props, context); 82 | } 83 | 84 | if (child) { 85 | walkTree(child, childContext, visitor); 86 | } 87 | } else { // a basic string or dom element, just get children 88 | if (visitor(element, null, context) === false) { 89 | return; 90 | } 91 | 92 | if (element.props && element.props.children) { 93 | Children.forEach(element.props.children, (child: any) => { 94 | if (child) { 95 | walkTree(child, context, visitor); 96 | } 97 | }); 98 | } 99 | } 100 | } 101 | 102 | function getQueriesFromTree( 103 | { rootElement, rootContext = {} }: QueryTreeArgument, fetchRoot: boolean = true, 104 | ): QueryResult[] { 105 | const queries = []; 106 | 107 | walkTree(rootElement, rootContext, (element, instance, context) => { 108 | 109 | const skipRoot = !fetchRoot && (element === rootElement); 110 | if (instance && typeof instance.fetchData === 'function' && !skipRoot) { 111 | const query = instance.fetchData(); 112 | if (query) { 113 | queries.push({ query, element, context }); 114 | 115 | // Tell walkTree to not recurse inside this component; we will 116 | // wait for the query to execute before attempting it. 117 | return false; 118 | } 119 | } 120 | }); 121 | 122 | return queries; 123 | } 124 | 125 | // XXX component Cache 126 | export function getDataFromTree(rootElement: ReactElement, rootContext: any = {}, fetchRoot: boolean = true): Promise { 127 | 128 | let queries = getQueriesFromTree({ rootElement, rootContext }, fetchRoot); 129 | 130 | // no queries found, nothing to do 131 | if (!queries.length) return Promise.resolve(); 132 | 133 | const errors = []; 134 | // wait on each query that we found, re-rendering the subtree when it's done 135 | const mappedQueries = queries.map(({ query, element, context }) => { 136 | // we've just grabbed the query for element, so don't try and get it again 137 | return ( 138 | query 139 | .then(_ => getDataFromTree(element, context, false)) 140 | .catch(e => errors.push(e)) 141 | ); 142 | }); 143 | 144 | // Run all queries. If there are errors, still wait for all queries to execute 145 | // so the caller can ignore them if they wish. See https://github.com/apollographql/react-apollo/pull/488#issuecomment-284415525 146 | return Promise.all(mappedQueries).then(_ => { 147 | if (errors.length > 0) { 148 | const error = errors.length === 1 149 | ? errors[0] 150 | : new Error(`${errors.length} errors were thrown when executing your GraphQL queries.`); 151 | error.queryErrors = errors; 152 | throw error; 153 | } 154 | }); 155 | } 156 | 157 | export function renderToStringWithData(component: ReactElement): Promise { 158 | return getDataFromTree(component) 159 | .then(() => ReactDOM.renderToString(component)); 160 | } 161 | 162 | export function cleanupApolloState(apolloState) { 163 | for (let queryId in apolloState.queries) { 164 | let fieldsToNotShip = ['minimizedQuery', 'minimizedQueryString']; 165 | for (let field of fieldsToNotShip) delete apolloState.queries[queryId][field]; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /.vscode/typings/react/react-addons-test-utils.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for React v0.14 (react-addons-test-utils) 2 | // Project: http://facebook.github.io/react/ 3 | // Definitions by: Asana , AssureSign , Microsoft 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped 5 | 6 | /// 7 | 8 | declare namespace __React { 9 | interface SyntheticEventData { 10 | altKey?: boolean; 11 | button?: number; 12 | buttons?: number; 13 | clientX?: number; 14 | clientY?: number; 15 | changedTouches?: TouchList; 16 | charCode?: boolean; 17 | clipboardData?: DataTransfer; 18 | ctrlKey?: boolean; 19 | deltaMode?: number; 20 | deltaX?: number; 21 | deltaY?: number; 22 | deltaZ?: number; 23 | detail?: number; 24 | getModifierState?(key: string): boolean; 25 | key?: string; 26 | keyCode?: number; 27 | locale?: string; 28 | location?: number; 29 | metaKey?: boolean; 30 | pageX?: number; 31 | pageY?: number; 32 | relatedTarget?: EventTarget; 33 | repeat?: boolean; 34 | screenX?: number; 35 | screenY?: number; 36 | shiftKey?: boolean; 37 | targetTouches?: TouchList; 38 | touches?: TouchList; 39 | view?: AbstractView; 40 | which?: number; 41 | } 42 | 43 | interface EventSimulator { 44 | (element: Element, eventData?: SyntheticEventData): void; 45 | (component: Component, eventData?: SyntheticEventData): void; 46 | } 47 | 48 | interface MockedComponentClass { 49 | new(): any; 50 | } 51 | 52 | class ShallowRenderer { 53 | getRenderOutput>(): E; 54 | getRenderOutput(): ReactElement; 55 | render(element: ReactElement, context?: any): void; 56 | unmount(): void; 57 | } 58 | 59 | namespace __Addons { 60 | namespace TestUtils { 61 | namespace Simulate { 62 | export var blur: EventSimulator; 63 | export var change: EventSimulator; 64 | export var click: EventSimulator; 65 | export var cut: EventSimulator; 66 | export var doubleClick: EventSimulator; 67 | export var drag: EventSimulator; 68 | export var dragEnd: EventSimulator; 69 | export var dragEnter: EventSimulator; 70 | export var dragExit: EventSimulator; 71 | export var dragLeave: EventSimulator; 72 | export var dragOver: EventSimulator; 73 | export var dragStart: EventSimulator; 74 | export var drop: EventSimulator; 75 | export var focus: EventSimulator; 76 | export var input: EventSimulator; 77 | export var keyDown: EventSimulator; 78 | export var keyPress: EventSimulator; 79 | export var keyUp: EventSimulator; 80 | export var mouseDown: EventSimulator; 81 | export var mouseEnter: EventSimulator; 82 | export var mouseLeave: EventSimulator; 83 | export var mouseMove: EventSimulator; 84 | export var mouseOut: EventSimulator; 85 | export var mouseOver: EventSimulator; 86 | export var mouseUp: EventSimulator; 87 | export var paste: EventSimulator; 88 | export var scroll: EventSimulator; 89 | export var submit: EventSimulator; 90 | export var touchCancel: EventSimulator; 91 | export var touchEnd: EventSimulator; 92 | export var touchMove: EventSimulator; 93 | export var touchStart: EventSimulator; 94 | export var wheel: EventSimulator; 95 | } 96 | 97 | export function renderIntoDocument( 98 | element: DOMElement): Element; 99 | export function renderIntoDocument

( 100 | element: ReactElement

): Component; 101 | export function renderIntoDocument>( 102 | element: ReactElement): C; 103 | 104 | export function mockComponent( 105 | mocked: MockedComponentClass, mockTagName?: string): typeof TestUtils; 106 | 107 | export function isElementOfType( 108 | element: ReactElement, type: ReactType): boolean; 109 | export function isDOMComponent(instance: ReactInstance): boolean; 110 | export function isCompositeComponent(instance: ReactInstance): boolean; 111 | export function isCompositeComponentWithType( 112 | instance: ReactInstance, 113 | type: ComponentClass): boolean; 114 | 115 | export function findAllInRenderedTree( 116 | root: Component, 117 | fn: (i: ReactInstance) => boolean): ReactInstance[]; 118 | 119 | export function scryRenderedDOMComponentsWithClass( 120 | root: Component, 121 | className: string): Element[]; 122 | export function findRenderedDOMComponentWithClass( 123 | root: Component, 124 | className: string): Element; 125 | 126 | export function scryRenderedDOMComponentsWithTag( 127 | root: Component, 128 | tagName: string): Element[]; 129 | export function findRenderedDOMComponentWithTag( 130 | root: Component, 131 | tagName: string): Element; 132 | 133 | export function scryRenderedComponentsWithType

( 134 | root: Component, 135 | type: ComponentClass

): Component[]; 136 | export function scryRenderedComponentsWithType>( 137 | root: Component, 138 | type: ComponentClass): C[]; 139 | 140 | export function findRenderedComponentWithType

( 141 | root: Component, 142 | type: ComponentClass

): Component; 143 | export function findRenderedComponentWithType>( 144 | root: Component, 145 | type: ComponentClass): C; 146 | 147 | export function createRenderer(): ShallowRenderer; 148 | } 149 | } 150 | } 151 | 152 | declare module "react-addons-test-utils" { 153 | import TestUtils = __React.__Addons.TestUtils; 154 | export = TestUtils; 155 | } 156 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/queries/updateQuery.test.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import * as React from 'react'; 4 | import * as PropTypes from 'prop-types'; 5 | import * as ReactDOM from 'react-dom'; 6 | import * as renderer from 'react-test-renderer'; 7 | import { mount } from 'enzyme'; 8 | import gql from 'graphql-tag'; 9 | import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client'; 10 | import { NetworkInterface } from 'apollo-client'; 11 | import { connect } from 'react-redux'; 12 | import { withState } from 'recompose'; 13 | 14 | declare function require(name: string); 15 | 16 | import { mockNetworkInterface } from '../../../../../src/test-utils'; 17 | import { ApolloProvider, graphql} from '../../../../../src'; 18 | 19 | // XXX: this is also defined in apollo-client 20 | // I'm not sure why mocha doesn't provide something like this, you can't 21 | // always use promises 22 | const wrap = (done: Function, cb: (...args: any[]) => any) => (...args: any[]) => { 23 | try { 24 | return cb(...args); 25 | } catch (e) { 26 | done(e); 27 | } 28 | }; 29 | 30 | function wait(ms) { 31 | return new Promise(resolve => setTimeout(() => resolve(), ms)); 32 | } 33 | 34 | describe('[queries] updateQuery', () => { 35 | 36 | // updateQuery 37 | it('exposes updateQuery as part of the props api', (done) => { 38 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 39 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 40 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 41 | const client = new ApolloClient({ networkInterface, addTypename: false }); 42 | 43 | @graphql(query) 44 | class Container extends React.Component { 45 | componentWillReceiveProps({ data }) { // tslint:disable-line 46 | expect(data.updateQuery).toBeTruthy(); 47 | expect(data.updateQuery instanceof Function).toBe(true); 48 | try { 49 | data.updateQuery(() => done()); 50 | } catch (error) { 51 | // fail 52 | } 53 | } 54 | render() { 55 | return null; 56 | } 57 | }; 58 | 59 | renderer.create(); 60 | }); 61 | 62 | it('exposes updateQuery as part of the props api during componentWillMount', (done) => { 63 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 64 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 65 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 66 | const client = new ApolloClient({ networkInterface, addTypename: false }); 67 | 68 | @graphql(query) 69 | class Container extends React.Component { 70 | componentWillMount() { // tslint:disable-line 71 | expect(this.props.data.updateQuery).toBeTruthy() 72 | expect(this.props.data.updateQuery instanceof Function).toBe(true); 73 | done(); 74 | } 75 | render() { 76 | return null; 77 | } 78 | }; 79 | 80 | renderer.create(); 81 | }); 82 | 83 | it('updateQuery throws if called before data has returned', (done) => { 84 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 85 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 86 | const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); 87 | const client = new ApolloClient({ networkInterface, addTypename: false }); 88 | 89 | @graphql(query) 90 | class Container extends React.Component { 91 | componentWillMount() { // tslint:disable-line 92 | expect(this.props.data.updateQuery).toBeTruthy(); 93 | expect(this.props.data.updateQuery instanceof Function).toBe(true); 94 | try { 95 | this.props.data.updateQuery(); 96 | done(); 97 | } catch (e) { 98 | expect(e.toString()).toMatch(/ObservableQuery with this id doesn't exist:/); 99 | done(); 100 | } 101 | } 102 | render() { 103 | return null; 104 | } 105 | }; 106 | 107 | renderer.create(); 108 | }); 109 | 110 | it('allows updating query results after query has finished (early binding)', (done) => { 111 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 112 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 113 | const data2 = { allPeople: { people: [ { name: 'Leia Skywalker' } ] } }; 114 | const networkInterface = mockNetworkInterface( 115 | { request: { query }, result: { data } }, 116 | { request: { query }, result: { data: data2 } } 117 | ); 118 | const client = new ApolloClient({ networkInterface, addTypename: false }); 119 | 120 | let isUpdated; 121 | @graphql(query) 122 | class Container extends React.Component { 123 | public updateQuery: any; 124 | componentWillMount() { 125 | this.updateQuery = this.props.data.updateQuery; 126 | } 127 | componentWillReceiveProps(props) { 128 | if (isUpdated) { 129 | expect(props.data.allPeople).toEqual(data2.allPeople); 130 | done(); 131 | return; 132 | } else { 133 | isUpdated = true; 134 | this.updateQuery((prev) => { 135 | return data2; 136 | }); 137 | } 138 | } 139 | render() { 140 | return null; 141 | } 142 | }; 143 | 144 | renderer.create(); 145 | }); 146 | 147 | it('allows updating query results after query has finished', (done) => { 148 | const query = gql`query people { allPeople(first: 1) { people { name } } }`; 149 | const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; 150 | const data2 = { allPeople: { people: [ { name: 'Leia Skywalker' } ] } }; 151 | const networkInterface = mockNetworkInterface( 152 | { request: { query }, result: { data } }, 153 | { request: { query }, result: { data: data2 } } 154 | ); 155 | const client = new ApolloClient({ networkInterface, addTypename: false }); 156 | 157 | let isUpdated; 158 | @graphql(query) 159 | class Container extends React.Component { 160 | componentWillReceiveProps(props) { 161 | if (isUpdated) { 162 | expect(props.data.allPeople).toEqual(data2.allPeople); 163 | done(); 164 | return; 165 | } else { 166 | isUpdated = true; 167 | props.data.updateQuery((prev) => { 168 | return data2; 169 | }); 170 | } 171 | } 172 | render() { 173 | return null; 174 | } 175 | }; 176 | 177 | renderer.create(); 178 | }); 179 | 180 | }); 181 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [React Apollo](http://dev.apollodata.com/react/) [![npm version](https://badge.fury.io/js/react-apollo.svg)](https://badge.fury.io/js/react-apollo) [![Get on Slack](https://img.shields.io/badge/slack-join-orange.svg)](http://www.apollostack.com/#slack) 2 | 3 | React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to server side render. 4 | 5 | React Apollo unlike many other tools in the React ecosystem requires _no_ complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with React immeadiately. React Apollo works out of the box with both [`create-react-app`][] and [React Native][] with a single install and with no extra hassle configuring Babel or other JavaScript tools. 6 | 7 | [`create-react-app`]: https://github.com/facebookincubator/create-react-app 8 | [React Native]: http://facebook.github.io/react-native 9 | 10 | React Apollo is: 11 | 12 | 1. **Incrementally adoptable**, so that you can drop it into an existing JavaScript app and start using GraphQL for just part of your UI. 13 | 2. **Universally compatible**, so that Apollo works with any build setup, any GraphQL server, and any GraphQL schema. 14 | 2. **Simple to get started with**, you can start loading data right away and learn about advanced features later. 15 | 3. **Inspectable and understandable**, so that you can have great developer tools to understand exactly what is happening in your app. 16 | 4. **Built for interactive apps**, so your users can make changes and see them reflected in the UI immediately. 17 | 4. **Small and flexible**, so you don't get stuff you don't need. The core is under 25kb compressed. 18 | 5. **Community driven**, Apollo is driven by the community and serves a variety of use cases. Everything is planned and developed in the open. 19 | 20 | Get started today on the app you’ve been dreaming of, and let React Apollo take you to the moon! 21 | 22 | ## Installation 23 | 24 | It is simple to install React Apollo. 25 | 26 | ```bash 27 | npm install react-apollo --save 28 | ``` 29 | 30 | That’s it! You may now use React Apollo in any of your React environments. 31 | 32 | For an amazing developer experience you may also install the [Apollo Client Developer tools for Chrome][] which will give you inspectability into your React Apollo data. 33 | 34 | [Apollo Client Developer tools for Chrome]: https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm 35 | 36 | ## Usage 37 | 38 | To get started you will first want to create an instance of [`ApolloClient`][] and then you will want to provide that client to your React component tree using the [``][] component. Finally, we will show you a basic example of connecting your GraphQL data to your React components with the [`graphql()`][] enhancer function. 39 | 40 | First we want an instance of [`ApolloClient`][]. We can import the class from `react-apollo` and construct it like so: 41 | 42 | ```js 43 | import { ApolloClient } from 'react-apollo'; 44 | 45 | const client = new ApolloClient(); 46 | ``` 47 | 48 | This will create a new client that you can use for all of your GraphQL data fetching needs, but most of the time you will also want to create your own custom network interface. By default Apollo Client guesses that your GraphQL API lives at `/graphql`, but this is not always the case. To use your own network interface you may call the [`createNetworkInterface`][] function: 49 | 50 | ```js 51 | import { ApolloClient, createNetworkInterface } from 'react-apollo'; 52 | 53 | const client = new ApolloClient({ 54 | networkInterface: createNetworkInterface({ 55 | uri: 'https://graphql.example.com', 56 | }), 57 | }); 58 | ``` 59 | 60 | Replace `https://graphql.example.com` with your GraphQL API’s URL to connect to your API. 61 | 62 | Next you will want to add a [``][] component to the root of your React component tree. This component works almost the same as the [`` component in `react-redux`][]. In fact if you pass a `store` prop into [``][] it will also serve as a provider for `react-redux`! To use an [``][] with your newly constructed client see the following: 63 | 64 | ```js 65 | import { ApolloProvider } from 'react-apollo'; 66 | 67 | ReactDOM.render( 68 | 69 | 70 | , 71 | document.getElementById('root'), 72 | ); 73 | ``` 74 | 75 | Now you may create components in this React tree that are connected to your GraphQL API. 76 | 77 | Finally, to demonstrate the power of React Apollo in building interactive UIs let us connect one of your component’s to your GraphQL server using the [`graphql()`][] component enhancer: 78 | 79 | ```js 80 | import { gql, graphql } from 'react-apollo'; 81 | 82 | function TodoApp({ data: { todos, refetch } }) { 83 | return ( 84 |

85 | 88 |
    89 | {todos.map(todo => ( 90 |
  • 91 | {todo.text} 92 |
    • 93 | ))} 94 |
95 |
96 | ); 97 | } 98 | 99 | export default graphql(gql` 100 | query TodoAppQuery { 101 | todos { 102 | id 103 | text 104 | } 105 | } 106 | `)(TodoApp); 107 | ``` 108 | 109 | With that your `` component is now connected to your GraphQL API. Whenever some other component modifies the data in your cache, this component will automatically be updated with the new data. 110 | 111 | To learn more about querying with React Apollo be sure to start reading the [documentation article on Queries][]. If you would like to see all of the features React Apollo supports be sure to check out the [complete API reference][]. 112 | 113 | There is also an excellent [**Full-stack React + GraphQL Tutorial**][] on the Apollo developer blog. 114 | 115 | [`ApolloClient`]: http://dev.apollodata.com/core/apollo-client-api.html#apollo-client 116 | [``]: http://dev.apollodata.com/react/api.html#ApolloProvider 117 | [`graphql()`]: http://dev.apollodata.com/react/api.html#graphql 118 | [`createNetworkInterface`]: http://dev.apollodata.com/core/network.html 119 | [`` component in `react-redux`]: https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store 120 | [documentation article on Queries]: http://dev.apollodata.com/react/queries.html 121 | [complete API reference]: http://dev.apollodata.com/react/api.html 122 | [**Full-stack React + GraphQL Tutorial**]: https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b#.w8e9j7jmp 123 | [Learn Apollo]: https://www.learnapollo.com/ 124 | 125 | ## Documentation 126 | 127 | For a complete React Apollo API reference visit the documentation website at: [http://dev.apollodata.com/react/api.html](http://dev.apollodata.com/react/api.html) 128 | 129 | All of the documentation for React Apollo including usage articles and helpful recipes lives on: [http://dev.apollodata.com/react/](http://dev.apollodata.com/react/) 130 | 131 | ### Recipes 132 | 133 | - [Authentication](http://dev.apollodata.com/react/auth.html) 134 | - [Pagination](http://dev.apollodata.com/react/pagination.html) 135 | - [Optimistic UI](http://dev.apollodata.com/react/optimistic-ui.html) 136 | - [Server Side Rendering](http://dev.apollodata.com/react/server-side-rendering.html) 137 | -------------------------------------------------------------------------------- /src/test-utils.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import ApolloClient from 'apollo-client'; 3 | 4 | import { 5 | NetworkInterface, 6 | Request, 7 | SubscriptionNetworkInterface, 8 | } from 'apollo-client'; 9 | 10 | import { 11 | ExecutionResult, 12 | DocumentNode, 13 | } from 'graphql'; 14 | 15 | import { print } from 'graphql'; 16 | 17 | 18 | import ApolloProvider from './ApolloProvider'; 19 | 20 | export class MockedProvider extends React.Component { 21 | private client: any; 22 | 23 | constructor(props, context) { 24 | super(props, context); 25 | if (this.props.client) return; 26 | 27 | const networkInterface = mockNetworkInterface.apply(null, this.props.mocks); 28 | this.client = new ApolloClient({ networkInterface }); 29 | } 30 | 31 | render() { 32 | return ( 33 | 34 | {this.props.children} 35 | 36 | ); 37 | } 38 | } 39 | 40 | export class MockedSubscriptionProvider extends React.Component { 41 | private client: any; 42 | 43 | constructor(props, context) { 44 | super(props, context); 45 | 46 | const networkInterface = mockSubscriptionNetworkInterface( 47 | this.props.subscriptions, ...this.props.responses, 48 | ); 49 | 50 | this.client = new ApolloClient({ networkInterface }); 51 | } 52 | 53 | render() { 54 | return ( 55 | 56 | {this.props.children} 57 | 58 | ); 59 | } 60 | } 61 | 62 | // Pass in multiple mocked responses, so that you can test flows that end up 63 | // making multiple queries to the server 64 | export function mockNetworkInterface( 65 | ...mockedResponses: MockedResponse[], 66 | ): NetworkInterface { 67 | return new MockNetworkInterface(...mockedResponses); 68 | } 69 | 70 | export function mockSubscriptionNetworkInterface( 71 | mockedSubscriptions: MockedSubscription[], ...mockedResponses: MockedResponse[], 72 | ): MockSubscriptionNetworkInterface { 73 | return new MockSubscriptionNetworkInterface(mockedSubscriptions, ...mockedResponses); 74 | } 75 | 76 | export interface ParsedRequest { 77 | variables?: Object; 78 | query?: DocumentNode; 79 | debugName?: string; 80 | } 81 | 82 | export interface MockedResponse { 83 | request: ParsedRequest; 84 | result?: ExecutionResult; 85 | error?: Error; 86 | delay?: number; 87 | newData?: () => any; 88 | } 89 | 90 | export interface MockedSubscriptionResult { 91 | result?: ExecutionResult; 92 | error?: Error; 93 | delay?: number; 94 | } 95 | 96 | export interface MockedSubscription { 97 | request: ParsedRequest; 98 | results?: MockedSubscriptionResult[]; 99 | id?: number; 100 | } 101 | 102 | export class MockNetworkInterface implements NetworkInterface { 103 | private mockedResponsesByKey: { [key: string]: MockedResponse[] } = {}; 104 | 105 | constructor(...mockedResponses: MockedResponse[]) { 106 | mockedResponses.forEach((mockedResponse) => { 107 | if (!mockedResponse.result && !mockedResponse.error) { 108 | throw new Error('Mocked response should contain either result or error.'); 109 | } 110 | this.addMockedResponse(mockedResponse); 111 | }); 112 | } 113 | 114 | public addMockedResponse(mockedResponse: MockedResponse) { 115 | const key = requestToKey(mockedResponse.request); 116 | let mockedResponses = this.mockedResponsesByKey[key]; 117 | if (!mockedResponses) { 118 | mockedResponses = []; 119 | this.mockedResponsesByKey[key] = mockedResponses; 120 | } 121 | mockedResponses.push(mockedResponse); 122 | } 123 | 124 | public query(request: Request) { 125 | return new Promise((resolve, reject) => { 126 | const parsedRequest: ParsedRequest = { 127 | query: request.query, 128 | variables: request.variables, 129 | debugName: request.debugName, 130 | }; 131 | 132 | const key = requestToKey(parsedRequest); 133 | 134 | if (!this.mockedResponsesByKey[key] || this.mockedResponsesByKey[key].length === 0) { 135 | throw new Error('No more mocked responses for the query: ' + print(request.query)); 136 | } 137 | 138 | const original = [...this.mockedResponsesByKey[key]]; 139 | const { result, error, delay, newData } = this.mockedResponsesByKey[key].shift() || {} as any; 140 | 141 | if (newData) { 142 | original[0].result = newData(); 143 | this.mockedResponsesByKey[key].push(original[0]); 144 | } 145 | 146 | if (!result && !error) { 147 | throw new Error(`Mocked response should contain either result or error: ${key}`); 148 | } 149 | 150 | setTimeout(() => { 151 | if (error) return reject(error); 152 | return resolve(result); 153 | }, delay ? delay : 1); 154 | }); 155 | } 156 | } 157 | 158 | export class MockSubscriptionNetworkInterface extends MockNetworkInterface implements SubscriptionNetworkInterface { 159 | public mockedSubscriptionsByKey: { [key: string ]: MockedSubscription[] } = {}; 160 | public mockedSubscriptionsById: { [id: number]: MockedSubscription} = {}; 161 | public handlersById: {[id: number]: (error: any, result: any) => void} = {}; 162 | public subId: number; 163 | 164 | constructor(mockedSubscriptions: MockedSubscription[], ...mockedResponses: MockedResponse[]) { 165 | super(...mockedResponses); 166 | this.subId = 0; 167 | mockedSubscriptions.forEach((sub) => { 168 | this.addMockedSubscription(sub); 169 | }); 170 | } 171 | public generateSubscriptionId() { 172 | const requestId = this.subId; 173 | this.subId++; 174 | return requestId; 175 | } 176 | 177 | public addMockedSubscription(mockedSubscription: MockedSubscription) { 178 | const key = requestToKey(mockedSubscription.request); 179 | if (mockedSubscription.id === undefined) { 180 | mockedSubscription.id = this.generateSubscriptionId(); 181 | } 182 | 183 | let mockedSubs = this.mockedSubscriptionsByKey[key]; 184 | if (!mockedSubs) { 185 | mockedSubs = []; 186 | this.mockedSubscriptionsByKey[key] = mockedSubs; 187 | } 188 | mockedSubs.push(mockedSubscription); 189 | } 190 | 191 | public subscribe(request: Request, handler: (error: any, result: any) => void): number { 192 | const parsedRequest: ParsedRequest = { 193 | query: request.query, 194 | variables: request.variables, 195 | debugName: request.debugName, 196 | }; 197 | const key = requestToKey(parsedRequest); 198 | if (this.mockedSubscriptionsByKey.hasOwnProperty(key)) { 199 | const subscription = this.mockedSubscriptionsByKey[key].shift(); 200 | this.handlersById[subscription.id] = handler; 201 | this.mockedSubscriptionsById[subscription.id] = subscription; 202 | return subscription.id; 203 | } else { 204 | throw new Error('Network interface does not have subscription associated with this request.'); 205 | } 206 | 207 | } 208 | 209 | public fireResult(id: number) { 210 | const handler = this.handlersById[id]; 211 | if (this.mockedSubscriptionsById.hasOwnProperty(id.toString())) { 212 | const subscription = this.mockedSubscriptionsById[id]; 213 | if (subscription.results.length === 0) { 214 | throw new Error(`No more mocked subscription responses for the query: ` + 215 | `${print(subscription.request.query)}, variables: ${JSON.stringify(subscription.request.variables)}`); 216 | } 217 | const response = subscription.results.shift(); 218 | setTimeout(() => { 219 | handler(response.error, response.result); 220 | }, response.delay ? response.delay : 0); 221 | } else { 222 | throw new Error('Network interface does not have subscription associated with this id.'); 223 | } 224 | } 225 | 226 | public unsubscribe(id: number) { 227 | delete this.mockedSubscriptionsById[id]; 228 | } 229 | } 230 | 231 | function requestToKey(request: ParsedRequest): string { 232 | const queryString = request.query && print(request.query); 233 | return JSON.stringify({ 234 | variables: request.variables || {}, 235 | debugName: request.debugName, 236 | query: queryString, 237 | }); 238 | } 239 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Apollo Contributor Guide 2 | 3 | Excited about Apollo and want to make it better? We’re excited too! 4 | 5 | Apollo is a community of developers just like you, striving to create the best tools and libraries around GraphQL. We welcome anyone who wants to contribute or provide constructive feedback, no matter the age or level of experience. If you want to help but don't know where to start, let us know, and we'll find something for you. 6 | 7 | Oh, and if you haven't already, sign up for the [Apollo Slack](http://www.apollodata.com/#slack). 8 | 9 | Here are some ways to contribute to the project, from easiest to most difficult: 10 | 11 | * [Reporting bugs](#reporting-bugs) 12 | * [Improving the documentation](#improving-the-documentation) 13 | * [Responding to issues](#responding-to-issues) 14 | * [Small bug fixes](#small-bug-fixes) 15 | * [Suggesting features](#suggesting-features) 16 | * [Big pull requests](#big-prs) 17 | 18 | ## Issues 19 | 20 | ### Reporting bugs 21 | 22 | If you encounter a bug, please file an issue on GitHub via the repository of the sub-project you think contains the bug. If an issue you have is already reported, please add additional information or add a 👍 reaction to indicate your agreement. 23 | 24 | While we will try to be as helpful as we can on any issue reported, please include the following to maximize the chances of a quick fix: 25 | 26 | 1. **Intended outcome:** What you were trying to accomplish when the bug occurred, and as much code as possible related to the source of the problem. 27 | 2. **Actual outcome:** A description of what actually happened, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. Please avoid non-specific phrases like “didn’t work” or “broke”. 28 | 3. **How to reproduce the issue:** Instructions for how the issue can be reproduced by a maintainer or contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be. 29 | 30 | Creating a good reproduction really helps contributors investigate and resolve your issue quickly. In many cases, the act of creating a minimal reproduction illuminates that the source of the bug was somewhere outside the library in question, saving time and effort for everyone. 31 | 32 | ### Improving the documentation 33 | 34 | Improving the documentation, examples, and other open source content can be the easiest way to contribute to the library. If you see a piece of content that can be better, open a PR with an improvement, no matter how small! If you would like to suggest a big change or major rewrite, we’d love to hear your ideas but please open an issue for discussion before writing the PR. 35 | 36 | ### Responding to issues 37 | 38 | In addition to reporting issues, a great way to contribute to Apollo is to respond to other peoples' issues and try to identify the problem or help them work around it. If you’re interested in taking a more active role in this process, please go ahead and respond to issues. And don't forget to say "Hi" on Apollo Slack! 39 | 40 | ### Small bug fixes 41 | 42 | For a small bug fix change (less than 20 lines of code changed), feel free to open a pull request. We’ll try to merge it as fast as possible and ideally publish a new release on the same day. The only requirement is, make sure you also add a test that verifies the bug you are trying to fix. 43 | 44 | ### Suggesting features 45 | 46 | Most of the features in Apollo came from suggestions by you, the community! We welcome any ideas about how to make Apollo better for your use case. Unless there is overwhelming demand for a feature, it might not get implemented immediately, but please include as much information as possible that will help people have a discussion about your proposal: 47 | 48 | 1. **Use case:** What are you trying to accomplish, in specific terms? Often, there might already be a good way to do what you need and a new feature is unnecessary, but it’s hard to know without information about the specific use case. 49 | 2. **Could this be a plugin?** In many cases, a feature might be too niche to be included in the core of a library, and is better implemented as a companion package. If there isn’t a way to extend the library to do what you want, could we add additional plugin APIs? It’s important to make the case for why a feature should be part of the core functionality of the library. 50 | 3. **Is there a workaround?** Is this a more convenient way to do something that is already possible, or is there some blocker that makes a workaround unfeasible? 51 | 52 | Feature requests will be labeled as such, and we encourage using GitHub issues as a place to discuss new features and possible implementation designs. Please refrain from submitting a pull request to implement a proposed feature until there is consensus that it should be included. This way, you can avoid putting in work that can’t be merged in. 53 | 54 | Once there is a consensus on the need for a new feature, proceed as listed below under “Big PRs”. 55 | 56 | ## Big PRs 57 | 58 | This includes: 59 | 60 | - Big bug fixes 61 | - New features 62 | 63 | For significant changes to a repository, it’s important to settle on a design before starting on the implementation. This way, we can make sure that major improvements get the care and attention they deserve. Since big changes can be risky and might not always get merged, it’s good to reduce the amount of possible wasted effort by agreeing on an implementation design/plan first. 64 | 65 | 1. **Open an issue.** Open an issue about your bug or feature, as described above. 66 | 2. **Reach consensus.** Some contributors and community members should reach an agreement that this feature or bug is important, and that someone should work on implementing or fixing it. 67 | 3. **Agree on intended behavior.** On the issue, reach an agreement about the desired behavior. In the case of a bug fix, it should be clear what it means for the bug to be fixed, and in the case of a feature, it should be clear what it will be like for developers to use the new feature. 68 | 4. **Agree on implementation plan.** Write a plan for how this feature or bug fix should be implemented. What modules need to be added or rewritten? Should this be one pull request or multiple incremental improvements? Who is going to do each part? 69 | 5. **Submit PR.** In the case where multiple dependent patches need to be made to implement the change, only submit one at a time. Otherwise, the others might get stale while the first is reviewed and merged. Make sure to avoid “while we’re here” type changes - if something isn’t relevant to the improvement at hand, it should be in a separate PR; this especially includes code style changes of unrelated code. 70 | 6. **Review.** At least one core contributor should sign off on the change before it’s merged. Look at the “code review” section below to learn about factors are important in the code review. If you want to expedite the code being merged, try to review your own code first! 71 | 7. **Merge and release!** 72 | 73 | ### Code review guidelines 74 | 75 | It’s important that every piece of code in Apollo packages is reviewed by at least one core contributor familiar with that codebase. Here are some things we look for: 76 | 77 | 1. **Required CI checks pass.** This is a prerequisite for the review, and it is the PR author's responsibility. As long as the tests don’t pass, the PR won't get reviewed. 78 | 2. **Simplicity.** Is this the simplest way to achieve the intended goal? If there are too many files, redundant functions, or complex lines of code, suggest a simpler way to do the same thing. In particular, avoid implementing an overly general solution when a simple, small, and pragmatic fix will do. 79 | 3. **Testing.** Do the tests ensure this code won’t break when other stuff changes around it? When it does break, will the tests added help us identify which part of the library has the problem? Did we cover an appropriate set of edge cases? Look at the test coverage report if there is one. Are all significant code paths in the new code exercised at least once? 80 | 4. **No unnecessary or unrelated changes.** PRs shouldn’t come with random formatting changes, especially in unrelated parts of the code. If there is some refactoring that needs to be done, it should be in a separate PR from a bug fix or feature, if possible. 81 | 5. **Code has appropriate comments.** Code should be commented, or written in a clear “self-documenting” way. 82 | 6. **Idiomatic use of the language.** In TypeScript, make sure the typings are specific and correct. In ES2015, make sure to use imports rather than require and const instead of var, etc. Ideally a linter enforces a lot of this, but use your common sense and follow the style of the surrounding code. 83 | -------------------------------------------------------------------------------- /test/react-web/client/graphql/subscriptions.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as renderer from 'react-test-renderer'; 3 | import gql from 'graphql-tag'; 4 | 5 | import ApolloClient from 'apollo-client'; 6 | import { ApolloError } from 'apollo-client/errors'; 7 | 8 | declare function require(name: string); 9 | 10 | import { mockSubscriptionNetworkInterface } from '../../../../src/test-utils'; 11 | import { ApolloProvider, graphql } from '../../../../src'; 12 | 13 | 14 | 15 | describe('subscriptions', () => { 16 | const results = ['James Baxley', 'John Pinkerton', 'Sam Clairidge', 'Ben Coleman'].map( 17 | name => ({ result: { user: { name } }, delay: 10 }) 18 | ); 19 | 20 | it('binds a subscription to props', () => { 21 | const query = gql`subscription UserInfo { user { name } }`; 22 | const networkInterface = mockSubscriptionNetworkInterface( 23 | [{ request: { query }, results: [...results] }] 24 | ); 25 | const client = new ApolloClient({ networkInterface, addTypename: false }); 26 | // XXX fix in apollo-client 27 | client.subscribe = client.subscribe.bind(client); 28 | 29 | const ContainerWithData = graphql(query)(({ data }) => { // tslint:disable-line 30 | expect(data).toBeTruthy(); 31 | expect(data.ownProps).toBeFalsy(); 32 | expect(data.loading).toBe(true); 33 | return null; 34 | }); 35 | 36 | const output = renderer.create(); 37 | output.unmount(); 38 | }); 39 | 40 | it('includes the variables in the props', () => { 41 | const query = gql`subscription UserInfo($name: String){ user(name: $name){ name } }`; 42 | const variables = { name: 'James Baxley' }; 43 | const networkInterface = mockSubscriptionNetworkInterface( 44 | [{ request: { query, variables }, results: [...results] }] 45 | ); 46 | const client = new ApolloClient({ networkInterface, addTypename: false }); 47 | // XXX fix in apollo-client 48 | client.subscribe = client.subscribe.bind(client); 49 | 50 | const ContainerWithData = graphql(query)(({ data }) => { // tslint:disable-line 51 | expect(data).toBeTruthy(); 52 | expect(data.variables).toEqual(variables); 53 | return null; 54 | }); 55 | 56 | const output = renderer.create( 57 | 58 | ); 59 | output.unmount(); 60 | }); 61 | 62 | it('does not swallow children errors', () => { 63 | const query = gql`subscription UserInfo { user { name } }`; 64 | const networkInterface = mockSubscriptionNetworkInterface( 65 | [{ request: { query }, results: [...results] }] 66 | ); 67 | const client = new ApolloClient({ networkInterface, addTypename: false }); 68 | // XXX fix in apollo-client 69 | client.subscribe = client.subscribe.bind(client); 70 | 71 | let bar; 72 | const ContainerWithData = graphql(query)(() => { 73 | bar(); // this will throw 74 | return null; 75 | }); 76 | 77 | try { 78 | renderer.create(); 79 | throw new Error(); 80 | } catch (e) { 81 | expect(e.name).toMatch(/TypeError/); 82 | } 83 | 84 | }); 85 | 86 | it('executes a subscription', (done) => { 87 | const query = gql`subscription UserInfo { user { name } }`; 88 | const networkInterface = mockSubscriptionNetworkInterface( 89 | [{ request: { query }, results: [...results] }] 90 | ); 91 | const client = new ApolloClient({ networkInterface, addTypename: false }); 92 | // XXX fix in apollo-client 93 | client.subscribe = client.subscribe.bind(client); 94 | 95 | let count = 0; 96 | let output; 97 | @graphql(query) 98 | class Container extends React.Component { 99 | componentWillMount(){ 100 | expect(this.props.data.loading).toBeTruthy(); 101 | } 102 | componentWillReceiveProps({ data: { loading, user }}) { 103 | expect(loading).toBeFalsy(); 104 | if (count === 0) expect(user).toEqual(results[0].result.user); 105 | if (count === 1) expect(user).toEqual(results[1].result.user); 106 | if (count === 2) expect(user).toEqual(results[2].result.user); 107 | if (count === 3) { 108 | expect(user).toEqual(results[3].result.user); 109 | output.unmount(); 110 | done(); 111 | } 112 | count++; 113 | } 114 | render() { 115 | return null; 116 | } 117 | }; 118 | 119 | const interval = setInterval(() => { 120 | networkInterface.fireResult(0); 121 | if (count > 3) clearInterval(interval); 122 | }, 50); 123 | 124 | output = renderer.create( 125 | 126 | ); 127 | 128 | }); 129 | it('resubscribes to a subscription', (done) => { 130 | //we make an extra Hoc which will trigger the inner HoC to resubscribe 131 | //these are the results for the outer subscription 132 | const triggerResults = ['0', 'trigger resubscribe', '3', '4', '5', '6', '7'].map( 133 | trigger => ({ result: { trigger }, delay: 10 }) 134 | ); 135 | //These are the results fro the resubscription 136 | const results3 = ['NewUser: 1', 'NewUser: 2', 'NewUser: 3', 'NewUser: 4'].map( 137 | name => ({ result: { user: { name } }, delay: 10 }) 138 | ); 139 | 140 | 141 | const query = gql`subscription UserInfo { user { name } }`; 142 | const triggerQuery = gql`subscription Trigger { trigger }`; 143 | const networkInterface = mockSubscriptionNetworkInterface( 144 | [ 145 | { request: { query }, results: [...results] }, 146 | { request: { query: triggerQuery }, results: [...triggerResults] }, 147 | { request: { query }, results: [...results3] }, 148 | ] 149 | ); 150 | const client = new ApolloClient({ networkInterface, addTypename: false }); 151 | // XXX fix in apollo-client 152 | client.subscribe = client.subscribe.bind(client); 153 | 154 | let count = 0; 155 | let unsubscribed = false; 156 | let output; 157 | @graphql(triggerQuery) 158 | @graphql(query, { 159 | shouldResubscribe: (props, nextProps) => { 160 | return nextProps.data.trigger === 'trigger resubscribe'; 161 | } 162 | }) 163 | class Container extends React.Component { 164 | componentWillMount(){ 165 | expect(this.props.data.loading).toBeTruthy(); 166 | } 167 | componentWillReceiveProps({ data: { loading, user }}) { 168 | // odd counts will be outer wrapper getting subscriptions - ie unchanged 169 | expect(loading).toBeFalsy(); 170 | if (count === 0) expect(user).toEqual(results[0].result.user); 171 | if (count === 1) expect(user).toEqual(results[0].result.user); 172 | if (count === 2) expect(user).toEqual(results[1].result.user); 173 | if (count === 3) expect(user).toEqual(results[1].result.user); 174 | if (count <= 1) { 175 | expect(networkInterface.mockedSubscriptionsById[0]).toBeDefined(); 176 | } 177 | expect(networkInterface.mockedSubscriptionsById[1]).toBeDefined(); 178 | if (count === 2) { 179 | expect(networkInterface.mockedSubscriptionsById[0]).toBeDefined(); 180 | //expect(networkInterface.mockedSubscriptionsById[2]).toBeDefined(); 181 | } 182 | if (count === 3) { 183 | //it's resubscribed 184 | expect(networkInterface.mockedSubscriptionsById[0]).not.toBeDefined(); 185 | expect(networkInterface.mockedSubscriptionsById[2]).toBeDefined(); 186 | expect(user).toEqual(results[1].result.user); 187 | 188 | } 189 | if (count === 4) { 190 | //it's got result of new subscription 191 | expect(user).toEqual(results3[0].result.user); 192 | 193 | } 194 | if (count === 5) { 195 | expect(user).toEqual(results3[0].result.user); 196 | output.unmount(); 197 | expect(networkInterface.mockedSubscriptionsById[0]).not.toBeDefined(); 198 | expect(networkInterface.mockedSubscriptionsById[1]).not.toBeDefined(); 199 | expect(networkInterface.mockedSubscriptionsById[3]).not.toBeDefined(); 200 | done(); 201 | } 202 | 203 | count++; 204 | 205 | } 206 | render() { 207 | return null; 208 | } 209 | }; 210 | 211 | const interval = setInterval(() => { 212 | try { 213 | networkInterface.fireResult(count >2 ? 2 : 0 ); 214 | networkInterface.fireResult(1); 215 | }catch (ex) { 216 | clearInterval(interval) 217 | } 218 | if (count > 3) clearInterval(interval); 219 | }, 50); 220 | 221 | output = renderer.create( 222 | 223 | ); 224 | 225 | }); 226 | }); 227 | --------------------------------------------------------------------------------