GraphQL 请求错误 - 未知参数“slug”

Posted 2023-03-08

【中文标题】GraphQL 请求错误 - 未知参数“slug”

【英文标题】：GraphQL request error - Unknown argument 'slug'

【发布时间】：2019-09-16 05:18:13

【问题描述】：

我正在尝试将我的 index.js 页面链接到文章模板，以使用 slug 和 createPages 显示来自中间件 Drupal 站点的数据。我的 index.js 页面上的数据正确显示，并且在将文件路径更改为 ./src/templates/article.js 后，我的 createPages 似乎没有任何错误。

我在编译时遇到了这个 GraphQL 错误：

错误 GraphQL 错误 编译您网站的 GraphQL 查询。错误：RelayParser：遇到 1 个错误： - 未知参数“蛞蝓”。来源：文档users***srelytHtdocsRepositoryGatsbyGraphqlGatsbySrcTemplatesArticleJs4119530598 文件：GraphQL request

  GraphQL request (3:12)
  2:   query($slug: String!) 
  3:     umdHub(slug:  eq: $slug ) 
                ^
  4:       articles 

我的article.js代码：

import React from 'react'
import  graphql  from 'gatsby'
import  ListGroup, ListGroupItem  from 'reactstrap';

// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"


export default ( data ) => 
  return (
    <div>
      <Header />
      <div className="container spaces article">
        <div className="row">
          <section className="col-md-9">
            <div className="tag-list">
              <ul class="list-inline">
                <li class="list-inline-item"><a href="/">Highlighted</a></li>
                <li class="list-inline-item"><a href="/">Innovation</a></li>
                <li class="list-inline-item"><a href="/">Web Only</a></li>
                <li class="list-inline-item">February 28, 2019</li>
              </ul>
            </div>
            <h1>data.title</h1>
            data.hero_image.map((hero, i) => (
              <div key=i>
                <img className="img-fluid no-pad-top med-spaces" src=hero.url_1200_630  />
              </div>
            ))
            <div className="row article-content">
              <div className="col-md-10 offset-md-1">
                <h2 className="subheader">data.subtitle</h2>
                <div className="author"> 
                  <p>By <a href="/">Jane Doe</a> | Photos by <a href="/">ISTOCK</a></p>
                  <hr />
                </div>
                <div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
              </div>
            </div>
          </section>
          <aside className="col-md-3">
            <div>
              <ListGroup flush>
                <ListGroupItem disabled tag="a" href="#">Recent Posts</ListGroupItem>
                <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
                <span>February 27, 2019</span>
              </ListGroup>
            </div>
          </aside>
        </div>
      </div>


      <Footer />
    </div>

  )



export const query = graphql`
  query($slug: String!) 
    umdHub(slug:  eq: $slug ) 
      articles 
        data 
          id
          title
          subtitle
          body
          summary
          hero_image 
            url_1200_630
          
          authorship_date 
            formatted_short
            unix
            unix_int
            formatted_long
            formatted_short
            time
          
          slug
        
      
    
  
`

我的 gatsby-node.js：

const path = require(`path`)

exports.createPages = ( graphql, actions ) => 
  const  createPage  = actions
  const articleTemplate = path.resolve(`./src/templates/article.js`)
  return graphql(`
    
        umdHub 
          articles 
            data 
              id
              title
              subtitle
              body
              summary
              hero_image 
                url_1200_630
              
              authorship_date 
                formatted_short
                unix
                unix_int
                formatted_long
                formatted_short
                time
              
              slug
            
          
        
      
  `).then(result => 
    if (result.errors) 
      throw result.errors
    

    result.data.umdHub.articles.data.forEach(data => 
      createPage(
        path: `$data.slug`,
        component: articleTemplate,
        context: 

        ,
      )
    )
  )

【问题讨论】：

希望有用：***.com/a/55930667/8585114

【参考方案1】：

filter 的快捷方式仅适用于直接节点的字段，即您可以通过articles 过滤umdHub。因此，当您按 slug 过滤时，它会在 umdHub 中查找字段 slug，该字段不存在，因为 slug 位于 umdHub.articles.data 下。

这可能会有所帮助：

export const query = graphql`
  query($slug: String!) 

-   umdHub(slug:  eq: $slug ) 
+   umdHub(articles:  data:  slug:  eq: $slug   ) 

      articles 
        data 
          slug
        
      
    
  

【讨论】：

在umdHub(articles: data: slug: eq: $slug ) 中的“文章”上仍然出现错误

@***srelyt 你的文章有什么错误？

error GraphQL Error There was an error while compiling your site's GraphQL queries. Error: RelayParser: Encountered 1 error(s): - Unknown argument 'articles'. Source: document users***srelytHtdocsRepositoryGatsbyGraphqlGatsbySrcTemplatesArticleJs1360934319` 文件：GraphQL request GraphQL 请求（3:12）2：查询（$slug：字符串！）3：umdHub（文章：数据： slug： eq : $slug ) ^ 4: 文章 `

@***srelyt 看起来umdHub 不支持过滤和搜索。您是如何创建 umdHub 的，或者是哪个 cms / 插件为您创建的？

@***srelyt 看起来我的回答获得了赏金，即使它没有解决您的问题。下次遇到难题时联系我，我会在那里为您添加赏金！