# GraphQL Taiwan Meetup 003
---
# About me
Daniel Tseng (kpman)
---
# About me
- GraphQL Taiwan
- [Yoctol](https://www.yoctol.com/)
- [GitHub @kpman](https://github.com/kpman)
- [Meetup 001 - Dataloader](https://hackmd.io/p/Syk9o9xuZ#/)
---
# [Gatsby](https://www.gatsbyjs.org/)
---
---
不是這個
---
是這個
---
---
## Outline
- Gatsby Intro
- Data layer with GraphQL
- Query for Markdown source
- Demo
---
## [Gatsby](https://www.gatsbyjs.org/)
- Gatsby is a blazing-fast static site generator for React.
- Gatsby has let you build static websites using React.js components as well as markdown, JSON, and YAML.
---
## [Funding News](https://twitter.com/gatsbyjs/status/999684072501792768)
> Gatsby is officially a startup! We’re thrilled to announce a $3.8M seed round & the formation of Gatsby Inc!
---
## Gatsby
[gatsbyjs.org](https://www.gatsbyjs.org/)
[gatsbyjs.com](https://www.gatsbyjs.com/)
---
## [Gatsby Structure](https://kalinchernev.github.io/learn-gatsbyjs/)
---
## Real Case
- [React.js](https://reactjs.org/)
- [Bottender.js](https://bottender.js.org/)
- [Awesome Gatsby](https://github.com/prayasht/awesome-gatsby)
---
## Gatsby Data Layer
---
## Start GraphiQL server
```shell
$ gatsby new graphqltw-meetup-003
$ gatsby develop
$ open http://localhost:8000/___graphql
```
---
## Query
```graphql
{
allSitePage(limit: 5) {
totalCount
edges {
node {
id
path
}
}
}
}
```
---
## [Arguments](https://graphql.org/learn/queries/#arguments)
- In GraphQL, every field and nested object can get its own set of arguments.
- GraphQL comes with a default set of types, but a GraphQL server can also declare its own custom types
---
## Arguments [Spec](http://facebook.github.io/graphql/June2018/#sec-Language.Arguments)
- [Many arguments can exist for a given field](http://facebook.github.io/graphql/June2018/#example-34b2d)
- [Arguments are unordered](http://facebook.github.io/graphql/June2018/#example-7eba7)
---
## Using Remark (Markdown file)
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark
---
## Query by slug
```graphql
query PostBySlug($slug: String!) {
markdownRemark(fields: {slug: {eq: $slug}}) {
id
excerpt(pruneLength: 100)
frontmatter {
title
date(formatString: "MMM DD, YYYY")
tags
}
headings(depth: h2) {
value
depth
}
}
}
# input
{
"slug": "/2018/06/08/從-Hexo-到-Gatsby/"
}
```
[GitHub Repo](https://github.com/kpman/kpman.github.com/blob/feea084c4926ed0762991a235cfd039c48f75083/src/templates/post.js#L57-L78)
---
## Learning
- [Default value](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/src/extend-node-type.js#L346)
- [Custom argument type](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/src/extend-node-type.js#L313-L323)
---
## Query by tag
```graphql
query PostByTag($tag: String!) {
allMarkdownRemark(
filter: { frontmatter: { tags: { in: [$tag] } } }
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
id
fields {
slug
}
frontmatter {
title
date(formatString: "MMM DD, YYYY")
tags
}
}
}
}
}
# input
{
"tag": "js"
}
```
---
## Reference
- [Gatsbyjs Talks](https://awesomereact.com/playlists/static-websites/HHRTL8NMFVo/upnext)
- [Awesome Gatsby](https://github.com/prayasht/awesome-gatsby)
- [Personal Blog GitHub Repo](https://github.com/kpman/kpman.github.com)
---
## Thank you
{"metaMigratedAt":"2023-06-14T16:53:09.271Z","metaMigratedFrom":"Content","title":"GraphQL Taiwan Meetup 003","breaks":true,"contributors":"[]"}