diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md index ba4acf51d34c8..71ef02d4db18e 100644 --- a/docs/docs/adding-images-fonts-files.md +++ b/docs/docs/adding-images-fonts-files.md @@ -51,7 +51,58 @@ production so you don’t need to worry about long-term caching of assets. Please be advised that this is also a custom feature of Webpack. -An alternative way of handling static assets is described in the next section. +Two alternative ways of handling static assets is described in the next sections. + +## Query for `File` in GraphQL queries using gatsby-source-filesystem + +You can query the `publicURL` field of `File` nodes found in your data layer to trigger copying those files to the public directory and get URLs to them. + +Examples: + +* Copy all `.pdf` files you have in your data layer to your build directory and return URLs to them: + + ```graphql + { + allFile(filter: { extension: { eq: "pdf" } }) { + edges { + node { + publicURL + } + } + } + } + ``` + +* Copy post attachments defined in your Markdown files: + + Link to your attachments in the markdown frontmatter: + + ```markdown + --- + title: "Title of article" +attachments: + - "./assets.zip" + - "./presentation.pdf" + --- + + Hi, this is a great article. + ``` + + In the article template component file, you can query for the attachments: + + ```graphql + query TemplateBlogPost($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + frontmatter { + title + attachments { + publicURL + } + } + } + } + ``` ## Using the `static` Folder diff --git a/packages/gatsby-source-filesystem/src/extend-file-node.js b/packages/gatsby-source-filesystem/src/extend-file-node.js index 99bf81a29a2ad..38d07c0dd3e98 100644 --- a/packages/gatsby-source-filesystem/src/extend-file-node.js +++ b/packages/gatsby-source-filesystem/src/extend-file-node.js @@ -11,6 +11,7 @@ module.exports = ({ type, getNodeAndSavePathDependency, pathPrefix = `` }) => { publicURL: { type: GraphQLString, args: {}, + description: `Copy file to static directory and return public url to it`, resolve: (file, fieldArgs, context) => { const details = getNodeAndSavePathDependency(file.id, context.path) const fileName = `${file.name}-${file.internal.contentDigest}${