WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs...
Transcript of WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs...
![Page 1: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/1.jpg)
GraphQL & Vuefor
WordPress
![Page 2: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/2.jpg)
Wes Eldridge
Randall-Reilly Web Application Developer
Rebellious Labs Co-Owner - Tech Partner
Spark TuscaloosaOrganizer
PommermanOrganizer - Core Contributor
![Page 3: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/3.jpg)
Agenda● GraphQL● Vue● Match Made in Heaven● GraphQL & WordPress● Looking Forward
![Page 6: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/6.jpg)
Querying Your Data
Query Response
https://docs.wpgraphql.com/getting-started/posts
![Page 7: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/7.jpg)
No over fetching data
Query Response
![Page 8: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/8.jpg)
GraphQL IDE GraphiQL
GraphiQL / Graphql Playground
![Page 9: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/9.jpg)
Wrapping a REST API in GraphQL
![Page 11: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/11.jpg)
Installing Vue
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
npm install vue
CDN
NPM
![Page 12: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/12.jpg)
Getting Started!
import Vue from “vue”
const app = new Vue({el: ‘#app’
})
index.js
<body><div id=”app”>
...</div>
</body>
layout.php
![Page 13: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/13.jpg)
Components<template>
<h1>Hello, {name}!</h1></template>
<script>export default {
data: {name: “WP Y’all”
}}
</script>
HelloWorld.vue
![Page 14: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/14.jpg)
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
![Page 15: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/15.jpg)
Using a Component
<body><div id=”app”>
<hello-world></hello-world></div>
</body>
layout.php
Hello, WP Y’all!
http://localhost:8000
![Page 16: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/16.jpg)
More Vue
A rich ecosystem : Routing, Http, Forms, etc.
Works well with existing app!
Helpful and respectful community.
Great DevTools!
![Page 17: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/17.jpg)
Chrome Vue Extension
![Page 18: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/18.jpg)
Find your best friend!
![Page 20: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/20.jpg)
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
![Page 21: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/21.jpg)
Installing Apollo
npm install vue-apollo apollo-boost @apollo/react-hooks graphql
NPM
https://vue-apollo.netlify.com/guide/
![Page 22: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/22.jpg)
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
![Page 23: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/23.jpg)
Using in Components<script>
import gql from “graphql-tag”
export default {apollo: {
posts: gql`query {posts {
edges {...}}
}`}
}</script>
Posts.vue
![Page 24: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/24.jpg)
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
![Page 25: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/25.jpg)
More Apollo
A rich ecosystem : Vuex, client side caching, etc.
Libraries for different Frameworks!
Large and growing community.
Great DevTools!
![Page 26: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/26.jpg)
Chrome Vue Extension
![Page 27: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/27.jpg)
WELL, THAT’S GREAT
![Page 29: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/29.jpg)
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
![Page 30: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/30.jpg)
See if it Works
https://docs.wpgraphql.com/getting-started/install-and-activate
![Page 31: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/31.jpg)
What’s Data can I get?All of the data!
Posts, Pages, Custom Post Types, Categories & Tags, Custom Taxonomies, Users, Comments, Custom
Fields & Meta
![Page 32: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/32.jpg)
Looking Forward
![Page 33: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/33.jpg)
WP Data
every clientEasily!
to
![Page 34: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/34.jpg)
Federated GraphQL
![Page 35: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/35.jpg)
Supported by...
Node JS - Full Support
Python - In Development
PHP - HELP!
![Page 36: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/36.jpg)
ONE GRAPH TO RULE THEM ALL!
![Page 37: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/37.jpg)
Wrapping a REST API in GraphQL
![Page 38: WordPress · 2019. 8. 16. · Wes Eldridge Randall-Reilly Web Application Developer Rebellious Labs Co-Owner - Tech Partner Spark Tuscaloosa Organizer Pommerman Organizer - Core Contributor](https://reader033.fdocuments.net/reader033/viewer/2022051822/5fec41f90693c41e804d25b2/html5/thumbnails/38.jpg)
Questions?
@weseldridge @rebelliouslabs