Блог

Я прочитал документацию и попробовал несколько учебных пособий, но я застрял на выборе пользовательских типов сообщений с помощью GatsbyJS.

Я попробовал несколько подходов, но ни один из них не работает так, как ожидалось. Я всегда получаю 404.

Это часть фрагмента, который я использую, который отлично работает со страницами и сообщениями, но не с пользовательским типом сообщений. Страницы проектов должны быть созданы в подпапке/пути проекта. Например: example.com/project/my-first-project

Та часть, которая gatsby-node.js выглядит так:

 const createSinglePages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) =>
      // createPage is an action passed to createPages
      // See https://www.gatsbyjs.com/docs/actions#createPage for more info
      gatsbyUtilities.actions.createPage({
        // Use the WordPress uri as the Gatsby page path
        // This is a good idea so that internal links and menus work 👍
        path: post.uri,

        // use the blog post template as the page component
        component: path.resolve(
          `./src/templates/${post.__typename.replace(`Wp`, ``)}.js`
        ),

        // `context` is available in the template as a prop and
        // as a variable in GraphQL.
        context: {
          // we need to add the post id here
          // so our blog post template knows which blog post
          // the current page is (when you open it in a browser)
          id: post.id,

          // We also use the next and previous id's to query them and add links!
          previousPostId: previous ? previous.id : null,
          nextPostId: next ? next.id : null,
        },
      })
    )
  );
 

В src/template/project.js файл выглядит так:

 import React from "react";
import { Link, graphql } from "gatsby";
import Image from "gatsby-image";
import parse from "html-react-parser";

import Layout from "../components/Layout";
import Seo from "../components/Seo";

const ProjectTemplate = ({ data: { post } }) => {
  const featuredImage = {
    fluid: post.featuredImage?.node?.localFile?.childImageSharp?.fluid,
    alt: post.featuredImage?.node?.alt || ``,
  };

  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>

          {/* if we have a featured image for this post let's display it */}
          {featuredImage?.fluid amp;amp; (
            <Image
              fluid={featuredImage.fluid}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
            />
          )}
        </header>

        {!!post.content amp;amp; (
          <section itemProp="articleBody">{parse(post.content)}</section>
        )}
      </article>
    </Layout>
  );
};

export default ProjectTemplate;

export const pageQuery = graphql`
  query ProjectById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
  ) {
    # selecting the current post by id
    post: wpProject(id: { eq: $id }) {
      id
      content
      title
      date(formatString: "MMMM DD, YYYY")
      featuredImage {
        node {
          altText
          localFile {
            childImageSharp {
              fluid(maxWidth: 1000, quality: 100) {
                ...GatsbyImageSharpFluid_tracedSVG
              }
            }
          }
        }
      }
    }
  }
`;
 

API Gatsby автоматически создает подпапку, или мне нужно где-то определить это для каждого типа записи?

Любая помощь будет признательна!

Чтобы использовать пользовательские типы записей с WPGraphQL, необходимо настроить тип записи на show_in_graphql, используя следующее поле:

show_in_graphql : верно

При регистрации нового пользовательского типа записи Это пример регистрации нового типа post_type «docs» и включения поддержки GraphQL.

 add_action( 'init', function() {
   register_post_type( 'docs', [
      'show_ui' => true,
      'labels'  => [
        //@see https://developer.wordpress.org/themes/functionality/internationalization/
        'menu_name' => __( 'Docs', 'your-textdomain' ),
      ],
      'show_in_graphql' => true,
      'hierarchical' => true,
      'graphql_single_name' => 'document',
      'graphql_plural_name' => 'documents',
   ] );
} );
 

Вы определяете «подпапку» под путем field в:

   gatsbyUtilities.actions.createPage({
        path: post.uri,
            component: path.resolve(
          `./src/templates/${post.__typename.replace(`Wp`, ``)}.js`
        ),

        context: {
          id: post.id,
          previousPostId: previous ? previous.id : null,
          nextPostId: next ? next.id : null,
        },
      })
 

Вам просто нужно сделать что-то вроде:

 path: `projects/${post.id}`
 

Проверьте косые черты и завершающие косые черты здесь.

Вы можете заменить cna projects для своего динамического типа проекта, если вы получите эту информацию для более автоматического подхода (при условии, что это так post.__typename ).