Gatsby Ghost模板中GraphQL formatString用法及查询冲突解决

Hey there! Let's work through these Gatsby + Ghost template issues step by step—sounds like you're hitting two common roadblocks with your post date formatting and GraphQL queries. Let's break this down and fix it.

First: Fixing the "Two Queries in One File" Error #

Gatsby page components only allow one named page query (the `export const query = graphql`` syntax) per file. If you had two separate queries (maybe one for core post data, another you added just for date formatting), you need to merge all your required fields into a single query. There's no need for multiple queries here—we can add the date formatting directly to your existing post data query.

Second: Using formatString & Fixing Variable Issues #

Ghost's post data in Gatsby uses camelCase fields (so published_at from the Ghost API becomes publishedAt in GraphQL). To format it to MM-DD-YYYY, we'll use the formatString argument directly on the publishedAt field in your query, and make sure your query variables are properly set up.

Step 1: Update Your Posts.js Query

Here's how your merged query should look (replace any existing queries with this):

import React from "react";
import { graphql } from "gatsby";

const PostTemplate = ({ data }) => {
  const post = data.ghostPost;

  return (
    <div className="post-content">
      <h1>{post.title}</h1>
      {/* Render the formatted date */}
      <p className="post-date">Published: {post.publishedAt}</p>
      {/* Render your post content */}
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  );
};

// Single merged query with date formatting and variable
export const query = graphql`
  query PostPageQuery($slug: String!) {
    ghostPost(slug: { eq: $slug }) {
      title
      html
      # Add formatString to get MM-DD-YYYY date
      publishedAt(formatString: "MM-DD-YYYY")
      # Add any other fields you need (excerpt, tags, author, etc.)
    }
  }
`;

export default PostTemplate;

Step 2: Verify Variable Setup

The $slug variable in the query is passed to your template via Gatsby's createPage API in gatsby-node.js. Make sure that file has code like this to pass the slug correctly:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const posts = await graphql(`
    {
      allGhostPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `);

  posts.data.allGhostPost.edges.forEach(({ node }) => {
    createPage({
      path: `/posts/${node.slug}/`, // Adjust your path to match your site's structure
      component: require.resolve("./src/templates/posts.js"),
      context: {
        slug: node.slug, // This passes the slug to your query's $slug variable
      },
    });
  });
};

Quick Checks to Avoid Headaches #

• Double-check the field name: Ghost's publish date is publishedAt (camelCase) in Gatsby's GraphQL layer, not published_at.
• Ensure you only have one export const query in your posts.js file—delete any duplicate query declarations.
• If you were using a static query instead of a page query (unlikely for a single post template), static queries don't support variables, so you'll need to switch to a page query (which does support variables like $slug).

That should resolve both the duplicate query error and the variable/date formatting issues. Let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者mkh122