在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):brysgo/graphql-gun开源软件地址(OpenSource Url):https://github.com/brysgo/graphql-gun开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):
Augmented query interface for the graph universal database http://gun.js.org/
With ReactSay 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 ReactNot using react? You can use 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. CreditsSpecial 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. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论