From effae25c11b128f2a372af9460216e2722ac7cf7 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Sun, 28 Jan 2018 15:59:21 +0100 Subject: [PATCH 1/3] add basic documentation about copying files from File nodes to build directory --- docs/docs/adding-images-fonts-files.md | 49 ++++++++++++++++++- .../src/extend-file-node.js | 1 + 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md index ba4acf51d34c8..d3f5ef2d7c9d0 100644 --- a/docs/docs/adding-images-fonts-files.md +++ b/docs/docs/adding-images-fonts-files.md @@ -51,7 +51,54 @@ 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. +An alternative way of handling static assets is described in the next sections. + +## Using the `File` type in graphql queries + +You can use `publicURL` field of `File` node to copy files defined in your data layer and get URLs to them. + +Examples: + +* Copy all `.pdf` files you have in your data layer to your build directory and provide URLs to them: + + ```graphql + { + allFile(filter:{extension:{eq:"pdf"}}) { + edges { + node { + publicURL + } + } + } + } + ``` + +* Copy post attachments defined in your Markdown files: + + Define your attachments in frontmatter + ```yaml + --- + title: "Title of article" + attachments: + - "./assets.zip" + - "./presentation.pdf" + --- + ``` + + In article template component file you can query 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}${ From 64bd1b19e7a4b4cf65d75c24b6bc394c8b14179d Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sun, 28 Jan 2018 09:35:02 -0800 Subject: [PATCH 2/3] A few copy edits --- docs/docs/adding-images-fonts-files.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md index d3f5ef2d7c9d0..2f3ec26cc495c 100644 --- a/docs/docs/adding-images-fonts-files.md +++ b/docs/docs/adding-images-fonts-files.md @@ -51,19 +51,19 @@ 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 sections. +Two alternative ways of handling static assets is described in the next sections. -## Using the `File` type in graphql queries +## Query for `File` in GraphQL queries using gatsby-source-filesystem -You can use `publicURL` field of `File` node to copy files defined in your data layer and get URLs to them. +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 provide URLs to them: +* 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"}}) { + allFile(filter:{extension: {eq: "pdf"}}) { edges { node { publicURL @@ -75,17 +75,21 @@ Examples: * Copy post attachments defined in your Markdown files: - Define your attachments in frontmatter - ```yaml + 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 article template component file you can query attachments + In the article template component file, you can query for the attachments: + ```graphql query TemplateBlogPost($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { From eff23e33885d5f83ebcf201c602099b1ea82371e Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sun, 28 Jan 2018 09:36:14 -0800 Subject: [PATCH 3/3] Format --- docs/docs/adding-images-fonts-files.md | 48 +++++++++++++------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md index 2f3ec26cc495c..71ef02d4db18e 100644 --- a/docs/docs/adding-images-fonts-files.md +++ b/docs/docs/adding-images-fonts-files.md @@ -55,53 +55,53 @@ 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. +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 - } + { + 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" +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 - } + query TemplateBlogPost($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + frontmatter { + title + attachments { + publicURL } } } + } ``` ## Using the `static` Folder