Initial Commit

Initial Commit

.gitattributes

@@ -0,0 +1,9 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/css export-ignore
+/js export-ignore
+/tests export-ignore
+changelog.md export-ignore
+index.html export-ignore
+LICENSE export-ignore
+package.json export-ignore

LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Antony Thorpe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Readme.md

@@ -0,0 +1,119 @@
+# knockout-apollo
+A knockoutjs extension to connect to a GraphQL endpoint through an ApolloClient instance
+
+## Approach
+* Provide public access to the an instance of the ApolloClient class, as well as, ObservableQuery for the watchQuery/subscribe methods (not fully implemented yet)
+* Utilise the structure and loading features of [ko.plus](http://stevegreatrex.github.io/ko.plus/)
+
+## How it works
+Attaches additional methods to Observables/Observable Arrays via a [Custom Function](http://knockoutjs.com/documentation/fn.html).
+
+## Requirements
+* [Apollo Client](https://github.com/apollostack/apollo-client)
+* [GraphQL Tag](https://github.com/apollostack/graphql-tag)
+* [Knockout](http://knockoutjs.com)
+* [ko.plus](http://stevegreatrex.github.io/ko.plus/)
+* [jQuery](http://jquery.com)
+
+## Installation
+In the command line:
+```sh
+npm install --save apollo-client graphql-tag knockout knockout-apollo ko.plus jquery
+```
+
+## Getting Started
+```js
+// set the JavaScript template literal tag that parses GraphQL query strings into the standard GraphQL AST
+import gql from 'graphql-tag';
+
+// Create an ApolloClient
+var apolloClient = new ApolloClient({
+      networkInterface: createNetworkInterface({ uri: https://yourwebsite.net/graphql})
+});
+
+// Next initialise via a Custom Function
+this.yourObservable = ko.observable().launchApollo(apolloClient, errorCallback);
+
+// Now we are ready to make queries etc with Apollo.  Outline below:
+this.yourObservable.apollo({object for Apollo}, {object of callbacks});
+```
+
+## Query with Parameters
+Server-side, add the corresponding schema and resolver:
+```javascript
+export const schema = `
+type Query {
+  ping(message: String!): String
+}
+schema {
+  query: Query
+}
+`;
+
+export const resolvers = {
+  Query: {
+    ping(root, { message }, context) {
+      return `Answering ${message}`;
+    },
+  },
+};
+```
+And, client-side:
+```javascript
+var query = gql`query PingMessage($message: String!) {
+    ping(message: $message)
+}`;
+
+this.yourObservable.apollo(
+    {
+        query: query,
+        variables: {
+            message: 'Meow'
+        }
+    },
+    {
+        // callback when successful
+        resolve: function(data) {
+            console.log(data); //An ApolloQueryResult
+        },
+        // callback to report errors (optional)
+        reject: function(error) {
+            console.log(error);
+        },
+        always: function(){
+            // called for both success and failure (optional)
+        }
+    }
+);
+```
+
+## Templates
+Thanks to the `ko.plus` knockout plugin there are a couple of useful public observables.  A loading indicator can be used through `yourObservable.apollo.isRunning` and if failed through `yourObservable.apollo.failed`.  See [link](https://github.com/stevegreatrex/ko.plus/blob/master/README.md#example-implementation).
+
+## Error Callback
+The default is to console log the error.  For an alternative, provide a callback function as a second arguement to the `launchApollo` function when initialising (or you can simply pass it in with the call).
+
+## Example
+Under the example folder, is code modified from [Learn Apollo](https://www.learnapollo.com).  If you want to get this up and running:
+* start the `Learn Apollo` React tutorial until you get past the Getting Started section.  Note down the Apollo Client configuration.  You will need this for line 5 of `index.js`.
+* cd to exercise 6 and `npm install`
+* copy `index.html` and `index.js` from the example folder and replace the code in exercise 6
+* replace the `client` variable with the configuration noted above from `Learn Apollo`.
+* then `npm install --save graphql-tag knockout knockout-apollo ko.plus jquery knockoutcrud`
+* To launch a browser `npm start`
+Hope this works :)
+
+## Todo
+* build Apollo for the browser
+* watchQuery
+* subscriptions
+* tests
+
+## Support
+None sorry.
+
+## Change Log
+[File](changelog.md)
+
+## Licence
+[MIT](LICENCE)

changelog.md

@@ -0,0 +1,3 @@
+# Changelog of Knockout Apollo
+
+0.1.0 Initial commit - Queries and Mutations

example/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.png">
+    <title>Pokedex Knockout-Apollo App</title>
+  </head>
+  <body>
+    <div id="knockout">
+        <div class="w-100 bg-light-gray min-vh-100">
+            <h1 data-bind="visible: trainers.apollo.isRunning">Loading</h1>
+            <div data-bind="visible: !trainers.apollo.isRunning()" style="display:none">
+                <pokedex params="trainers: trainers"></pokedex>
+            </div>
+        </div>
+    </div>
+  </body>
+</html>