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

【问题标题】：How can I use formatString correctly in Gatsby and GraphQL?如何在 Gatsby 和 GraphQL 中正确使用 formatString？
【发布时间】：2021-01-06 02:35:24
【问题描述】：

我正在尝试根据我的需要调整 Gatsby 的 Ghost 博客启动器。当我尝试格式化日期以便它们显示在每个帖子页面的帖子下方时，例如 MM-DD-YYYY。我为此使用了formatString。我使用 graphiql UI 界面创建了一个查询。但我不知道如何在 gatsby 中使用它，尤其是在 post.js 文件中。我遇到冲突说我不能在同一个文件中有 2 个查询，还有变量定义问题。它只是没有用。这是我的 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

这是我收到的错误消息的一个示例： gatsby error

【问题讨论】：

标签： reactjs gatsby ghost-blog

【解决方案1】：

You can't use variables in Static Queries。而是导出一个页面查询，该查询获取必要的信息并根据需要将其传递给子级。

也就是说，不要像 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")
        }
      }
    }
  }
`

【讨论】：