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. Generally layouts are created automatically by placing a React component in the src/layouts/ directory. This action should be used if loading layouts from an NPM package or from a non-standard location.

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`),
  id: 'custom-id', // If no id is provided, the filename will be used as id.
  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}

An optional field to indicate to transformer plugins that your node has raw content they can transform. Use 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 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/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}

An optional field. The raw content of the node. Can be excluded if it’d require a lot of memory 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.
  field1: `a string`,
  field2: 10,
  field3: true,
  ...arbitraryOtherData,

  // Required fields.
  id: `a-node-id`,
  parent: `the-id-of-the-parent-node`, // or null if it's a source node without a parent
  children: [],
  internal: {
    type: `CoolServiceMarkdownField`,
    contentDigest: crypto
      .createHash(`md5`)
      .update(JSON.stringify(fieldData))
      .digest(`hex`),
    mediaType: `text/markdown`, // optional
    content: JSON.stringify(fieldData), // optional
  }
})

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 {string}

[deprecated] the name for the field

fieldValue {string}

[deprecated] the value for the field

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`),
  // If you have a layout component at src/layouts/blog-layout.js
  layout: `blog-layout`,
  // The context is passed as props to the component as well
  // as into the component's GraphQL query.
  context: {
    id: `123456`,
  },
})

createRedirect

Create a redirect from one page to another. Redirect data can be used to configure hosting environments like Netlify (automatically handled with the Netlify plugin).

Parameters

redirect {Object}

Redirect data

fromPath {string}

Any valid URL. Must start with a forward slash

isPermanent {string}[default=false]

This is a permanent redirect; defaults to temporary

toPath {string}

URL of a created page (see createPage)

redirectInBrowser {string}[default=false]

Redirects are generally for redirecting legacy URLs to their new configuration. If you can’t update your UI for some reason, set redirectInBrowser to true and Gatsby will handle redirecting in the client as well.

Example

createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true })

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

node {object}

the node object

Example

deleteNode(node.id, node)

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`)