Bound Action Creators

Gatsby uses Redux internally to manage state. When you implement a Gatsby API, you're passed a collection of "Bound Action Creators" (functions which create and dispatch Redux actions when called) which you can use to manipulate state on your site.

Functions


Reference

createJob

Create a “job”. This is a long-running process that are generally started as side-effects to GraphQL queries. gatsby-plugin-sharp uses this for example.

Gatsby doesn’t finish its bootstrap until all jobs are ended.

Parameters

job {Object}

A job object with at least an id set

id {id}

The id of the job

Example

createJob({ id: `write file id: 123`, fileName: `something.jpeg` })

createLayout

Create a layout.

Parameters

layout {Object}

a layout object

component {string}

The absolute path to the component for this layout

Example

createLayout({
  component: path.resolve(`./src/templates/myNewLayout.js`)
  context: {
    title: `My New Layout`
  }
})

createNode

Create a new node

Parameters

node {Object}

a node object

id {string}

The node’s ID. Must be globally unique.

parent {string}

The ID of the parent’s node. If the node is derived from another node, set that node as the parent. Otherwise it can just be an empty string.

children {Array}

An array of children node IDs. If you’re creating the children nodes while creating the parent node, add the children node IDs here directly. If you’re adding a child node to a parent node created by a plugin, you can’t mutate this value directly to add your node id, instead use the action creator createParentChildLink.

internal {Object}

node fields that aren’t generally interesting to consumers of node data but are very useful for plugin writers and Gatsby core.

mediaType {string}

Either an official media type (we use mime-db as our source (https://www.npmjs.com/package/mime-db) or a made-up one if your data doesn’t fit in any existing bucket. Transformer plugins frequently use node media types for deciding if they should transform a node into a new one. E.g. markdown transformers look for media types of text/x-markdown.

type {string}

An arbitrary globally unique type choosen by the plugin creating the node. Should be descriptive of the node as the type is used in forming GraphQL types so users will query for nodes based on the type choosen here. Nodes of a given type can only be created by one plugin.

content {string}

raw content of the node. Can be excluded if it’d be memory intensive to load in which case you must define a loadNodeContent function for this node.

contentDigest {string}

the digest for the content of this node. Helps Gatsby avoid doing extra work on data that hasn’t changed.

Example

createNode({
  // Data for the node.
  ...fieldData,
  id: `a-node-id`,
  parent: `the-id-of-the-parent-node`,
  children: [],
  internal: {
    mediaType: `text/x-markdown`,
    type: `CoolServiceMarkdownField`,
    content: JSON.stringify(fieldData),
    contentDigest: crypto
      .createHash(`md5`)
      .update(JSON.stringify(fieldData))
      .digest(`hex`),
  }
})

createNodeField

Extend another node. The new node field is placed under the fields key on the extended node object.

Once a plugin has claimed a field name the field name can’t be used by other plugins. Also since node’s are immutable, you can’t mutate the node directly. So to extend another node, use this.

Parameters

destructured object
node {Object}

the target node object

name {string}

the name for the field

value {string}

the value for the field

fieldName
fieldValue

Example

createNodeField({
  node,
  name: `happiness`,
  value: `is sweet graphql queries`
})

// The field value is now accessible at node.fields.happiness

createPage

Create a page. See the guide on creating and modifying pages for detailed documenation about creating pages.

Parameters

page {Object}

a page object

path {string}

Any valid URL. Must start with a forward slash

component {string}

The absolute path to the component for this page

context {Object}

Context data for this page. Passed as props to the component this.props.pathContext as well as to the graphql query as graphql arguments.

Example

createPage({
  path: `/my-sweet-new-page/`,
  component: path.resolve('./src/templates/my-sweet-new-page.js`),
  // context gets passed in as props to the page as well
  // as into the page/template's GraphQL query.
  context: {
    id: `123456`,
  },
})

deleteLayout

Delete a layout

Parameters

layout {string}

a layout object with at least the name set

Example

deleteLayout(layout)

deleteNode

Delete a node

Parameters

nodeId {string}

a node id

Example

deleteNode(node.id)

deleteNodes

Batch delete nodes

Parameters

nodes {Array}

an array of node ids

Example

deleteNodes([`node1`, `node2`])

deletePage

Delete a page

Parameters

page {string}

a page object with at least the path set

Example

deletePage(page)

endJob

End a “job”.

Gatsby doesn’t finish its bootstrap until all jobs are ended.

Parameters

job {Object}

A job object with at least an id set

id {id}

The id of the job

Example

endJob({ id: `write file id: 123` })

setJob

Set (update) a “job”. Sometimes on really long running jobs you want to update the job as it continues.

Parameters

job {Object}

A job object with at least an id set

id {id}

The id of the job

Example

setJob({ id: `write file id: 123`, progress: 50 })

setPluginStatus

Set plugin status. A plugin can use this to save status keys e.g. the last it fetched something. These values are persisted between runs of Gatsby.

Parameters

status {Object}

An object with arbitrary values set

Example

setPluginStatus({ lastFetched: Date.now() })

touchNode

“Touch” a node. Tells Gatsby a node still exists and shouldn’t be garbage collected. Primarily useful for source plugins fetching nodes from a remote system that can return only nodes that have updated. The source plugin then touches all the nodes that haven’t updated but still exist so Gatsby knows to keep them.

Parameters

nodeId {string}

The id of a node.

Example

touchNode(`a-node-id`)