graphql-gun - GitLite

KO | EN

gitlite — search

#javascript #typescript #go #machine-learning #deep-learning #linux #docker #nodejs #windows #cli #kubernetes #vue #security #openai

graphql-gun

(★ 406)

A graphql API for the gun p2p graph database

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- - main.yml
  - package-update.yml
- index.test.js.snap
- - index.test.js.snap
- index.js
- index.test.js
.babelrc
.gitignore
async.js
async.test.js
index.js
index.test.js
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/brysgo/graphql-gun

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd graphql-gun

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

![Test](https://github.com/brysgo/graphql-gun/workflows/Test/badge.svg)

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.
```javascript
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:

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

...or if you prefer apollo client:

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

Then just render like normal.

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

```

## Without React

Not using react?

You can use `graphqlGun` with a more traditional imperative approach:

```javascript
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...

```javascript
{
  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.

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

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

console.log(await next());
```

Will print...

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

Then try:

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

console.log(await next());
```

And you will get...

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

Take a look at the tests to learn more.

## Credits

Special thanks to [@amark](https://github.com/amark/) for creating [Gun](https://github.com/amark/gun) and answering all my noob questions.

Shout out to [@stubailo](https://github.com/stubailo/) for putting up with my late night [graphql-anywhere](https://github.com/amark/) PRs.

Also a shout out to everyone on the Gun [gitter](https://gitter.im/amark/gun) chat for talking through things.