By exporting a graphql query, you can query Gatsby’s data layer within the slice. Slices can use “slice queries”, just as pages can use page queries. If you map 'my-image' to 'my-image-dog', any time the 'my-image' Slice placeholder is used, it’ll use the Slice component with the id of 'my-image-dog' on that page. However, if you need to customize which Slice component is utilized based on the page, you can pass an alias-to- id map in createPage through the slices key. Therefore, if the Slice placeholder is given an alias prop of 'my-image', the Slice component with the id of 'my-image' will be used.

By default, an alias is always created for each id given in createSlice. The reason alias is used (as opposed to id from createSlice) is an alias is a one-to-one mapping for each page created. See also: AliasesĪn ” alias” for a Slice is the string value a page will use to identify which Slice component to render. The Slice component created in gatsby-node to replace this placeholder. Any additional props will be passed to the underlying component.

The path to the component being used as a Slice component.Īn object passed to the component as sliceContext. ArgumentĪ unique identifier for this specific Slice. The createSlice action from the createPages API is the first step in creating a new Slice. The React component you pass to createSlice via its component key is also referred to as “Slice component”. The React component is also referred to as “Slice placeholder”. By pulling out common components into separate HTML files, common components can be built separately and “stitched” together with existing pages. Support for the Gatsby Slice API was added in includes a React component and a createSlice action in gatsby-node to help speed up common updates across your site.

Reactjs slice