Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.0] refactor node structure to hide internal fields #960

Merged
merged 6 commits into from
May 15, 2017
Prev Previous commit
Add basic documentation for node interface and hacker news source plugin
  • Loading branch information
KyleAMathews committed May 15, 2017
commit 9c86a7c1ec588a53d9fd561283c16b4c4d8147a0
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ If you want your issue to be resolved quickly, please include in your issue:
changes you've made there.

## Contributing
You can install the latest `master` version of Gatsby by following these steps:
You can install the latest version of Gatsby by following these steps:

* Clone the repo, navigate to its directory.
* Install dependencies using `npm install` in the root of the repo.
Expand All @@ -20,7 +20,7 @@ The usual contributing steps are:
* Fork the [official repository](https://github.com/gatsbyjs/gatsby).
* Clone your fork: git clone `git@github.com:<your-username>/gatsby.git`
* Install lerna, and gatsby-dev-cli globally: `npm install -g lerna gatsby-dev-cli@canary`
* Checkout to the 1.0 branch: `git checkout 1.0`
* Checkout the 1.0 branch: `git checkout 1.0`
* Install dependencies: `npm install && lerna bootstrap`
* Make sure tests are passing for you: `npm test`
* Create a topic branch: `git checkout -b topics/new-feature-name`
Expand Down
52 changes: 51 additions & 1 deletion docs/docs/node-interface.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,54 @@
title: Node Interface
---

Coming soon.
The "node" is the center of Gatsby's data system. All data that's
added to Gatsby is modeled using nodes.

The basic node data structure is as follows:

```flow
id: String,
children: Array[String],
parent: String,
internal: {
contentDigest: String,
mediaType: String,
type: String,
pluginName: String,
content: String,
}
...other node type specific fields
```

## Source plugins

New nodes are added to Gatsby by "source" plugins. A common one that many
Gatsby sites use is the [Filesystem source
plugin](/docs/packages/gatsby-source-filesystem/) which turns files on disk
into File nodes.

Other source plugins pull data from external APIs such as the [Drupal](/docs/packages/gatsby-source-drupal/) and
[Hacker News](/docs/packages/gatsby-source-hacker-news/)

## Transformer plugins

Transformer plugins transform source nodes into new types of nodes. It is very
common when building Gatsby sites to install both source plugin(s) and transformer
plugins.

Nodes created by transformer plugins are set as "children" of their "parent"
nodes.

* The [Remark
(Markdown library) transformer
plugin](/docs/packages/gatsby-transformer-remark/) looks for new nodes that
are created with a `mediaType` of `text/x-markdown` and then transforms these
nodes into `MarkdownRemark` nodes with an `html` field.
* The [YAML transformer plugin](/docs/packages/gatsby-transformer-yaml/) looks
for new nodes with a media type of `text/yaml` (e.g. a `.yaml` file) and creates new
YAML child node(s) by parsing the YAML source into JavaScript objects.

## GraphQL

Gatsby automatically infers the structure of your site's nodes and creates
a GraphQL schema which you can then query from your site's components.
1 change: 1 addition & 0 deletions docs/docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ mean converting this file into a JS component).
* [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/)
* [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/)
* [gatsby-source-drupal](/docs/packages/gatsby-source-drupal/)
* [gatsby-source-hacker-news](/docs/packages/gatsby-source-hacker-news/)
* [gatsby-remark-autolink-headers](/docs/packages/gatsby-remark-autolink-headers/)
* [gatsby-remark-copy-linked-files](/docs/packages/gatsby-remark-copy-linked-files/)
* [gatsby-remark-prismjs](/docs/packages/gatsby-remark-prismjs/)
Expand Down
47 changes: 47 additions & 0 deletions packages/gatsby-source-hacker-news/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# gatsby-source-hacker-news

Source plugin for pulling data into Gatsby from the [Hacker News
API](https://github.com/HackerNews/API)

## Install

`npm install --save gatsby-source-hacker-news`

## How to use

```javascript
// In your gatsby-config.js
plugins: [
`gatsby-source-hacker-news`,
]
```

## How to query

You can query nodes created from Hacker News like the following:

```graphql
query StoriesQuery {
allHnStory(sortBy: {fields: [order]}) {
edges {
node {
id
title
score
order
domain
url
by
descendants
timeISO(fromNow: true)
children {
id
text
timeISO(fromNow: true)
by
}
}
}
}
}
```
5 changes: 4 additions & 1 deletion packages/gatsby/src/redux/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@ actions.createNode = (node, plugin = ``) => {
}

// Check if the node has already been processed.
if (getNode(node.id) && !hasNodeChanged(node.id, node.contentDigest)) {
if (
getNode(node.id) &&
!hasNodeChanged(node.id, node.internal.contentDigest)
) {
return {
type: `TOUCH_NODE`,
plugin,
Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby/src/redux/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@ exports.hasNodeChanged = (id, digest) => {
if (!node) {
return true
} else {
return node.contentDigest !== digest
return node.internal.contentDigest !== digest
}
}

exports.loadNodeContent = node => {
if (node.content) {
return Promise.resolve(node.content)
if (node.internal.content) {
return Promise.resolve(node.internal.content)
} else {
return new Promise(resolve => {
// Load plugin's loader function
Expand Down