A graphql API for the gun p2p graph database
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__snapshots__
react
.babelrc
.gitignore
README.md
async.js
async.test.js
circle.yml
index.js
index.test.js
package.json
yarn.lock

README.md

██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗ ██████╗ ██╗            ██████╗ ██╗   ██╗███╗   ██╗
██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║██╔═══██╗██║           ██╔════╝ ██║   ██║████╗  ██║
██║  ███╗██████╔╝███████║██████╔╝███████║██║   ██║██║     █████╗██║  ███╗██║   ██║██╔██╗ ██║
██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║██║▄▄ ██║██║     ╚════╝██║   ██║██║   ██║██║╚██╗██║
╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║╚██████╔╝███████╗      ╚██████╔╝╚██████╔╝██║ ╚████║
 ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝ ╚══════╝       ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝

CircleCI daviddm Greenkeeper badge

Augmented query interface for the graph universal database http://gun.js.org/

npm install graphql-gun

With React

Say you want to attach offline first, realtime data to the Color component.

const gql = require("graphql-tag");
const Gun = require("gun");
const React = require("react");
const ReactDOM = require("react-dom");
const gun = Gun();
const { createContainer, graphqlGun } = require('graphql-gun/react')({React, gun});

const Color = ({color, data}) => (
  // data will be passed in by the container with all the data you asked for
  // component will also redraw when your subscriptions update
  <div style={{color}}>{JSON.stringify(data, null, 2)}</div>
)

You can use a relay inspired high order component to decorate it with live data:

let ColorContainer = createContainer(Color, {
  fragments: {
    data: gql`{
      fish @live {
        red {
          name
        }
        
        blue {
          _chain
        }
        
        friends(type: Set) {
          name
          favoriteColor
        }
      }
    }`
  }
});

...or if you prefer apollo client:

ColorContainer = graphqlGun(gql`{
  fish @live {
    red {
      name
    }
    
    blue {
      _chain
    }
    
    friends(type: Set) {
      name
      favoriteColor
    }
  }
}`)(Color);

Then just render like normal.

ReactDOM.render(
  <ColorContainer color={'blue'} />,
  document.getElementById('root')
);

Without React

Not using react?

You can use graphqlGun with a more traditional imperative approach:

const graphqlGun = require('graphql-gun');
const Gun = require('gun');
const gql = require('graphql-tag')

const gun = Gun();

const fish = gun.get('fish');
fish.put({red: {name: 'Frank'}});
fish.put({blue: {name: 'John'}});
const friends = fish.get('friends');
const dori = fish.get('dori')
const martin = fish.get('martin')
const nemo = fish.get('nemo')
dori.put({ name: 'Dori', favoriteColor: 'blue' });
martin.put({ name: 'Martin', favoriteColor: 'orange' });
nemo.put({ name: 'Nemo', favoriteColor: 'gold' });
friends.set(dori);
friends.set(martin);
friends.set(nemo);

const myQuery = gql`{
  fish {
    red {
      name
    }
    
    blue {
      _chain
    }
    
    friends(type: Set) {
      name
      favoriteColor
    }
  }
}`;

graphqlGun(myQuery, gun).then(function(results) {
  console.log('results: ', results);
});

and it will print...

{
  fish: {
    red: {
      name: 'Frank' // the name you set on the red fish
    },
    blue: {
      _chain: <Gun.chain> // reference to gun chain at blue node
    },
    friends: [
      { name: 'Dori', favoriteColor: 'blue' },
      { name: 'Martin', favoriteColor: 'orange' },
      { name: 'Nemo', favoriteColor: 'gold' }
    ]
  }
}

Use the live directive to subscribe via an promise/iterator combo.

const myQuery = gql`{
  fish {
    red @live {
      name
    }
  }
}`;

const { next } = graphqlGun(myQuery, gun);

console.log(await next());

Will print...

{
  fish: {
    red: {
      name: 'Frank' // the name you set on the red fish
    }
  }
}

Then try:

gun.get('fish').get('red').put({name: 'bob'});

console.log(await next());

And you will get...

{
  fish: {
    red: {
      name: 'bob' // the updated name
    }
  }
}

Take a look at the tests to learn more.

Credits

Special thanks to @amark for creating Gun and answering all my noob questions.

Shout out to @stubailo for putting up with my late night graphql-anywhere PRs.

Also a shout out to everyone on the Gun gitter chat for talking through things.