2016-10-21 14:43:11 +03:00
|
|
|
## Blog Example
|
2016-10-23 01:13:55 +03:00
|
|
|
Simple yet full-featured example of GraphQL API. Models simple blog with Stories and Users.
|
2016-10-21 14:43:11 +03:00
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
### Run locally
|
2016-10-21 14:43:11 +03:00
|
|
|
```
|
2016-10-23 14:35:31 +03:00
|
|
|
php -S localhost:8080 ./graphql.php
|
2016-10-21 14:43:11 +03:00
|
|
|
```
|
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
### Test if GraphQL is running
|
|
|
|
If you open `http://localhost:8080` in browser you should see `json` response with
|
|
|
|
following message:
|
|
|
|
```
|
|
|
|
{
|
|
|
|
data: {
|
|
|
|
hello: "Your GraphQL endpoint is ready! Install GraphiQL to browse API"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
Note that some browsers may try to download JSON file instead of showing you the response.
|
|
|
|
In this case try to install browser plugin that adds JSON support (like JSONView or similar)
|
|
|
|
|
|
|
|
### Debugging Mode
|
|
|
|
By default GraphQL endpoint exposed at `http://localhost:8080` runs in production mode without
|
|
|
|
additional debugging tools enabled.
|
|
|
|
|
|
|
|
In order to enable debugging mode with additional validation, error handling and reporting -
|
|
|
|
use `http://localhost:8080?debug=1` as endpoint
|
|
|
|
|
2016-10-21 14:43:11 +03:00
|
|
|
### Browsing API
|
|
|
|
The most convenient way to browse GraphQL API is by using [GraphiQL](https://github.com/graphql/graphiql)
|
2016-10-23 01:13:55 +03:00
|
|
|
But setting it up from scratch may be inconvenient. An easy alternative is to use one of
|
|
|
|
the existing Google Chrome extensions:
|
2016-10-21 14:43:11 +03:00
|
|
|
- [ChromeiQL](https://chrome.google.com/webstore/detail/chromeiql/fkkiamalmpiidkljmicmjfbieiclmeij)
|
|
|
|
- [GraphiQL Feen](https://chrome.google.com/webstore/detail/graphiql-feen/mcbfdonlkfpbfdpimkjilhdneikhfklp)
|
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
Set `http://localhost:8080?debug=1` as your GraphQL endpoint/server in one of these extensions
|
|
|
|
and try clicking "Docs" button (usually in the top-right corner) to browse auto-generated
|
|
|
|
documentation.
|
2016-10-21 14:43:11 +03:00
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
### Running GraphQL queries
|
|
|
|
Copy following query to GraphiQL and execute (by clicking play button on top bar)
|
2016-10-21 14:43:11 +03:00
|
|
|
|
|
|
|
```
|
|
|
|
{
|
|
|
|
viewer {
|
|
|
|
id
|
|
|
|
email
|
|
|
|
}
|
2016-10-23 01:13:55 +03:00
|
|
|
user(id: "2") {
|
|
|
|
id
|
|
|
|
email
|
|
|
|
}
|
|
|
|
stories(after: "1") {
|
|
|
|
id
|
|
|
|
body
|
|
|
|
comments {
|
|
|
|
...CommentView
|
|
|
|
}
|
|
|
|
}
|
2016-10-21 14:43:11 +03:00
|
|
|
lastStoryPosted {
|
|
|
|
id
|
2016-10-23 01:13:55 +03:00
|
|
|
hasViewerLiked
|
|
|
|
|
2016-10-21 14:43:11 +03:00
|
|
|
author {
|
|
|
|
id
|
|
|
|
photo(size: ICON) {
|
|
|
|
id
|
|
|
|
url
|
|
|
|
type
|
|
|
|
size
|
|
|
|
width
|
|
|
|
height
|
2016-10-23 01:13:55 +03:00
|
|
|
# Uncomment following line to see validation error:
|
|
|
|
# nonExistingField
|
|
|
|
|
|
|
|
# Uncomment to see error reporting for fields with exceptions thrown in resolvers
|
|
|
|
# fieldWithError
|
|
|
|
# nonNullFieldWithError
|
2016-10-21 14:43:11 +03:00
|
|
|
}
|
|
|
|
lastStoryPosted {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
2016-10-23 01:13:55 +03:00
|
|
|
body(format: HTML, maxLength: 10)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fragment CommentView on Comment {
|
|
|
|
id
|
|
|
|
body
|
|
|
|
totalReplyCount
|
|
|
|
replies {
|
|
|
|
id
|
|
|
|
body
|
2016-10-21 14:43:11 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
### Run your own query
|
|
|
|
Use GraphiQL autocomplete (via CTRL+space) to easily create your own query.
|
|
|
|
|
|
|
|
Note: GraphQL query requires at least one field per object type (to prevent accidental overfetching).
|
|
|
|
For example following query is invalid in GraphQL:
|
|
|
|
|
|
|
|
```
|
|
|
|
{
|
|
|
|
viewer
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
Try copying this query and see what happens
|
|
|
|
|
|
|
|
### Run mutation query
|
|
|
|
TODOC
|
2016-10-21 14:43:11 +03:00
|
|
|
|
2016-10-23 01:13:55 +03:00
|
|
|
### Dig into source code
|
|
|
|
Now when you tried GraphQL API as a consumer, see how it is implemented by browsing
|
|
|
|
source code.
|