Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clumsyme/graphql-demo
demos using graphql
https://github.com/clumsyme/graphql-demo
demo graphql graphql-js
Last synced: 4 days ago
JSON representation
demos using graphql
- Host: GitHub
- URL: https://github.com/clumsyme/graphql-demo
- Owner: clumsyme
- Created: 2018-12-20T08:01:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-20T09:11:02.000Z (about 6 years ago)
- Last Synced: 2024-11-06T03:16:56.481Z (about 2 months ago)
- Topics: demo, graphql, graphql-js
- Language: JavaScript
- Size: 11.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# `graphql` with [graphql-js](https://github.com/graphql/graphql-js/)
## two versions of a blog system implemention
```graphql
type Article {
id: ID!
title: String
content: String
tags: [Tag]
comments(keyword: String): [Comment]
}
type Tag {
id: ID!
name: String
articles(keyword: String): [Article]
}
type Comment {
id: ID!
author: String
content: String
}
type Query {
articles(title: String): [Article]
tags(first: Int): [Tag]
}
```
## usage
```bash
npm install
npm start
```
then
- visit: http://127.0.0.1:8080 for the `buildSchema` version
- visit: http://127.0.0.1:8088 for the `GraphQLObjectType` version
give the following `query`
```graphql
query myBlog($articleTitle: String, $show: Boolean!, $first: Int) {
articles(title: $articleTitle) {
title
tags {
name
}
comments {
...comments
}
}
tags(first: $first) {
name
articleList: articles @include(if: $show) {
title
comments {
...comments
}
}
}
}
fragment comments on Comment {
author
content
}
```
and the following `query variables`
```json
{
"articleTitle": "React",
"show": true,
"first": 2
}
```
we will get
```json
{
"data": {
"articles": [
{
"title": "React Hooks Intro",
"tags": [
{
"name": "Program"
},
{
"name": "Development"
}
],
"comments": [
{
"author": "Frodo",
"content": "That' awesome, make react dev easier."
},
{
"author": "Bilbo",
"content": "I like it."
}
]
}
],
"tags": [
{
"name": "Program",
"articleList": [
{
"title": "Learn Web Dev",
"comments": [
{
"author": "Yan",
"content": "Great Article"
}
]
},
{
"title": "React Hooks Intro",
"comments": [
{
"author": "Frodo",
"content": "That' awesome, make react dev easier."
},
{
"author": "Bilbo",
"content": "I like it."
}
]
}
]
},
{
"name": "Life",
"articleList": [
{
"title": "Happy Day",
"comments": [
{
"author": "Luke",
"content": "That's Great"
},
{
"author": "Leia",
"content": "So Funny~ I like it."
}
]
}
]
}
]
}
}
```