在gatsby.js中将graphql数据从父级传递给子级

Question

为了不重复我自己，我想制作一个像这样的组件

import React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"
// import Pager from "../components/pager"
import { lazy } from '@loadable/component'
import loadable from '@loadable/component'
const Pagination = loadable(() => import('../components/page/pagination'))
const Pager = lazy(() => import('../components/pager'))
const Dropdown = lazy(() => import('../components/dropdown/index'))

class PaginationNew extends React.Component {
render() {
const data = this.props
const posts = this.props.data.allCockpitPost.edges
const { pageContext } = this.props
// mama, pageContext

return (
<>
<div className="paginate-name-div">
<h1 className="paginate-h1">Semua postingan</h1>
{typeof window !== 'undefined' && (
<Suspense fallback={<div>Loading...</div>}>
<Dropdown pageContext={pageContext} />
</Suspense>
)}
</div>
<ul className="paginate-ul">
{posts.map(({ node, }) => {
return (
<li className="paginate-li" key={node.id}>
<Link to={`/${node.title.slug}`} className="paginate-link">
<div className="paginate-div1" >
<Img crossOrigin="true" imgStyle={{ objectFit: "unset", }} loading="lazy" fadeIn={false} fluid={node.image.value.childImageSharp.fluid} alt={node.title.value} className="paginate-img" />
</div>
<div className="paginate-div2">
<h3 dangerouslySetInnerHTML={{ __html: node.title.value }} className="paginate-h3" />
<p className="paginate-written"> Ditulis Oleh {node.content.value.childMarkdownRemark.frontmatter.author} Pada {node.date.value}</p>
<div dangerouslySetInnerHTML={{ __html: node.description.value.childMarkdownRemark.excerpt }} className="paginate-div3">
</div>
</div>
</Link>
</li>
)
})}
</ul>
{typeof window !== 'undefined' && (
<Suspense fallback={<div>Loading...</div>}>
<Pager pageContext={pageContext} />
</Suspense>
)}   
</>
)
}
}
export default PaginationNew

过去属于这个代码

import React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"
// import Pager from "../components/pager"
import { lazy } from '@loadable/component'
import loadable from '@loadable/component'

// import Dropdown from '../components/dropdown/index'

// const Layout = loadable(() => import('../components/layout'))
const SEO = loadable(() => import('../components/seo'))
const PaginationNew = loadable(() => import('../components/page/pagination'))
const Pager = lazy(() => import('../components/pager'))
const Dropdown = lazy(() => import('../components/dropdown/index'))

export const pageQuery = graphql`
query($skip: Int!, $limit: Int!) {
site { 
siteMetadata {
title
} 
}
allCockpitPost(filter: {lang: {eq: "id"}, published: {value: {eq: true}}}, sort: {order: DESC, fields: date___value}, limit: $limit, skip: $skip) {
edges { 
node {
id
title { 
value
slug
}
image { 
value {
childImageSharp {
fluid(toFormat: WEBP, webpQuality: 80, toFormatBase64: WEBP, quality: 80, pngQuality: 80, jpegQuality: 80, maxWidth: 600) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
}
}
description {  
value {
childMarkdownRemark {
excerpt(pruneLength: 160)
}
}
}
content { 
value {
childMarkdownRemark {
frontmatter {
author
}
}
}
}
date {
value(formatString: " DD MMMM, YYYY")
}
}
} 
}
}
`;

const PaginateTemplate = ({location, data}) =>{
return (
<Layout location={location} >
<SEO title="semua postingan" description="blog oleh pelajar dan untuk orang-orang yang ingin belajar." />
<PaginationNew data={data}/>
</Layout>
)}
export default PaginateTemplateimport React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"
// import Pager from "../components/pager"
import { lazy } from '@loadable/component'
import loadable from '@loadable/component'

// import Dropdown from '../components/dropdown/index'

// const Layout = loadable(() => import('../components/layout'))
const SEO = loadable(() => import('../components/seo'))
const PaginationNew = loadable(() => import('../components/page/pagination'))
const Pager = lazy(() => import('../components/pager'))
const Dropdown = lazy(() => import('../components/dropdown/index'))

export const pageQuery = graphql`
query($skip: Int!, $limit: Int!) {
site { 
siteMetadata {
title
} 
}
allCockpitPost(filter: {lang: {eq: "id"}, published: {value: {eq: true}}}, sort: {order: DESC, fields: date___value}, limit: $limit, skip: $skip) {
edges { 
node {
id
title { 
value
slug
}
image { 
value {
childImageSharp {
fluid(toFormat: WEBP, webpQuality: 80, toFormatBase64: WEBP, quality: 80, pngQuality: 80, jpegQuality: 80, maxWidth: 600) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
}
}
description {  
value {
childMarkdownRemark {
excerpt(pruneLength: 160)
}
}
}
content { 
value {
childMarkdownRemark {
frontmatter {
author
}
}
}
}
date {
value(formatString: " DD MMMM, YYYY")
}
}
} 
}
}
`;

const PaginateTemplate = ({location, data}) =>{
return (
<Layout location={location} >
<SEO title="semua postingan" description="blog oleh pelajar dan untuk orang-orang yang ingin belajar." />
<PaginationNew data={data}/>
</Layout>
)}
export default PaginateTemplate

我之所以这么做，是因为上面的第二个代码通过更改graphql中的标签过滤器来重复，所以有一个类似的代码，它有不同的名称和不同的标签过滤器。

我在gatsby-node.js中为每个标签都有它。。

kurikulum标签/页面看起来是这样的

const kurikulumPageResults = graphql(`
{
kurikulumPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "kurikulum"}}}}) {
edges {
node {
childMarkdownRemark {
frontmatter {
title
slug
}
}
}
}
}
}
`).then(result => {
if (result.errors) {
Promise.reject(result.errors);
}

paginate({
createPage, 
items: result.data.kurikulumPageResults.edges, 
itemsPerPage: 5, 
pathPrefix: '/kurikulum', 
component: path.resolve('./src/templates/kurikulum.jsx'),

})  
});

Answer 1

我通过最小化repo找到了答案。

组件看起来像这样：

const PaginationNew = ({data}) => {

const posts = data

然后向分页模板添加道具

const  PaginateTemplate = ({data }) => {
const posts = data.allCockpitPost.edges
return (
<PaginationNew data={posts}/>