Actions
Gatsby uses Redux internally to manage state. When you implement a Gatsby API, you are passed a collection of actions (equivalent to actions bound with bindActionCreators in Redux) which you can use to manipulate state on your site.
The object actions
contains the functions and these can be individually extracted by using ES6 object destructuring.
Functions
Source
Declares URL Pattern that should be allowed to be used for Image or File CDN to prevent using of unexpected RemoteFile URLs.
Parameters
url
string | string[]URLPattern or Array of URL Patternss that should be allowed. URLPattern is a string that can contain wildcards (*) or parameter placeholders (e.g. :id).
plugin
IGatsbyPlugintraceId
string
Return value
IAddImageCdnAllowedUrl
Example
exports.onPreInit = ({ actions }) => {
actions.addRemoteFileAllowedUrl(`https://your-wordpress-instance.com/*`)
}
Source
Add a third-party schema to be merged into main schema. Schema has to be a graphql-js GraphQLSchema object.
This schema is going to be merged as-is. Merging it in this way will easily break the main Gatsby Schema. Since we do not want that, therefore it is the user’s responsibility to make sure that it does not happen. One such way of avoiding it is by namespacing the schema.
Parameters
- destructured object
schema
GraphQLSchemaGraphQL schema to add
plugin
IGatsbyPlugintraceId
string
Return value
IAddThirdPartySchema
Source
Add a field extension to the GraphQL schema.
Extensions allow defining custom behavior which can be added to fields
via directive (in SDL) or on the extensions
prop (with Type Builders).
The extension definition takes a name
, an extend
function, and optional
extension args
for options. The extend
function has to return a (partial)
field config, and receives the extension options and the previous field config
as arguments.
Parameters
extension
GraphQLFieldExtensionDefinitionThe field extension definition
plugin
IGatsbyPlugintraceId
string
Return value
ThunkAction<>
Example
exports.createSchemaCustomization = ({ actions }) => {
const { createFieldExtension } = actions
createFieldExtension({
name: 'motivate',
args: {
caffeine: 'Int'
},
extend(options, prevFieldConfig) {
return {
type: 'String',
args: {
sunshine: {
type: 'Int',
defaultValue: 0,
},
},
resolve(source, args, context, info) {
const motivation = (options.caffeine || 0) - args.sunshine
if (motivation > 5) return 'Work! Work! Work!'
return 'Maybe tomorrow.'
},
}
},
})
}
Source
DEPRECATED. Use createJobV2 instead.
Create a “job”. This is a long-running process that is generally
started as a side-effect to a GraphQL query.
gatsby-plugin-sharp
uses this for
example.
Gatsby doesn’t finish its process until all jobs are ended.
Use “createJobV2” instead
Parameters
job
ObjectA job object with at least an id set
id
idThe id of the job
plugin
Example
createJob({ id: `write file id: 123`, fileName: `something.jpeg` })
Source
Create a “job”. This is a long-running process that is generally
started as a side-effect to a GraphQL query.
gatsby-plugin-sharp
uses this for
example.
Gatsby doesn’t finish its process until all jobs are ended.
Parameters
job
ObjectA job object with name, inputPaths, outputDir and args
name
stringThe name of the job you want to execute
inputPaths
string[]The inputPaths that are needed to run
outputDir
stringThe directory where all files are being saved to
args
ObjectThe arguments the job needs to execute
plugin
Plugin
Return value
Promise<object>
Promise to see if the job is done executing
Example
createJobV2({ name: `IMAGE_PROCESSING`, inputPaths: [`something.jpeg`], outputDir: `public/static`, args: { width: 100, height: 100 } })
Source
Create a new node.
Parameters
node
Objecta node object
id
stringThe node’s ID. Must be globally unique.
parent
stringThe 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
null
.children
ArrayAn 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
Objectnode fields that aren’t generally interesting to consumers of node data but are very useful for plugin writers and Gatsby core. Only fields described below are allowed in
internal
object. Using any type of custom fields will result in validation errors.mediaType
stringAn 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
stringAn arbitrary globally unique type chosen 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 chosen here. Nodes of a given type can only be created by one plugin.
content
stringAn optional field. This is rarely used. It is used when a source plugin sources data it doesn’t know how to transform e.g. a markdown string pulled from an API. The source plugin can defer the transformation to a specialized transformer plugin like gatsby-transformer-remark. This
content
field holds the raw content (so for the markdown case, the markdown string).Data that’s already structured should be added to the top-level of the node object and not added here. You should not
JSON.stringify
your node’s data here.If the content is very large and can be lazy-loaded, e.g. a file on disk, you can define a
loadNodeContent
function for this node and the node content will be lazy loaded when it’s needed.contentDigest
stringthe digest for the content of this node. Helps Gatsby avoid doing extra work on data that hasn’t changed.
description
stringAn optional field. Human readable description of what this node represent / its source. It will be displayed when type conflicts are found, making it easier to find and correct type conflicts.
contentFilePath
stringAn optional field. A plugin can add an absolute path to a content file (e.g. markdown file) here while creating the node. Example: gatsby-plugin-mdx adds the absolute path of the
File
node to theMdx
node underinternal.contentFilePath
.
plugin
PluginactionOptions
ActionOptions
Return value
Promise
The returned Promise resolves when all cascading
onCreateNode
API calls triggered by createNode
have finished.
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
description: `Cool Service: "Title of entry"`, // optional
}
})
Source
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 nodes are immutable, you can’t mutate the node directly. So to extend another node, use this.
Parameters
- destructured object
node
Objectthe target node object
name
stringthe name for the field
value
anythe value for the field
plugin
PluginactionOptions
ActionOptions
Example
createNodeField({
node,
name: `happiness`,
value: `is sweet graphql queries`
})
// The field value is now accessible at node.fields.happiness
Source
Create a page. See the guide on creating and modifying pages for detailed documentation about creating pages.
Parameters
page
Objecta page object
path
stringAny valid URL. Must start with a forward slash. Unicode characters should be passed directly and not encoded (eg.
á
not%C3%A1
).matchPath
stringPath that Reach Router uses to match the page on the client side. Also see docs on matchPath
ownerNodeId
stringThe id of the node that owns this page. This is used for routing users to previews via the unstable_createNodeManifest public action. Since multiple nodes can be queried on a single page, this allows the user to tell us which node is the main node for the page. Note that the ownerNodeId must be for a node which is queried on this page via a GraphQL query.
component
stringThe absolute path to the component for this page
context
ObjectContext data for this page. Passed as props to the component
this.props.pageContext
as well as to the graphql query as graphql arguments.slices
ObjectA mapping of alias-of-id for Slices rendered on this page. See the technical docs for the Gatsby Slice API.
defer
booleanWhen set to
true
, Gatsby will exclude the page from the build step and instead generate it during the first HTTP request. Default value isfalse
. Also see docs on Deferred Static Generation.
plugin
PluginactionOptions
ActionOptions
Example
createPage({
path: `/my-sweet-new-page/`,
component: path.resolve(`./src/templates/my-sweet-new-page.js`),
ownerNodeId: `123456`,
// The context is passed as props to the component as well
// as into the component's GraphQL query.
context: {
id: `123456`,
},
})
Source
Creates a link between a parent and child node. This is used when you
transform content from a node creating a new child node. You need to add
this new child node to the children
array of the parent but since you
don’t have direct access to the immutable parent node, use this action
instead.
Parameters
- destructured object
parent
Objectthe parent node object
child
Objectthe child node object
plugin
Plugin
Example
createParentChildLink({ parent: parentNode, child: childNode })
Source
Create a redirect from one page to another.
Redirects must be implemented by your deployment platform (e.g. Gatsby Cloud, Netlify, etc.). You can use an adapter or plugins for this. Alternatively, you can use gatsby-plugin-meta-redirect to generate meta redirect HTML files for redirecting on any static file host.
You can read the source code of gatsby-adapter-netlify to see how redirects are implemented on Netlify. Redirects also work out of the box on Gatsby Cloud.
Keep the redirects configuration in sync with trailing slash configuration from Gatsby Config API.
Parameters
redirect
ObjectRedirect data
fromPath
stringAny valid URL. Must start with a forward slash
isPermanent
booleanThis is a permanent redirect; defaults to temporary
redirectInBrowser
booleanRedirects are generally for redirecting legacy URLs to their new configuration on the server. If you can’t update your UI for some reason, set
redirectInBrowser
to true and Gatsby will handle redirecting in the client as well. You almost never need this so be sure your use case fits before enabling.toPath
stringURL of a created page (see
createPage
)ignoreCase
boolean(Plugin-specific) Ignore case when looking for redirects
force
boolean(Plugin-specific) Will trigger the redirect even if the
fromPath
matches a piece of content. This is not part of the Gatsby API, but implemented by (some) plugins that configure hosting provider redirectsstatusCode
number(Plugin-specific) Manually set the HTTP status code. This allows you to create a rewrite (status code 200) or custom error page (status code 404). Note that this will override the
isPermanent
option which also sets the status code. This is not part of the Gatsby API, but implemented by (some) plugins that configure hosting provider redirectsconditions
ObjectSpecify a country or language based redirect
country
string | string[]A two-letter country code based on the regional indicator symbol
language
string | string[]A two-letter identifier defined by ISO 639-1
rest
Example
// Generally you create redirects while creating pages.
exports.createPages = ({ graphql, actions }) => {
const { createRedirect } = actions
createRedirect({ fromPath: '/old-url/', toPath: '/new-url/', isPermanent: true })
createRedirect({ fromPath: '/url/', toPath: '/zn-CH/url/', conditions: { language: 'zn' }})
createRedirect({ fromPath: '/url/', toPath: '/en/url/', conditions: { language: ['ca', 'us'] }})
createRedirect({ fromPath: '/url/', toPath: '/ca/url/', conditions: { country: 'ca' }})
createRedirect({ fromPath: '/url/', toPath: '/en/url/', conditions: { country: ['ca', 'us'] }})
createRedirect({ fromPath: '/not_so-pretty_url/', toPath: '/pretty/url/', statusCode: 200 })
// Create pages here
}
Source
Make functionality available on field resolver context
Parameters
context
objectObject to make available on
context
. When called from a plugin, the context value will be namespaced under the camel-cased plugin name without the “gatsby-” prefixplugin
IGatsbyPlugintraceId
string
Return value
ThunkAction<>
Example
const getHtml = md => remark().use(html).process(md)
exports.createSchemaCustomization = ({ actions }) => {
actions.createResolverContext({ getHtml })
}
// The context value can then be accessed in any field resolver like this:
exports.createSchemaCustomization = ({ actions, schema }) => {
actions.createTypes(schema.buildObjectType({
name: 'Test',
interfaces: ['Node'],
fields: {
md: {
type: 'String!',
async resolve(source, args, context, info) {
const processed = await context.transformerRemark.getHtml(source.internal.contents)
return processed.contents
}
}
}
}))
}
Source
Record that a page was visited on the server..
Parameters
chunkName
string- destructured object
id
stringthe chunkName for the page component.
Source
Create a new Slice. See the technical docs for the Gatsby Slice API.
Parameters
payload
ICreateSliceInputplugin
IGatsbyPlugintraceId
string- destructured object
slice
Objecta slice object
id
stringThe unique ID for this slice
component
stringThe absolute path to the component for this slice
context
ObjectContext data for this slice. Passed as props to the component
this.props.sliceContext
as well as to the graphql query as graphql arguments.
Return value
ICreateSliceAction
Example
exports.createPages = ({ actions }) => {
actions.createSlice({
id: `navigation-bar`,
component: path.resolve(`./src/components/navigation-bar.js`),
})
}
Source
Add type definitions to the GraphQL schema.
Parameters
types
string | GraphQLOutputType | GatsbyGraphQLType | string[] | GraphQLOutputType[] | GatsbyGraphQLType[]Type definitions
Type definitions can be provided either as
graphql-js
types, in GraphQL schema definition language (SDL) or using Gatsby Type Builders available on theschema
API argument.Things to note:
- type definitions targeting node types, i.e.
MarkdownRemark
and others added insourceNodes
oronCreateNode
APIs, need to implement theNode
interface. Interface fields will be added automatically, but it is mandatory to label those types withimplements Node
. - by default, explicit type definitions from
createTypes
will be merged with inferred field types, and default field resolvers forDate
(which adds formatting options) andFile
(which resolves the field value as arelativePath
foreign-key field) are added. This behavior can be customised with@infer
,@dontInfer
directives or extensions. Fields may be assigned resolver (and other option like args) with additional directives. Currently@dateformat
,@link
,@fileByRelativePath
and@proxy
are available.
Schema customization controls:
@infer
- run inference on the type and add fields that don’t exist on the
defined type to it.
@dontInfer
- don’t run any inference on the type
Extensions to add resolver options:
@dateformat
- add date formatting arguments. AcceptsformatString
andlocale
options that sets the defaults for this field@link
- connect to a different Node. Argumentsby
andfrom
, which define which field to compare to on a remote node and which field to use on the source node@fileByRelativePath
- connect to a File node. Same arguments. The difference from link is that this normalizes the relative path to be relative from the path where source node is found.@proxy
- in case the underlying node data contains field names with characters that are invalid in GraphQL,proxy
allows to explicitly proxy those properties to fields with valid field names. Takes afrom
arg.
- type definitions targeting node types, i.e.
plugin
IGatsbyPlugintraceId
string
Return value
ICreateTypes
Example
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
const typeDefs = `
"""
Markdown Node
"""
type MarkdownRemark implements Node @infer {
frontmatter: Frontmatter!
}
"""
Markdown Frontmatter
"""
type Frontmatter @infer {
title: String!
author: AuthorJson! @link
date: Date! @dateformat
published: Boolean!
tags: [String!]!
}
"""
Author information
"""
# Does not include automatically inferred fields
type AuthorJson implements Node @dontInfer {
name: String!
birthday: Date! @dateformat(locale: "ru")
}
`
createTypes(typeDefs)
}
// using Gatsby Type Builder API
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions
const typeDefs = [
schema.buildObjectType({
name: 'MarkdownRemark',
fields: {
frontmatter: 'Frontmatter!'
},
interfaces: ['Node'],
extensions: {
infer: true,
},
}),
schema.buildObjectType({
name: 'Frontmatter',
fields: {
title: {
type: 'String!',
resolve(parent) {
return parent.title || '(Untitled)'
}
},
author: {
type: 'AuthorJson'
extensions: {
link: {},
},
}
date: {
type: 'Date!'
extensions: {
dateformat: {},
},
},
published: 'Boolean!',
tags: '[String!]!',
}
}),
schema.buildObjectType({
name: 'AuthorJson',
fields: {
name: 'String!'
birthday: {
type: 'Date!'
extensions: {
dateformat: {
locale: 'ru',
},
},
},
},
interfaces: ['Node'],
extensions: {
infer: false,
},
}),
]
createTypes(typeDefs)
}
Source
Delete a node
Parameters
node
objectA node object. See the “createNode” action for more information about the node object details.
plugin
Plugin
Example
deleteNode(node)
Source
Delete a page
Parameters
page
Objecta page object
path
stringThe path of the page
component
stringThe absolute path to the page component
Example
deletePage(page)
Source
Marks a source plugin as “stateful” which disables automatically deleting untouched nodes. Stateful source plugins manage deleting their own nodes without stale node checks in Gatsby.
Enabling this is a major performance improvement for source plugins that manage their own node deletion. It also lowers the total memory required by a source plugin.
When using this action, check if it’s supported first with hasFeature('stateful-source-nodes')
, hasFeature
is exported from gatsby-plugin-utils
.
Parameters
plugin
Plugin- destructured object
Example
import { hasFeature } from "gatsby-plugin-utils"
exports.sourceNodes = ({ actions }) => {
if (hasFeature(`stateful-source-nodes`)) {
actions.enableStatefulSourceNodes()
} else {
// fallback to old behavior where all nodes are iterated on and touchNode is called.
}
}
Source
Write GraphQL schema to file
Writes out inferred and explicitly specified type definitions. This is not the full GraphQL schema, but only the types necessary to recreate all type definitions, i.e. it does not include directives, built-ins, and derived types for filtering, sorting, pagination etc. Optionally, you can define a list of types to include/exclude. This is recommended to avoid including definitions for plugin-created types.
The first object parameter is required, however all the fields in the object are optional.
Parameters
- destructured object
path
stringThe path to the output file, defaults to
schema.gql
include
objectConfigure types to include
types
string[]Only include these types
plugins
string[]Only include types owned by these plugins
exclude
objectConfigure types to exclude
types
string[]Do not include these types
plugins
string[]Do not include types owned by these plugins
withFieldTypes
booleanInclude field types, defaults to
true
plugin
IGatsbyPlugintraceId
string
Return value
IPrintTypeDefinitions
Example
exports.createSchemaCustomization = ({ actions }) => {
// This code writes a GraphQL schema to a file named `schema.gql`.
actions.printTypeDefinitions({})
}
exports.createSchemaCustomization = ({ actions }) => {
// This code writes a GraphQL schema to a file named `schema.gql`, but this time it does not include field types.
actions.printTypeDefinitions({ withFieldTypes: false })
}
Source
Completely replace the webpack config for the current stage. This can be dangerous and break Gatsby if certain configuration options are changed.
Generally only useful for cases where you need to handle config merging logic
yourself, in which case consider using webpack-merge
.
Parameters
config
Objectcomplete webpack config
plugin
Source
Set top-level Babel options. Plugins and presets will be ignored. Use setBabelPlugin and setBabelPreset for this.
Parameters
options
Objectplugin
config
ObjectAn options object in the shape of a normal babelrc JavaScript object
Example
setBabelOptions({
options: {
sourceMaps: `inline`,
}
})
Source
Add new plugins or merge options into existing Babel plugins.
Parameters
config
ObjectA config object describing the Babel plugin to be added.
name
stringThe name of the Babel plugin
options
ObjectOptions to pass to the Babel plugin.
plugin
Example
setBabelPlugin({
name: `@emotion/babel-plugin`,
options: {
sourceMap: true,
},
})
Source
Add new presets or merge options into existing Babel presets.
Parameters
config
ObjectA config object describing the Babel plugin to be added.
name
stringThe name of the Babel preset.
options
ObjectOptions to pass to the Babel preset.
plugin
Example
setBabelPreset({
name: `@babel/preset-react`,
options: {
pragma: `Glamor.createElement`,
},
})
Source
DEPRECATED. Use createJobV2 instead.
Set (update) a “job”. Sometimes on really long running jobs you want to update the job as it continues.
Use “createJobV2” instead
Parameters
job
ObjectA job object with at least an id set
id
idThe id of the job
plugin
Example
setJob({ id: `write file id: 123`, progress: 50 })
Source
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
ObjectAn object with arbitrary values set
plugin
Plugin
Example
setPluginStatus({ lastFetched: Date.now() })
Source
Stores request headers for a given domain to be later used when making requests for Image CDN (and potentially other features).
Parameters
- destructured object
domain
stringThe domain to store the headers for.
headers
ObjectThe headers to store.
plugin
Plugin
Source
Merge additional configuration into the current webpack config. A few
configurations options will be ignored if set, in order to try prevent accidental breakage.
Specifically, any change to entry
, output
, target
, or resolveLoaders
will be ignored.
For full control over the webpack config, use replaceWebpackConfig()
.
Parameters
config
Objectpartial webpack config, to be merged into the current one
plugin
Source
“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
node
ObjectA node object. See the “createNode” action for more information about the node object details.
plugin
Plugin
Example
touchNode(node)
Source
Creates an individual node manifest. This is used to tie the unique revision state within a data source at the current point in time to a page generated from the provided node when it’s node manifest is processed.
Parameters
- destructured object
manifestId
node
updatedAtUTC
plugin
Pluginmanifest
ObjectManifest data
manifestId
stringAn id which ties the unique revision state of this manifest to the unique revision state of a data source.
node
ObjectThe Gatsby node to tie the manifestId to. See the “createNode” action for more information about the node object details.
updatedAtUTC
string(optional) The time in which the node was last updated. If this parameter is not included, a manifest is created for every node that gets called. By default, node manifests are created for content updated in the last 30 days. To change this, set a
NODE_MANIFEST_MAX_DAYS_OLD
environment variable.
Example
unstable_createNodeManifest({
manifestId: `post-id-1--updated-53154315`,
updatedAtUTC: `2021-07-08T21:52:28.791+01:00`,
node: {
id: `post-id-1`
},
})