Copy
gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Copy
yarn add gatsby-source-wordpress　gatsby-plugin-sharp
gatsby-transformer-sharp　gatsby-core-utils

Copy
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url:
          // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
          process.env.WPGRAPHQL_URL || `http://localhost:8000/graphql`,
        schema: {
          //Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
        },
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ],
}

Copy
const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // query content for WordPress posts
  const {
    data: {
      allWpPost: { nodes: allPosts },
    },
  } = await graphql(`
    query {
      allWpPost {
        nodes {
          id
          uri
        }
      }
    }
  `)

  const postTemplate = path.resolve(`./src/templates/post.js`)

  allPosts.forEach(post => {
    createPage({
      // will be the url for the page
      path: post.uri,
      // specify the component template of your choice
      component: slash(postTemplate),
      // In the ^template's GraphQL query, 'id' will be available
      // as a GraphQL variable to query for this post's data.
      context: {
        id: post.id,
      },
    })
  })
}

Copy
import React from "react"

const Post = () => {

  return (
    <div>
      <div></div>
    </div>
  )
}

export default Post

Copy
gatsby develop

Copy
query MyQuery {
  allWpPost {
    nodes {
      content
      uri
      title
    }
  }
}

Copy
import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Post = () => {
  const data = useStaticQuery(graphql`
    query MyQuery {
      allWpPost {
        nodes {
          content
          uri
          title
          id
        }
      }
    }
  `)
  
  return (
    <div>
      {data &&
        data.allWpPost.nodes.map((post) => {
          return (
            <div key={post.id}>
              <h1>{post.title}</h1>
              <div dangerouslySetInnerHTML={{ __html: post.content }} />
            </div>
          )
        })}
    </div>
  )
}

export default Post