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

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.