ramsaylanier/wordexpress

WordPress using Node, React, GraphQL, and Apollo

WordPress Express

UPDATE This project has been moved into several separate repositories.

I encourage you to check out wordexpress.io for documentation. This is a still a thing!

First, you'll need WordExpress Server. WordExpress Server is a GraphQL server built using Apollo Server. This connects to your WordPress database and provides you with an HTTP endpoint that you can send GraphQL queries. WordExpress Server uses WordExpress Schema, which is a GraphQL schema that provides GraphQL types and queries for querying

Second, you'll need to take a look at a starter kit. I have created a kit for Vue and for React. Fair warning, I've spent much more time developing the Vue starter kit than the React one. The starter kits provide you with everything you'll need to get up and running on the front end.

wordexpress's Issues

WordPress built in Shortcodes

As per on the Road Map, WordPress built in short codes, like [caption] should probably work with this project - they currently don't.

I think the most logical step would be to, when rendering the post, parse the post_content field (which I'm already doing), strip out shortcodes and replace them with the output of rendering a React component for that shortcode.

So, we'd create a Caption component, and when we parse the post_contet field, when we see [caption][/caption] we replace it with a the component.

It's probably going to be difficult.

Next.js + WordExpress?

Have you looked into Next.js for SSR?

App can't start

Sorry I must be confused. It has already done. Great Job

Contributors wanted?

@ramsaylanier awesome work. I felt exactly the same about Wordpress and PHP, so I attempted to do something similar - only I chose waterline and I started before relay or redux was really a thing. waterpress.
I realised recently that waterline is really not enough and I had planned to switch from waterline and fluxible to sequelize and redux as soon as I had finished the projects I was building waterpress for.

You've done that already - only much better, which is awesome. I would love to contribute - how may I get involved?

Provide 404 page

Currently, in production mode, if page not found, nothing will be displayed.

Not sure about how to provide this feature when using relay.

Schema is not defined

Schema is now in Definitions object.

Steps to reproduce:

• npm run build
• npm start

Output:
ReferenceError: Schema is not defined
at Object. (/WordExpress/dist/server.js:42:11)

Solution:
Change here Schema for Definitions object

Does this project support existing WordPress themes/modules/plugins?

I just discovered this project, so cool! Does it support the themes/modules/plugins that have made WordPress so great over the years?

If not, what would it take to add such support?

Error: Cannot find module './prod.json'

Doing a install from scratch: Error: Cannot find module './prod.json'.

Simple fix on the way...

Module sidebar not found on the Build

The Sidebar.js (uppercase) exist, but in the reference it is called sidebar.js (lowercase); unix/linux does not recognize it because it is a case sensitive system.

Enviorenment:

• Node v6.9.5
• Ubuntu 16.04.1 x64

Steps to reproduce:

• npm install
• npm run build

Output:
Module not found: Error: Cannot resolve 'file' or 'directory' ../sidebar/sidebar in @ ./app/components/documentation/DocumentationList.js 49:15-44

Solution:
Change the first capital letter of Sidebar.js file, or change the import reference, depending on the file naming convention: camelCase, PascalCase, nonseparation, snake_case, StudlyCaps, UPPER_CASE, etc.

Does it support the account system of WordPress?

This project is so cool! Does it support the account system of WordPress?
It seem not, how to add such support?

Include babel-runtime in devDependencies

morning! this looks rad and i'm looking forward to toying with it.

anyways, i was getting a bunch of love from terminal this morning:

ERROR in ./app/App.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/get-prototype-of' in /Users/jaredlaser/sites/playground/WordpressExpress/app
 @ ./app/App.js 7:22-78

ERROR in ./app/App.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/classCallCheck' in /Users/jaredlaser/sites/playground/WordpressExpress/app
 @ ./app/App.js 11:23-70

etc.

$ npm i babel-runtime --save-dev cleaned this up for me. more than happy to send a PR if you're into that sort of thing but it's one line :)

404 - Page Not Found

I have setup everything and connect it with wordpress database and it have been executing data as following

Executing (default): SELECT wp_terms.*, wp_term_relationships.object_id AS wp_term_relationships.object_id, wp_term_relationships.term_taxonomy_id AS wp_term_relationships.term_taxonomy_id, wp_term_relationships.term_order AS wp_term_relationships.term_order, wp_term_relationships.wp_post.id AS wp_term_relationships.wp_post.id, wp_term_relationships.wp_post.post_author AS wp_term_relationships.wp_post.post_author, wp_term_relationships.wp_post.post_title AS wp_term_relationships.wp_post.post_title, wp_term_relationships.wp_post.post_content AS wp_term_relationships.wp_post.post_content, wp_term_relationships.wp_post.post_excerpt AS wp_term_relationships.wp_post.post_excerpt, wp_term_relationships.wp_post.post_status AS wp_term_relationships.wp_post.post_status, wp_term_relationships.wp_post.post_type AS wp_term_relationships.wp_post.post_type, wp_term_relationships.wp_post.post_name AS wp_term_relationships.wp_post.post_name, wp_term_relationships.wp_post.post_parent AS wp_term_relationships.wp_post.post_parent, wp_term_relationships.wp_post.menu_order AS wp_term_relationships.wp_post.menu_order, wp_term_relationships.wp_post.wp_postmeta.meta_id AS wp_term_relationships.wp_post.wp_postmeta.meta_id, wp_term_relationships.wp_post.wp_postmeta.post_id AS wp_term_relationships.wp_post.wp_postmeta.post_id, wp_term_relationships.wp_post.wp_postmeta.meta_key AS wp_term_relationships.wp_post.wp_postmeta.meta_key, wp_term_relationships.wp_post.wp_postmeta.meta_value AS wp_term_relationships.wp_post.wp_postmeta.meta_value FROM (SELECT wp_terms.term_id, wp_terms.name, wp_terms.slug, wp_terms.term_group FROM wp_terms AS wp_terms WHERE wp_terms.slug = 'primary-navigation' LIMIT 1) AS wp_terms LEFT OUTER JOIN wp_term_relationships AS wp_term_relationships ON wp_terms.term_id = wp_term_relationships.term_taxonomy_id LEFT OUTER JOIN wp_posts AS wp_term_relationships.wp_post ON wp_term_relationships.object_id = wp_term_relationships.wp_post.id LEFT OUTER JOIN wp_postmeta AS wp_term_relationships.wp_post.wp_postmeta ON wp_term_relationships.wp_post.id = wp_term_relationships.wp_post.wp_postmeta.post_id;
Executing (default): SELECT id, post_author, post_title, post_content, post_excerpt, post_status, post_type, post_name, post_parent, menu_order FROM wp_posts AS wp_posts WHERE wp_posts.post_status = 'publish' AND wp_posts.post_name = 'homepage' LIMIT 1;

and when i run localhost:3000 i get 404 - Page Not Found i have removed the NotFound layout from Layouts.js and i got the message that

Uncaught TypeError: Cannot read property 'Component' of undefined
at WordExpressPage.render (webpack-internal:///962:55)
at eval (webpack-internal:///577:793)
at measureLifeCyclePerf (webpack-internal:///577:73)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack-internal:///577:792)
at ReactCompositeComponentWrapper._renderValidatedComponent (webpack-internal:///577:819)
at ReactCompositeComponentWrapper._updateRenderedComponent (webpack-internal:///577:743)
at ReactCompositeComponentWrapper._performComponentUpdate (webpack-internal:///577:721)
at ReactCompositeComponentWrapper.updateComponent (webpack-internal:///577:642)
at ReactCompositeComponentWrapper.receiveComponent (webpack-internal:///577:544)
at Object.receiveComponent (webpack-internal:///87:122)

i think that's why 404 - Page Not Found was showing so i have try to define the component but i stuck with this message

Changing default wp_prefix has no effect on queries.

Queries still use the standard "wp_" prefix.

app doesn't not start

[raijin@ishtar][~http/wordexpress/express_test/WordExpress]%npm run startdev

[email protected] startdev /srv/http/wordexpress/express_test/WordExpress
better-npm-run startdev

running better-npm-run in /srv/http/wordexpress/express_test/WordExpress
Executing script: startdev

to be executed: babel-node --debug ./dev.js
(node:7517) DeprecationWarning: node --debug is deprecated. Please use node --inspect instead.
Debugger listening on 127.0.0.1:5858
[15:01:08] [write-file-webpack-plugin] options { exitOnErrors: true,
force: false,
log: true,
test: null,
useHashIndex: true }
App is now running on http://localhost:3000

/srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Chunk.js:41
throw new Error("Chunk.entry was removed. Use hasRuntime()");
^

Error: Chunk.entry was removed. Use hasRuntime()
at Chunk.get entry [as entry] (/srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Chunk.js:41:9)
at /srv/http/wordexpress/express_test/WordExpress/node_modules/extract-text-webpack-plugin/index.js:201:13
at Array.filter (native)
at Compilation. (/srv/http/wordexpress/express_test/WordExpress/node_modules/extract-text-webpack-plugin/index.js:200:37)
at Compilation.applyPlugins0 (/srv/http/wordexpress/express_test/WordExpress/node_modules/tapable/lib/Tapable.js:68:14)
at Compilation.seal (/srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Compilation.js:567:8)
at /srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Compiler.js:493:16
at /srv/http/wordexpress/express_test/WordExpress/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (/srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/srv/http/wordexpress/express_test/WordExpress/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickDomainCallback (internal/process/next_tick.js:128:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] startdev: better-npm-run startdev
npm ERR! Exit status 1
npm ERR!

Update to Apollo Client release Candidate

LOVE THIS!

I noticed the Apollo deps are pretty out of date. Let's use the newly released apollo-client 1.0.

CORS support

Would it be possible to enable cross origin requests? Here's an example of how it's done with express: https://github.com/expressjs/cors#simple-usage-enable-all-cors-requests

I guess that would added here: https://github.com/ramsaylanier/WordExpress/blob/master/server.js#L12

But maybe it should be configurable? I'm not sure the best way to accomplish that. Happy to make a PR. Alternatively, we can just fork.

Error: The (relay-query) Babel 5 plugin is being run with Babel 6.

Fresh git clone and npm install with node v5.0.0, gives me this error:

Debugger listening on port 5858
/Users/WordpressExpress/node_modules/babel-core/lib/api/node.js:78
  throw new Error("The (" + alias + ") Babel 5 plugin is being run with Babel 6.");
  ^

Error: The (relay-query) Babel 5 plugin is being run with Babel 6.
    at new Plugin (/Users/WordpressExpress/node_modules/babel-core/lib/api/node.js:78:9)

Error: Chunk.entry was removed. Use hasRuntime()

npm run startdev returns the error

Error: Chunk.entry was removed. Use hasRuntime()

The version of extract-text-webpack-plugin is outdated and should be updated to 2.x (current is 2.1.2) in package.json's devDependencies.

Temporarily fix it by manually installing the latest
npm install extract-text-webpack-plugin@latest

Replace Relay with Apollo

Soon (very soon!) I plan on completely replacing Relay with Apollo Stack to get reactive queries and such.

ENOTFOUND localhost

I'm wanting to dabble and having trouble connecting to my local mysql server - just did a quick wordpress install with MAMP and set my settings to

"private": {
    "wp_prefix": "wp_",
    "database": {
      "name": "wordpress",
      "username": "root",
      "password": "root",
      "host": "localhost"
    }
  }

and i'm getting ENOTFOUND in the console and when I try to query in GraphiQL.

I also tried host: localhost:8889 since that's the port mysql is running on. No dice.

I'm excited to start dabbling with this thing!

export defined twice

in app/components/nav/nav.js

You are defining "NavList" twice in the export.

Relay With Server Side Rendering

Item #1 on the Road Map is to get Server Side Rendering working with this project. There are issues using Relay with SSR. @Nubuck has offered to take as stap ( see #7 )

All SSR issues lets leave in here for now.

Error

I get an error when running npm run startdev or npm run build:
Error: The (relay-query) Babel 5 plugin is being run with Babel 6.

Also, is it still under development? Im definately going to contribute if I get it to work and wrap my head around it. Very exciting indeed.

wp_prefix variable doesn't get updated

I'm trying to change the table prefix within my dev.json file, but the prefix doesn't get updated after rebuilding and running the dev server. After looking through the wordexpress-schema library I noticed that everything except the prefix is getting set to a variable

`_createClass(WordExpressDatabase, [{
    key: 'connect',
    value: function connect() {
      var _settings$privateSett = this.settings.privateSettings.database;
      var name = _settings$privateSett.name;
      var username = _settings$privateSett.username;
      var password = _settings$privateSett.password;
      var host = _settings$privateSett.host;
      var _settings$publicSetti = this.settings.publicSettings;
      var amazonS3 = _settings$publicSetti.amazonS3;
      var uploads = _settings$publicSetti.uploads;`

Then setting the wp_prefix variable like so

`key: 'getModels',
 value: function getModels() {
     var prefix = 'wp_';
     var Conn = this.connection;`

Should the prefix variable be set dynamically as well or am I missing something?

Does Hot Module Replacement work for Relay Containers?

I have problems with HMR. I noticed that it does not work for relay containers generated from react components. Do you have the same problem?

My appNav.js components is not working what to do?

Hi,

I am getting the errors below after following the documentation you have so far. What can I do in this case? Thank you in advanced

TypeError: Cannot read property 'items' of null AppNav.render C:/webapps/htdocs/wordpress/wp-app/app/components/nav/_AppNav.js AppNav.tryRender http://localhost:3000/main.js:721:2 AppNav.proxiedMethod http://localhost:3000/main.js:6295:2 ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext http://localhost:3000/main.js:6601:2 ReactCompositeComponentWrapper._renderValidatedComponent http://localhost:3000/main.js:6601:2 ReactCompositeComponentWrapper.performInitialMount http://localhost:3000/main.js:6601:2 ReactCompositeComponentWrapper.mountComponent http://localhost:3000/main.js:6601:2 Object.mountComponent http://localhost:3000/main.js:1321:2 Object.updateChildren http://localhost:3000/main.js:6583:2 ReactDOMComponent._reconcilerUpdateChildren http://localhost:3000/main.js:6757:2

Cannot read property 'base' on PostExcerpt

Property base is undefined

Steps to reproduce:

• npm start / npm run startdev
• Navigate to http://localhost:3000/articles
• Handle click on any post

Output:
TypeError: Cannot read property 'base' of undefined at Object. (/WordExpress/dist/server.js:42:11)

Notes:
The page layout from Articles is "PostList"
Sample: http://blog.cristiamdiaz.com/articles

Is not working

Is not staring.

WP SQL example?

Do you have an SQL dump you can share that works with this app? I installed WP from scratch and got a big red error (TypeError: Cannot read property 'post_title' of null). I haven't seen any documentation on how to configure my WP install. Thanks!

Rest API vs Sequelize.js vs graphql-php

Hi @ramsaylanier

I looked through your project and I am wondering whether there is a necessity to use Sequelize and in general - the idea of mapping Wordpress database.

Namely, what if we would use WP REST API in resolve() instead of Sequelize?
http://v2.wp-api.org/
So, instead of this function implementation:

getPostById(postId){
        return Post.findOne({
          where: {
            id: postId
          }
        })
      },

we would return the result by hitting the appropriate endpoint defined here: http://v2.wp-api.org/reference/posts/

As far as I understand, Post.findOne will ask for the whole post and then filter a result before sending it to the client, isn't it? If true, wouldn't it just easier to would to hit appropriate endpoints in your solution? I might missing something, so please correct me if I'm wrong.

Cheers,

Page templates

I think I read somewhere you were looking for the best way to handle Page Templates in WordExPress. I am working on a project similar to this one and the solution I am using is using a plugin in the WordPress Install wherein I register custom page templates programmatically and it is working well for me.

I also made a gist for some more details on the how: https://gist.github.com/Maximilianos/b21020ecceaa67650d01