Giter VIP home page Giter VIP logo

gatsby-wpgraphql-blog-example's Introduction

DEPRECATED


This repository serves as an example of how to build a Gatsby site using WordPress as the CMS, WPGraphQL as the API and Gatsby Source GraphQL as the data source.

This example repo should no longer be considered "the best" way to use Gatsby and GraphQL anymore. Instead of using Gatsby Source GraphQL, we recommend using Gatsby Source WordPress Experimental, which will soon become the official Gatsby Source WordPress.

You can read more about why previous versions of Gatsby Source WordPress and Gatsby Source GraphQL are not ideal, and why Gatsby is investing in the new Gatsby Source WordPress Experimental plugin in this WPTavern article: https://wptavern.com/new-gatsby-source-wordpress-plugin-now-in-beta


Gatsby Gatsby

Gatsby + WPGraphQL Blog Example

This is an example Gatsby site using WPGraphQL as the source.

WordCamp Talk

This repo was created specifically for showcasing the capabilities of WPGraphQL and how it can be used in many ways. One particular use is with GatsbyJS. The WordCamp talk this repo was created for can be seen here: https://wordpress.tv/2019/03/08/jason-bahl-building-static-sites-with-wordpress-gatsby-and-wpgraphql/

Setup

Quick video showing setup of the Gatsby site locally: https://www.youtube.com/watch?v=QkIuuZ5gZNk

WordPress Source

The WordPress where the content is managed lives here: https://demo.wpgraphql.com

Screenshot of the WordPress source site

Gatsby Site

The Live Gatsby site is at: https://gatsby-wpgraphql-blog-example.netlify.com/

Screenshot of the Gatsby site

Features

Below are features of the Gatsby site that are all sourced via WPGraphQL Queries, so the data is managed in WordPress, but is pulled into the Gatsby site and rendered there:

  • ✅ Menus
  • ✅ Pages
  • ✅ Paginated Blogroll/homepage
  • ✅ Single Posts
  • ✅ Authors
  • ✅ Categories
  • ✅ Tags

gatsby-wpgraphql-blog-example's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gatsby-wpgraphql-blog-example's Issues

Adding `isFrontPage` boolean to Pages data

It would be helpful to know if a page is assigned as the static homepage from WordPress. If we could expose this then we could tell when calling createPage() when to reassign the URI from the slug in WordPress to / so it loads as the homepage in Gatsby automatically as well.

pagination performance when +10k articles

This is more like a question.

What about if we have a lot of posts, let's say more that 10k with 10 per page and the user arrives from google on one of our last, blog/page/900. How this will perform?

I saw that if we have no after and it's a /page/number and hasNextPage, we push data to allPosts and then get back to it to show page 900.

I am new to wp graphql so I'm not sure. If we have no after, there is now way for us to go straight to a specific page/offset, right?
Are there any plans for that?

I really like your work, there are a lot of benefits over rest.
Thanks for the good work and thanks for your time :)

Breaking words

Hi 👋

Loving the idea behind wp-graphql, thank you for sharing!

Small first issue here, words within post content are being broken onto different lines:

screenshot_2019-02-26 sticky

Getting errors on build

Hi, I'm getting multiple errors when gatsby build (also on netlify)

` WebpackError: TypeError: Cannot read property 'name' of null

  • index.js:17 PostEntryMeta
    src/components/PostEntryMeta/index.js:13:40`

Removing Meta altogether I get the next error:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and ad ditional helpful warnings.

This is without changing anything to the repo (I'm using the demo site as a source), tried to update every npm package but still nothing.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.