[英]Where to define variables in GraphQL
Excuse this newbie here.在这里请原谅这个新手。 I want to list some articles based on their categories, now I have categories page where you click a category, a list of articles under that specific category should open.我想根据它们的类别列出一些文章,现在我有类别页面,您可以在其中单击一个类别,应该打开该特定类别下的文章列表。 The question is, where to define the variable for the slug [which is equal to the article's category].问题是,在哪里定义 slug 的变量[等于文章的类别]。 Where to define $slug variable which is equal to the category, given that I come from categories page, this must be a post request which sends the clicked category, I should put it somewhere on that page, can someone guide me if I make any sense here?!在哪里定义等于类别的 $slug 变量,鉴于我来自类别页面,这必须是发送点击类别的帖子请求,我应该将它放在该页面的某个位置,如果我做任何事情,有人可以指导我感觉在这里?! Thanks in advance.提前致谢。
const EduCatTemp = ({data}) => {
const {allStrapiEducations:{nodes:educations}} = data
return (
<Layout>
{
educations.map((education)=> {
return (
<p>{education.title}</p>
)
})
}
</Layout>
)
}
export default EduCatTemp
export const query = graphql`
{
allStrapiEducations(filter: {education_category: {slug: {eq: $slug}}}) {
nodes {
title
}
}
}
Here is my gatsby-node.js file这是我的 gatsby-node.js 文件
educations: allStrapiEducations {
nodes {
slug
}
}
education_categories: allStrapiEducationCategories {
nodes {
slug
}
}
result.data.educations.nodes.forEach(education => {
createPage({
path: `/education/${education.slug}`,
component: path.resolve(`src/templates/education-template.js`),
context: {
slug: education.slug,
},
})
})
result.data.education_categories.nodes.forEach(educat => {
createPage({
path: `/education/${educat.slug}`,
component: path.resolve(`src/templates/education-category-template.js`),
context: {
slug: educat.slug,
},
})
})
Here is the [parent] education page which I want to take the slug from这是我想从中获取 slug 的 [parent] 教育页面
import React from 'react'
import Layout from '../components/layout'
import EducationCard from '../components/EducationComponent/EducationCard'
import Category from '../components/utilities/Category'
const Education = ({data}) => {
const {allStrapiEducationCategories:{nodes:educations}} = data
return (
<Layout>
<div className="p-5">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 headline py-10">Beekeeping Programs</h1>
<input type="search" id="gsearch" placeholder="Search..." name="gsearch" className="my-5 py-2 search-button lg:w-1/3" />
<div className="flex flex-wrap mx-auto">
{educations.map((education)=> {
return <EducationCard headline={education.name} image={education.picture.childImageSharp.fixed} slug={`/education/${education.slug}`} />
})}
</div>
</div>
</Layout>
)
}
export default Education
export const query = graphql`
{
allStrapiEducationCategories {
nodes {
slug
picture {
childImageSharp {
fixed(width: 400
height: 200) {
...GatsbyImageSharpFixed
}
}
}
name
}
}
}
`
I somehow could reolve the issue, which was editing the Graphql query in a slightly different way, given that I had gatsby-node.js set up correctly.考虑到我正确设置了 gatsby-node.js,我以某种方式可以解决这个问题,即以稍微不同的方式编辑 Graphql 查询。
export const query = graphql`
query getSingleNewsCategory($slug: String!)
{
strapiNewsCategories(slug: { eq: $slug }) {
name
}
allStrapiIndustries(
filter: {news_category: {slug: {eq: $slug}}}
) {
nodes {
report_photo {
childImageSharp {
fluid {
src
}
}
}
quote
content
title
slug
minutes_read
date(formatString: "MM")
article_author {
name
}
}
}
allStrapiNewsCategories {
nodes {
slug
name
}
}
}
`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.