Gatsby & GraphQL - ссылка для скачивания файла - PullRequest
Новая
       20

Gatsby & GraphQL - ссылка для скачивания файла

2 голосов
/ 18 октября 2019

Я создаю статический веб-сайт с помощью Gatsby, и мне нужно разместить на нем несколько файлов .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
      }
    }
`)

Но я не знаю, каксделать этот документ1 загружаемым в JSX.

1 Ответ

1 голос
/ 19 октября 2019

Всегда стоит заглянуть в GraphiQL explorer , чтобы увидеть, что доступно для запроса. Затем вы можете просто следовать примеру статического запроса в компоненте изображения по умолчанию для начинающего.

Если вы используете 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
...