Gastby-在Gastby-node.js中添加带有参数的GraphQL查询

在

gatsby node.js中，我有两个查询从Contentful获取数据。我想添加一个新的查询，根据其
slug
（Contentful中内容模型中设置的字段）加载特定内容的数据

这就是我所拥有的：

返回图形ql(
`
{
allContentfulBlogPost{
边缘{
节点{
身份证件
鼻涕虫
}
}
}
AllContentFulCaseStudio（筛选器：{slug:{ne:“虚拟内容”}）{
边缘{
节点{
身份证件
鼻涕虫
}
}
}
contentfulCaseStudy（slug:{eq:$slug}）{//{
if（result.errors）{
log（“检索内容数据时出错”，result.errors）
}
})
.catch（错误=>{
log（“检索内容数据时出错”，错误）
})
}

因此，我想查询通过
contentfulCaseStudy（slug:{eq:$slug}）
中
slug
的特定案例研究，但它不起作用。当我启动
npm run develope
时，它会抛出此错误：

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Variable "$slug" is not defined.

File: gatsby-node.js:13:10

Error retrieving contentful data [
  GraphQLError: Variable "$slug" is not defined.
      at Object.leave (C:\Edited\edited\edited\edited\node_modules\graphql\validation\rules\NoUndefinedVariables.js:38:33)
      at Object.leave (C:\Edited\edited\edited\edited\node_modules\graphql\language\visitor.js:345:29)
      at Object.leave (C:\Edited\edited\edited\edited\node_modules\graphql\language\visitor.js:395:21)
      at visit (C:\Edited\edited\edited\edited\node_modules\graphql\language\visitor.js:242:26)
      at validate (C:\Edited\edited\edited\edited\node_modules\graphql\validation\validate.js:73:24)
      at GraphQLRunner.validate (C:\Edited\edited\edited\edited\node_modules\gatsby\dist\query\graphql-runner.js:79:44)
      at GraphQLRunner.query (C:\Edited\edited\edited\edited\node_modules\gatsby\dist\query\graphql-runner.js:144:25)
      at C:\Edited\edited\edited\edited\node_modules\gatsby\dist\bootstrap\create-graphql-runner.js:40:19
      at Object.exports.createPages (C:\Edited\edited\edited\edited\gatsby-node.js:13:10)
      at runAPI (C:\Edited\edited\edited\edited\node_modules\gatsby\dist\utils\api-runner-node.js:259:37)
      at Promise.catch.decorateEvent.pluginName (C:\Edited\edited\edited\edited\node_modules\gatsby\dist\utils\api-runner-node.js:378:15)
      at Promise._execute (C:\Edited\edited\edited\edited\node_modules\bluebird\js\release\debuggability.js:384:9)
      at Promise._resolveFromExecutor (C:\Edited\edited\edited\edited\node_modules\bluebird\js\release\promise.js:518:18)
      at new Promise (C:\Edited\edited\edited\edited\node_modules\bluebird\js\release\promise.js:103:10)
      at C:\Edited\edited\edited\edited\node_modules\gatsby\dist\utils\api-runner-node.js:377:12
      at tryCatcher (C:\Edited\edited\edited\edited\node_modules\bluebird\js\release\util.js:16:23) {
    locations: [ [Object], [Object] ]
  }

是否可以请求将slug作为参数传递的特定案例研究？如果可以，是如何完成的？
简单的回答是，您不能直接进行过滤。您可以使用硬编码参数进行过滤，而不是使用动态预查询值

但是，您尝试使用
$slug
来传递变量

您试图实现的流程是：


从
allContentfulCaseStudy的内容数据中获取并创建页面

使用
contentfulCaseStudy
中
allContentfulCaseStudy
的
slug
来过滤每个
contentfulCaseStudy
的查询

因此，您需要将
contentfulCaseStudy
移动到
template.js
中，修改
gatsby node.js
如下：

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  const result = await graphql(
    `
      {
        allContentfulCaseStudy(filter: { slug: { ne: "dummy-content" } }) {
          edges {
            node {
              id
              slug
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const caseStudyTemplate= path.resolve(`src/templates/case-study.js`)

  result.data.allContentfulCaseStudy.edges.forEach(({ node }) => {
    createPage({
      path,
      component: caseStudyTemplate,
      context: {
        slug: node.slug,
      },
    })
  })
}

现在，在您的
case study.js
中，您可以使用
slug
变量，因为您是通过

从“React”导入React
从“盖茨比”导入{graphql}
从“./组件/布局”导入布局
导出默认函数案例研究（{data}）{
const caseStudy=data.contentfulCaseStudy
返回(
{案例研究，标题}
)
}
export const query=graphql`
查询（$slug:String！）{
contentfulCaseStudy（slug:{eq:$slug}）{
标题
概述
}
}
`

检查您的
localhost:8000/\uuuuuuu图形ql
游乐场，查看嵌套的
title
和
overview
是否位于
contentfulCaseStudy
下，或者是否需要修改查询结构

进一步阅读：





import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function CaseStudy({ data }) {
  const caseStudy= data.contentfulCaseStudy
  return (
    <Layout>
      <div>
        <h1>{caseStudy.title}</h1>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
        contentfulCaseStudy(slug: { eq: $slug }) {
          title
          overview
        }
  }
`