Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add basic documentation about publicURL field on File node #3752

Merged
merged 3 commits into from
Jan 28, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion docs/docs/adding-images-fonts-files.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-source-filesystem/src/extend-file-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}${
Expand Down