GraphQL

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Thu Mar 09 2017 13:54:29 GMT-0500 (EST)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: GraphQL
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 19315a4f1338965062220254489a03d6
Keywords: 

My Notes
--------
How can I use GraphQL with Xholon?
Can I use it as an API that replaces or complements XholonJsApi.java?
GraphQL is an alternative to REST.

March 9, 2017
I created a GraphQL .js library that I can use with Xholon:
----------------------------------------------------------
cd ~/nodespace
mkdir graphql4browser
cd graphql4browser
npm init
npm install graphql --save
sudo npm install -g browserify

- create a file index.js in graphql4browser, containing the following one line:
window.graphql = require('./node_modules/graphql/index.js');

browserify index.js > graphqlBundle.js
- copy this file to gwtspace/Xholon/Xholon/src/org/public/lib
- compile Xholon (which will copy the .js library to gwtspace/Xholon/Xholon/war/xholon/lib

- create XholonGraphQL.html, containing:
<script src="xholon/lib/graphqlBundle.js"></script>

- load the Xholon Hello World app
- open the Google Developer Tools console, and paste in the following:
var schema = graphql.buildSchema(`
  type Query {
    hello: String
  }
`);

var root = {
  hello: () => {
    //return 'Hello world!';
    return xh.root().name();
  },
};

graphql.graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});


References
----------
(1) http://graphql.org/
    A query language for your API
    GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

(2) http://graphql.org/code/
    Many different programming languages support GraphQL. This list contains some of the more popular server-side frameworks, client libraries, and other useful stuff.
    GraphQL.js is the reference implementation of the GraphQL specification, designed for running GraphQL in a Node.js environment.
    There are also some GraphQL clients in JavaScript - Relay, Apollo Client, Lokka.
    

(3) http://dev.apollodata.com
    Apollo Client
    A flexible, fully-featured GraphQL client for every platform

(4) https://github.com/kadirahq/lokka
    Lokka
    Simple GraphQL client for JavaScript.
    Works on all the JavaScript environments including Browser, NodeJS and React Native.

(5) https://github.com/graphql/graphiql
    graphiql
    An in-browser IDE for exploring GraphQL.

(6) https://github.com/chentsulin/awesome-graphql
    Awesome list of GraphQL & Relay

(7) google: graphql parser javascript

(8) https://github.com/graphql/graphql-js
    A reference implementation of GraphQL for JavaScript http://graphql.org/graphql-js/
    GraphQL.js provides two important capabilities: building a type schema, and serving queries against that type schema.
    GraphQL is BSD-licensed. We also provide an additional patent grant.
    intended to work under Node.js

(9) http://graphql.org/graphql-js/language/
    The graphql/language module is responsible for parsing and operating on the GraphQL language.
    Source  Represents the input string to the GraphQL server
    Lexer  Lexes a GraphQL Source according to the GraphQL Grammar
    Parser  Parses a GraphQL Source according to the GraphQL Grammar
    Visitor  function visit  A general-purpose visitor to traverse a parsed GraphQL AST

]]></Notes> 

<_-.XholonClass>

  <!-- domain objects -->
  <PhysicalSystem/>
  <Block/>
  <Brick/>
  
  <!-- quantities -->
  <Height superClass="Quantity"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Block>
    <port name="height" connector="Height"/>
  </Block>
</xholonClassDetails>

<PhysicalSystem>
  <Block>
    <Height>0.1 m</Height>
  </Block>
  <Brick multiplicity="2"/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var a = 123;
  var b = 456;
  var c = a * b;
  if (console) {
    console.log(c);
  }
]]></Blockbehavior>

<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var myHeight, testing;
  var beh = {
    postConfigure: function() {
      testing = Math.floor(Math.random() * 10);
      myHeight = this.cnode.parent();
    },
    act: function() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
]]></Heightbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  $wnd.xh.Brickbehavior = function Brickbehavior() {}

  $wnd.xh.Brickbehavior.prototype.postConfigure = function() {
    this.brick = this.cnode.parent();
    this.iam = " red brick";
  };

  $wnd.xh.Brickbehavior.prototype.act = function() {
    this.brick.println("I am a" + this.iam);
  };
]]></Brickbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  console.log("I'm another brick behavior");
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>