Basic Data Flow

Click on a step to be taken to further information on the part of the process where it occurs. The basic data flow for this starter can be illustrated like this:

1. table_of_contents.json

You give structure and content for your docs and their navigation.

↓

2. gatsby-source-filesystem

Gatsby pulls Markdown files in.

↓

3. gatsby-transformer-remark

Remark transformer parses the Markdown files.

↓

4. gatsby-node.js (onCreateNode)

Nodes are available for manipulation in the onCreateNode hook. We add a new slug field.

↓

5. gatsby-node.js (createPages)

Doc page nodes with new slug field are turned into pages with a template in the Gatsby createPages function.

↓

6. GraphQl query in doc.jsx

We query the data with GraphQL in our doc.jsx page.

↓

7. TableOfContents component

The <TableOfContents / > component receives and renders the queried data.