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.

参数

job {Object}

A job object with at least an id set

id {id}

The id of the job

示例

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.

参数

layout {Object}

a layout object

component {string}

The absolute path to the component for this layout

示例

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.

参数

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.

示例

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.

参数

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

示例

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.

参数

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.

示例

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

参数

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

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.

toPath {string}

URL of a created page (see createPage)

rest {null}

示例

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

deleteLayout

Delete a layout

参数

layout {string}

a layout object with at least the name set

示例

deleteLayout(layout)

deleteNode

Delete a node

参数

nodeId {string}

a node id

node {object}

the node object

示例

deleteNode(node.id, node)

deleteNodes

Batch delete nodes

参数

nodes {Array}

an array of node ids

示例

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

deletePage

Delete a page

参数

page {Object}

a page object with at least the path set

path {string}

The path of the page

component {string}

The absolute path to the page component

示例

deletePage(page)

endJob

End a “job”.

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

参数

job {Object}

A job object with at least an id set

id {id}

The id of the job

示例

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.

参数

job {Object}

A job object with at least an id set

id {id}

The id of the job

示例

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.

参数

status {Object}

An object with arbitrary values set

示例

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.

参数

nodeId {string}

The id of a node.

示例

touchNode(`a-node-id`)
Docs
Tutorial
Community
Blog