Gatsby 和 GraphQL：使用 <StaticQuery/> 查询 pdf 文件

Question

我是 graphQL 的新手。

在 src 中，我有一个 data 文件夹，其中包含一个名为 my_cv.pdf

的 pdf

问题：我无法在浏览器中加载它或下载它。我得到一个错误 There's not a page yet at /data.file.publicURL

gatsby.config.js

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

my hero component

这是 class 组件的 render() 内部。

 <Resume href="data.file.publicURL" target="_blank">
    Download Resume
  </Resume>

我是这样查询的

<StaticQuery
    query={graphql`
      query {
        pdf: file(name: { eq: "my_cv.pdf" }) {
          name
          extension
          publicURL
        }
</StaticQuery>

Answer 1

问题是您将 file 别名为 pdf，因此嵌套应该是：

 <Resume href="data.pdf.publicURL" target="_blank">
    Download Resume
  </Resume>

如果你使用 StaticQuery 我想你可能想使用类似的东西：

import React from "react";
import { StaticQuery, graphql } from "gatsby";

export default function Header() {
  return (
    <StaticQuery
      query={graphql`
        query {
          pdf: file(name: { eq: "my_cv.pdf" }) {
            name
            extension
            publicURL
          }
        }
      `}
      render={(data) => (
        <Resume href="data.pdf.publicURL" target="_blank">
          Download Resume
        </Resume>
      )}
    />
  );
}

如果您使用 useStaticQuery 挂钩，您可以将逻辑与 StaticQuery 组件的 Resume 分离

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

export default function Header() {
  const data = useStaticQuery(graphql`
    query {
      pdf: file(name: { eq: "my_cv.pdf" }) {
        name
        extension
        publicURL
      }
    }
  `);

  return (
    <Resume href="data.pdf.publicURL" target="_blank">
      Download Resume
    </Resume>
  );
}

在这两种情况下，请确保 GraphQL 查询返回有效数据。

Gatsby 和 GraphQL：使用 <StaticQuery/> 查询 pdf 文件

Gatsby and GraphQL: query pdf file using <StaticQuery/>

graphql

gatsby