Gatsby“以编程方式从数据创建页面”无效

Question

我正在尝试这个。 但是用String! 收到错误， Errors: Variable "$slug" of required type "String!" was not provided. Errors: Variable "$slug" of required type "String!" was not provided. 甚至查询（以下在localhost：8000 / ___ graphql上运行良好）。 然后我试图String没有字符串。 然后错误消失了，但是我总是得到markdown信息相同的内容。

有没有人有解决这个问题的想法？

我的仓库： https : //github.com/koji/portfolio

先感谢您，

错误

import { useStaticQuery, graphql } from "gatsby";

export const getPostData = () => {
  const data = useStaticQuery(
    graphql`
      query getPostData($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
          frontmatter {
            title
            date
          }
          html
        }
      }
    `);
  return data.markdownRemark;
};

返回相同的内容

import { useStaticQuery, graphql } from "gatsby";

export const getPostData = () => {
  const data = useStaticQuery(
    graphql`
      query getPostData($slug: String) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
          frontmatter {
            title
            date
          }
          html
        }
      }
    `);
  return data.markdownRemark;
};

试图获取降价文件的标题

import * as React from "react";
import Layout from "../components/layout";
import { getPostData } from "../components/hooks/getPost";

const Blog = () => {
  const data = getPostData();
  console.log(data);
  return (
    <Layout>
      <h1>{data.frontmatter.title}</h1>
      <p>{data.frontmatter.date}</p>
      {data.html}

    </Layout>
  );

};

export default Blog;

gatsby-node.js

const path = require("path");

// onCreateNode API
module.exports.onCreateNode = ({node, actions}) => {
  const { createNodeField } = actions;
  // console.log(node);
  if(node.internal.type === 'MarkdownRemark') {
    const slug = path.basename(node.fileAbsolutePath, '.md');
    createNodeField({
      node,
      name: 'slug',
      value: slug
    });
  }
}

module.exports.createPages = async({ graphql, actions}) => {
  const { createPage } = actions;
  const blogTemplate = path.resolve('./src/templates/blog.tsx');
  const res = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `);
   res.data.allMarkdownRemark.edges.forEach(({node}) => {
     createPage({
       component: blogTemplate,
       path: `/blog/${node.fields.slug}`,
       context: {
         slug: node.fields.slug,
       }
     });
   })
}

Answer 1

您必须在帖子模板中使用常规页面查询，即export const query = graphql...

原因是useStaticQuery和<StaticQuery>不会收到您传递给createPage的context 。

官方文档：静态查询与页面查询的区别