Gatsby & GraphQL - 从查询的文件呈现下载链接

Question

我正在用盖茨比建立一个静态网站，我需要在上面放一些.txt或.pdf文件，以便访问者可以下载它们。我该怎么做？

我是一个新手，我的 GraphQL 知识非常薄弱，我只用它来获取一些图像到我的组件。我的"gatsby-config.js"包含以下内容：

{
resolve: `gatsby-source-filesystem`,
options: {
name: `documents`,
path: `${__dirname}/src/documents`,
},
},

我尝试了一些东西，在 GraphiQL 上这似乎是有效的代码：

const data = useStaticQuery(graphql`
query {
document1: file(relativePath: {eq: "doc1.txt"}) {
id
}
}
`) 

但是我不知道如何使"document1"在JSX中可下载。

Answer 1

总是值得在 GraphiQL 资源管理器中查看可用于查询的内容。然后，您可以按照默认启动器的图像组件中的静态查询示例进行操作。

如果你使用的是 Gatsby> v2.1，你可以使用 useStaticQuery 钩子来做到这一点。

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
const Download = () => {
const data = useStaticQuery(graphql`
query MyQuery {
file(relativePath: {eq: "doc1.txt"}) {
publicURL
name
}
}
`)
return <a href={data.file.publicURL} download>Download {data.file.name}</a>
}
export default Download

如果没有，您可以使用静态查询执行此操作

import React from "react"
import { StaticQuery, graphql } from "gatsby"
const Download = () => (
<StaticQuery
query={graphql`
query MyQuery {
file(relativePath: {eq: "doc1.txt"}) {
publicURL
name
}
}
`}
render={data => <a href={data.file.publicURL} download>Download {data.file.name}</a>}
/>
)
export default Download