Post on 09-Sep-2020
GraphQL & Vuefor
WordPress
Wes Eldridge
Randall-Reilly Web Application Developer
Rebellious Labs Co-Owner - Tech Partner
Spark TuscaloosaOrganizer
PommermanOrganizer - Core Contributor
Agenda● GraphQL● Vue● Match Made in Heaven● GraphQL & WordPress● Looking Forward
Querying Your Data
Query Response
https://docs.wpgraphql.com/getting-started/posts
No over fetching data
Query Response
GraphQL IDE GraphiQL
GraphiQL / Graphql Playground
Wrapping a REST API in GraphQL
Installing Vue
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
npm install vue
CDN
NPM
Getting Started!
import Vue from “vue”
const app = new Vue({el: ‘#app’
})
index.js
<body><div id=”app”>
...</div>
</body>
layout.php
Components<template>
<h1>Hello, {name}!</h1></template>
<script>export default {
data: {name: “WP Y’all”
}}
</script>
HelloWorld.vue
Registering a Component
import Vue from “vue”
import HelloWorld from “./HelloWorld.vue”
Vue.component(‘hello-world’, HelloWorld)
const app = new Vue({el: ‘#app’})
index.js
Using a Component
<body><div id=”app”>
<hello-world></hello-world></div>
</body>
layout.php
Hello, WP Y’all!
http://localhost:8000
More Vue
A rich ecosystem : Routing, Http, Forms, etc.
Works well with existing app!
Helpful and respectful community.
Great DevTools!
Chrome Vue Extension
Find your best friend!
What’s Apollo?
https://www.apollographql.com/
A set of libraries and devtools to work with GraphQL.
Client Library and Service Providers
Framework Integrations
Chrome Apollo Extension
Installing Apollo
npm install vue-apollo apollo-boost @apollo/react-hooks graphql
NPM
https://vue-apollo.netlify.com/guide/
Getting Started!import ApolloClient from “apollo-boost”import VueApollo from “vue-apollo”
Vue.use(VueApollo)
const apolloClient = new ApolloClient({url: “...”})
const apolloProvider = new VueApollo({defaultClient: apolloClient
})
const app = new Vue({el: ‘#app’,apolloProvider
})
index.js
Using in Components<script>
import gql from “graphql-tag”
export default {apollo: {
posts: gql`query {posts {
edges {...}}
}`}
}</script>
Posts.vue
Using in Components
<template><div class=”posts”>
<h1>Posts</h1><div v-for=”post in posts.edges”>
<h2>{post.node.title}</h2></div>
</div></template>
Posts.vue
More Apollo
A rich ecosystem : Vuex, client side caching, etc.
Libraries for different Frameworks!
Large and growing community.
Great DevTools!
Chrome Vue Extension
WELL, THAT’S GREAT
Installing WP GraphQL
git clone https://github.com/wp-graphql/wp-graphql
Clone into wp-content/plugins
https://docs.wpgraphql.com/getting-started/install-and-activate
Wp plugin activate wp-graphql
Activate the Plugin
See if it Works
https://docs.wpgraphql.com/getting-started/install-and-activate
What’s Data can I get?All of the data!
Posts, Pages, Custom Post Types, Categories & Tags, Custom Taxonomies, Users, Comments, Custom
Fields & Meta
Looking Forward
WP Data
every clientEasily!
to
Federated GraphQL
Supported by...
Node JS - Full Support
Python - In Development
PHP - HELP!
ONE GRAPH TO RULE THEM ALL!
Wrapping a REST API in GraphQL
Questions?
@weseldridge @rebelliouslabs