Reactjs 如何在Gatsby和GraphQL中正确使用formatString？

我正试图使盖茨比的幽灵博客发起者适应我的需要。 当我尝试设置日期格式，以便在每篇文章页面的文章下方显示日期，如MM-DD-YYYY。我用了格式化字符串。我使用graphiql UI界面创建了一个查询。但是我不知道如何在盖茨比中使用它，尤其是在posts.js文件中。我遇到冲突，说我不能在同一个文件中有两个查询，还有变量定义问题。它就是不起作用。下面是我的posts.js文件的代码：

import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from "gatsby"
import { Helmet } from 'react-helmet'

import postStyle from "./post.module.scss"

import Layout from '../components/layout'
import { MetaData } from '../components/common/meta'

/**
* Single post view (/:slug)
*
* This file renders a single post and loads all the content.
*
*/


const Post = ({ data, location }) => {
    const post = data.ghostPost

    return (
        <>
            <MetaData
                data={data}
                location={location}
                type="article"
            />
            <Helmet>
                <style type="text/css">{`${post.codeinjection_styles}`}</style>
            </Helmet>
            <Layout>
                <div className={postStyle.postContainer}>
                    <article className="content">
                        { post.feature_image ?
                              <figure className="post-feature-image">
                                  <img className={postStyle.featureImageItself} src={ post.feature_image } alt={ post.title } />
                              </figure> : null }
                        <div className={postStyle.titleArea} styles={{ backgroundImage:`url($post.feature_image)` }}>
                          <h1 className={postStyle.postTitle}>{post.title}</h1>
                          <p>Published: {post.PostPublishedDate1}</p>
                        </div>
                        <section className={postStyle.postContent}>
                            {/* The main post content */ }
                            <section
                                className={postStyle.contentBody}
                                dangerouslySetInnerHTML={{ __html: post.html }}
                            />
                        </section>
                        <div>
                          {post.tags_name}
                        </div>
                    </article>
                </div>
            </Layout>
        </>
    )
}

Post.propTypes = {
    data: PropTypes.shape({
        ghostPost: PropTypes.shape({
            codeinjection_styles: PropTypes.object,
            title: PropTypes.string.isRequired,
            html: PropTypes.string.isRequired,
            feature_image: PropTypes.string,
            tags_name: PropTypes.string,
        }).isRequired,
        allGhostPost: PropTypes.shape({
            published_at: PropTypes.string,
        }).isRequired,
    }).isRequired,
    location: PropTypes.object.isRequired,
}



const PostPublishedDate1 = () => (
  <StaticQuery
    query={graphql`
      query($slug: String!)
      {

        ghostPost(slug: { eq: $slug }) {
            ...GhostPostFields
        }


        allGhostPost(filter: {id: {}, slug: { eq: $slug }}) {
          edges {
            next {
              id
            }
            node {
              id
              published_at(formatString: "MM/DD/YYYY")
            }
          }
        }
      }
    `}
    render={data => <pre>{JSON.stringify(data, null, 4)}</pre>}
  ></StaticQuery>
)



export default Post
 

从“React”导入React
从“道具类型”导入道具类型
从“盖茨比”导入{StaticQuery，graphql}
从“react Helmet”导入{Helmet}
从“/post.module.scss”导入postStyle
从“../components/Layout”导入布局
从“../components/common/meta”导入{MetaData}
/**
*单柱视图（/：slug）
*
*此文件呈现一篇文章并加载所有内容。
*
*/
const Post=（{data，location}）=>{
const post=data.ghostPost
返回(
{`${post.codeinjection\u styles}`}
。而是导出一个页面查询，该查询获取必要的信息，并根据需要将其传递给子级

也就是说，不要使用
PostPublishedDate1
，只需执行以下操作：

export const query = graphql`
  query PostQuery($slug: String!) {
    ghostPost(slug: { eq: $slug }) {
      ...GhostPostFields
    }

    allGhostPost(filter: {id: {}, slug: { eq: $slug }}) {
      edges {
        next {
          id
        }
        node {
          id
          published_at(formatString: "MM/DD/YYYY")
        }
      }
    }
  }
`