Gatsby: كيفية تمرير متغير من gatsby-node.js إلى الصفحات

تم إنشاؤها على ١٩ مايو ٢٠١٩  ·  1تعليق  ·  مصدر: gatsbyjs/gatsby

هذا هو الجزء الخاص بي من الكود الخاص بي في الوقت الحالي

        const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              date,
              previous,
              next,
            },
          })
        })

كنت أتساءل كيف يمكنني تمرير date كدعم لـ _single.js_ أو بأي طريقة أخرى يمكنني من خلالها تمرير القيمة إلى أسفل.

question or discussion

التعليق الأكثر فائدة

@ Hypothesis-github قبل كل شيء ، هل تستخدم واجهة برمجة تطبيقات createPage لحقن البيانات في مكونات فردية؟ أو أن هذه الأغنية هي في الواقع نموذج؟ وما تريده على الأرجح هو شيء من هذا القبيل:

const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              cockpidate:date,
              previousitem:previous,
              nextitem:next,
            },
          })
        })

وعلى single.js :

import React from "React"
import {Link} from "gatsby"

const Single=props=>{
   const {pageContext}= props
   const {slug,cockpidate,nextitem,previousitem}= pageContext
  return (
      <div>
        <h3>{slug}</h3>
         <hr/>
         <h5>created at {cockpidate}</h5>
         <Link to={nextitem}/>next item</Link>
          <Link to={previousitem}/>previousitem</Link>
       <div>
  )
}
export default Single

لا تتردد في تقديم ملاحظات

>كل التعليقات

@ Hypothesis-github قبل كل شيء ، هل تستخدم واجهة برمجة تطبيقات createPage لحقن البيانات في مكونات فردية؟ أو أن هذه الأغنية هي في الواقع نموذج؟ وما تريده على الأرجح هو شيء من هذا القبيل:

const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              cockpidate:date,
              previousitem:previous,
              nextitem:next,
            },
          })
        })

وعلى single.js :

import React from "React"
import {Link} from "gatsby"

const Single=props=>{
   const {pageContext}= props
   const {slug,cockpidate,nextitem,previousitem}= pageContext
  return (
      <div>
        <h3>{slug}</h3>
         <hr/>
         <h5>created at {cockpidate}</h5>
         <Link to={nextitem}/>next item</Link>
          <Link to={previousitem}/>previousitem</Link>
       <div>
  )
}
export default Single

لا تتردد في تقديم ملاحظات

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات