GraphQL for a single pdf file

I found documentation for querying all pdf files by using the allFile type, but I want to query a single pdf file. I haven’t been able to find any documentation on querying a single pdf file. This is what I have tried so far but I haven’t had any luck.

const data = useStaticQuery(graphql query { pdf: file(base: { eq: "resume.pdf" }) { publicURL } } )

“a<href={this.props.data.pdf}>a”

[jonniebigodes]

@brandontb12 i’ve picked up on your issue and based on the information you mentioned in the description i’m going to detail a possible solution for your case. This will extrapolated from the information available.

• Created a new Gatsby website based on the hello world starter.
• Installed gatsby-source-filesystem
• Changed gatsby-config.js to the following:

module.exports = {
  /* Your site config here */
  plugins:[
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
  ]
}

• Created the src\data folder and copied over a sample pdf file called a_random_example.pdf
• In my src\pages\index.js i changed it to the following:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
export default () => {
  const myexamplePdf = useStaticQuery(graphql`
    {
      pdf: file(name: { eq: "a_random_example" }) {
        name
        extension
        publicURL
      }
    }
  `)
  return (
    <div >
      <h1>example with a single pdf</h1>
      <a href={myexamplePdf.pdf.publicURL}><p>{myexamplePdf.pdf.name} without download</p></a>
      <a href={myexamplePdf.pdf.publicURL} download><p>{myexamplePdf.pdf.name} with download</p></a>
    </div>
  )
}

I’m fetching a single file, this time the pdf file i’ve mentioned and adding two links, the first one will display the pdf content and the second one will allow the pdf download. A small caveat regarding the second one. With the gatsby-source-filesystem package, the filename will be changed into name-of-file-uuid.pdf. I’ve issued yarn develop waited for the build process to complete and opening up http://localhost:8000 i’m presented with the following:

As you can see in the left side is the “page” and on the right side the pdf being displayed.

Feel free to provide feedback so that we can close this issue, or continue to work on it until we find a suitable solution.

[jonniebigodes]

@brandontb12 ok, no need to thank, glad to hear it, feel free to close this as it’s fixed if you don’t mind.