Code Monkey home page Code Monkey logo

graphql-wp's Introduction

graphql-wp

A GraphQL endpoint for WordPress

This is a WordPress Plugin that exposes a GraphQL endpoint at /graphql

This is a work in progress / in active development, but already pretty useful.

Uses this excellent graphql-php library.

##Install composer require mohiohio/graphql-wp

Assuming you have something like this in your composer.json file ( so it knows to install it in your plugin directory )

    "extra" : {
        "wordpress-install-dir": "public/wp",
        "installer-paths": {
            "public/wp-content/plugins/{$name}/": ["type:wordpress-plugin"],
            "public/wp-content/themes/{$name}/": ["type:wordpress-theme"]
        }
    },

If your aren't familar with using composer with WordPress I'd recommend using a setup like bedrock. Otherwise you will at the least need to require autoload.php for this to work.

##Using

The best way to explore / develop with this is by using a tool such as ChromeiQL That will show you the endpoints and arguments that are available.

https://raw.githubusercontent.com/balintsera/graphql-wp/fix/no-response/.readme.md/graphiql-query.png

###wp_query This is designed to follow WordPress' existing WP Query functions. So as a rule you can pass the same parameters as your can to WP Query*.

*In reality there are a lot of params you can pass to WP_Query, and I've only implemented the ones that I've needed so far. But adding more is trivial as the arguments are just passed directly to the get_posts function, so its just a matter of defining them in the schema.

{"query":"{ 
   	wp_query { 
   		posts(paged: 1 posts_per_page: 10)  { 
   			title 
   			name 
   			terms (taxonomy:\"category\") { 
   				name 
   				slug 
   			}
   		}
   	}
   }"}

Will give you

{
  "data": {
    "wp_query": {
      "posts": [
       {
          "title": "Much better than REST",
          "name": "so-easy-yes"
          "terms": [
          {
              "name": "Example Category ",
              "slug": "example-category"
          }
          ]
       } ...

Also available on wp_query menu

{"query":
    "{ wp_query 
	    { menu(name: \"Main Menu\")  { 
		    title 
		    url
		}
	}
}"}

Will give you

{
  "data": {
    "wp_query": {
      "menu": [
        {
          "title": "Home",
          "url": "http://graphqlwordpress.dev/"
        }
      ]
    }
  }
}

###Post

And of course you can get an individual post ( but most of the time you'll probably use wp_query as your main entry point )

{"query":"{wp_post(ID:\"1\") { title, content, status }}"}

###Custom Post Types

This is how you can add custom post types ( which have custom fields ) to a client specific plugin. graphql-wp/get_post_types is a good hook for this. Where $types is a hash of the schema we are working with, so just add new items into this and you are good to go.

use GraphQL\Type\Definition\Type;
use Mohiohio\GraphQLWP\Type\Definition\Post;
use Mohiohio\GraphQLWP\Type\Definition\Attachment;

class Foo extends Post {

    static function getDescription() {
        return "A custom post type example, for post type `foo`";
    }

    static function getFieldSchema() {
        return parent::getFieldSchema() + [
            'website' => [
                'type' => Type::string(),
                'resolve' => function($post) {
                    return get_post_meta($post->ID,'website',true);
                },
            ],
            'image' => [
                'type' => Attachment::getInstance(),
                'resolve' => function($post) {
                    $attachment_id = get_post_meta($post->ID,'image',true);
                    return $attachment_id ? get_post($attachment_id) : null;
                },
            ]
        ];
    }
}

add_filter('graphql-wp/get_post_types', function($types){
    return $types + [
        'foo' => new Foo
    ];
});

graphql-wp's People

Contributors

balintsera avatar dlackty avatar graphan avatar tim-field avatar tony-luisi avatar

Watchers

 avatar

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.