Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
KyleAMathews authored Feb 16, 2018
1 parent ed44491 commit aa56a76
Showing 1 changed file with 33 additions and 29 deletions.
62 changes: 33 additions & 29 deletions packages/gatsby-source-filesystem/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,45 @@ module.exports = {
],
};
```
## API

`gatsby-source-filesystem` reveals two APIs:
## How to query

You can query file nodes like the following:

```graphql
{
allFile {
edges {
node {
extension
dir
modifiedTime
}
}
}
}
```

## Helper functions

`gatsby-source-filesystem` exports two helper functions:
- `createFilePath`
- `createRemoteFileNode`

### createFilePath

When building pages from files, you often want to create a URL from a file's path on the file system. E.g. if you have a markdown file at `src/content/2018-01-23-an-exploration-of-the-nature-of-reality/index.md`, you might want to turn that into a page on your site at `example.com/2018-01-23-an-exploration-of-the-nature-of-reality/`. `createFilePath` is a helper function to make this task easier.

```javascript
// In your gatsby-node.js
createFilePath({
// The node you'd like to create into a filepath
// Param from `onCreateNode` can be used here
// ie: a markdown file, JSON data, etc
// The node you'd like to convert to a path
// e.g. froom a markdown, JSON, YAML file, etc
node:
// Method used to get a node
// Param from `onCreateNode` can be used here
// The parameter from `onCreateNode` should be passed in here
getNode:
// the slug structure you'd like to create
// Defaults to `src/pages`
// The base path for your files.
// Defaults to `src/pages`. For the example above, you'd use `src/contents`.
basePath:
// Whether you want your file paths to contain a trailing `/` slash
// Defaults to true
Expand All @@ -67,15 +87,17 @@ createFilePath({
```

#### Example usage
The following is taken from [Gatsby Tutorial, Part Four](https://www.gatsbyjs.org/tutorial/part-four/#programmatically-creating-pages-from-data) and is used to create URL slugs from markdown pages.
The following is taken from [Gatsby Tutorial, Part Four](https://www.gatsbyjs.org/tutorial/part-four/#programmatically-creating-pages-from-data) and is used to create URL slugs for markdown pages.

```javascript
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
const { createNodeField } = boundActionCreators
// Ensures we are processing only markdown files
if (node.internal.type === 'MarkdownRemark') {
// Use `createFilePath` to turn markdown files in our `data/faqs` directory into `/faqs/slug`
const relativeFilePath = createFilePath({ node, getNode, basePath: 'data/faqs/', trailingSlash: false })
const relativeFilePath = createFilePath({ node, getNode, basePath: 'data/faqs/' })

// Creates new query'able field with name of 'slug'
createNodeField({
Expand All @@ -92,21 +114,3 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
```javascript
TO DO
```

## How to query

You can query file nodes like the following:

```graphql
{
allFile {
edges {
node {
extension
dir
modifiedTime
}
}
}
}
```

0 comments on commit aa56a76

Please sign in to comment.