使用查询变量时出现 Gatsby 运行时错误

Posted 2023-03-08

【中文标题】使用查询变量时出现 Gatsby 运行时错误

【英文标题】：Gatsby runtime error while using query variable

【发布时间】：2021-06-12 20:55:51

【问题描述】：

我正在使用查询变量 slug 为 gatsby 中的特定页面进行路由。所以我使用模板 project-datails.js 来创建页面。

所以 project-datails.js 和 graphql 查询变量看起来像这样

import React from "react"
import Layout from "../components/Layout"
import  graphql  from "graphql"


import * as styles from "../styles/project-details.module.css"


export default function ProjectDetails( data) 
  console.log(data)

 
  const  title, stack  = data.markdownRemark.frontmatter
  return (
    <Layout>
      <div className=styles.details>
        <h2>title</h2>
        <h3>stack</h3> 
        <h1>Hello</h1>
       </div>
    </Layout>
  )


export const query = graphql`
  query ProjectDetails($slug: String) 
    markdownRemark(frontmatter:  slug:  eq: $slug  ) 
      html
      frontmatter 
        stack
        title
        
    
  
`

当我记录数据时，它显示 undefined。当我在

上运行相同的查询时

 http://localhost:8000/___graphql

它的显示数据。

因此，如果我在不使用 garaphql 查询变量或不从 garaphql 获取数据的情况下运行模板，例如仅在模板内打印这一行

<h1>Hello</h1>

它工作正常。

所以当我使用查询变量时，它会显示运行时错误。

这个查询变量 slug 我从 gatsby-node.js 传递它作为这个

const path = require(`path`)

exports.createPages = async ( graphql, actions ) => 

  const  data  = await graphql(`
    query Articles 
      allMarkdownRemark 
        nodes 
          frontmatter 
            slug
          
        
      
    
  `)

  data.allMarkdownRemark.nodes.forEach(node => 
    actions.createPage(
      path: '/projects/'+ node.frontmatter.slug,
      component: path.resolve('./src/templates/Project-details.js'),
      context: slug: node.frontmatter.slug 
    )
  )

markdownfile dojo-coffee-house.md 看起来像这样

---
title: The Dojo Coffee House
stack: HTML & CSS
slug: the-dojo-coffee-house
date: 2021-01-01T00:00:00+00:00
thumb: ../images/thumbs/coffee.png
featuredImg: ../images/featured/coffee-banner.png
---

Lorem ninja ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

更新

我在模板 project-datails.js 中收到警告

                                                 
 warning  In page templates only a default export of a valid React component and the named export of a page
query is allowed.
        All other named exports will cause Fast Refresh to not preserve local component state and do a full refresh.

        Please move your other named exports to another file. Also make sure that you only export page queries that
use the "graphql" tag from "gatsby".
  limited-exports-page-templates

我无法弄清楚这里的错误。那么有人可以帮忙吗？

【问题讨论】：

能否提供markdown文件（及其命名）以及gatsby-node.js文件的完整（或最具代表性的部分）？

@FerranBuireu 我已经编辑了这篇文章。并添加了 gatsby-node.js 文件的完整代码。

您是否共享了所有模板 (ProjectDetails)？

是的，我已经添加了PorjectDeatails.js的完整代码

“还要确保只导出使用“gatsby”中的“graphql”标签的页面查询。” !!!

【参考方案1】：

从“graphql”导入 graphql -> 从“gatsby”导入 graphql

你还需要 ProjectDetails 做下一步：

之前：

导出默认值 () => ;

之后：

函数项目详细信息 = () => ;

导出默认项目详情；