 Welcome for coming here this morning. This is pretty new ground we're going to be touching. It's a headless project with WordPress and using GraphQL and React.js. We had a little bit of talk with React this morning, and there will be other talks later on today with React. So it's pretty new ground for us PHP developers. In 2015, Matt Mullenweg from WordPress, the founder of WordPress, in December 2015, asked us developers to do some homework. Who has done their homework? Learn JavaScript deeply. OK. Get yourself started now, because the wave has already started, and WordPress is moving on a lot, and it will be moving fast. And so anybody got touched with React? Rest API? OK. GraphQL? Yeah. OK, cool, cool. All right, all right. So it's going to be pretty new ground. So the goal of today is just to make yourself aware what's GraphQL, what does it do, and how to implement it with WordPress and with React. You won't be a specialist, but at least you'll know what it does and why we would be good to use it. My name is Etienne Ballanger. I'm a WordPress developer. I've been using WordPress for 10 years. I'm a self-taught developer. So when I don't work during the day, at night, I just study and work on that. Else? The web has changed a lot. From a lot of years since I've been starting touching the web, about 15 years ago, it was just a website, just a basic from desktop computers. You hooked onto a website and did research or did different kind of basic information. And WordPress as well has changed a lot since then. There's what we call traditional CMS. Traditional CMS, it's a framework that comes in with a back-end and a front-end tools, functions, and ways of working in order to produce your back-end and your front-end. And what we're going to be seeing, so if you go in and you have a basic computer, you have your back-end and your desktop computer, then we adopted for responsive design still. You can just manage with the traditional CMS that you hooked in with your back-end and your front-end the tools, and everything comes in built-in with your database and your web server. But in our days, we got tons of devices that need to hook to your computer, to your device, to your back-end in order to retrieve data or to send data. Whatever. It's a computer. It's all those internet of things that you can hook into your application and get data. So what we mean by a headless CMS is literally cutting your head, so making your front-end separate from your back-end totally. And the headless, you have your back-end still within the WordPress, your database, your MySQL. That won't change. But your front-end, you'll use new tools. You could use Vue.js. You could use React, Ember, all those new UYs, JavaScript framework in order to produce your front-end. And you have an API within a layer of API that will allow you to retrieve and get data from. And then we have a decouple of a hybrid one, which is a mix between you stay within your WordPress front-end and back-end way of developing. But with the API, you can make some other function, other sites, ask data from your API and retrieve data. And they'll be allowed to do it. But headless is the way that this morning we're going to be showing. So really, the way to understand it is really your WordPress, your front-end in your back-end will be completely separate. So your back-end will live on a subfolder or in a subdomain somewhere else than your front-end. It's truly two separate things. The advantages of a headless CMS, it helps you separate the content from your presentation. And the back-end of WordPress is pretty secure. It's well built, and it's been tested for a lot of time for a different kind of use. And it's really friendly user. So if you give your back-end to a newbie, he'll be able to post in or add content. And it's pretty friendly user. But he doesn't need to know how the front-end has been produced or retrieved data. He just wants to add content and everything was paid out. And it allows us web developers to use new ways of building your user experience and using new libraries and new ways of a new stack in order to produce your front-end. And again, it helps you be able to let your application send data or at least have access to data to all kinds of devices that will be able to retrieve data from your site. So since WordPress 4.5, I'm not exactly sure. But since around that version of WordPress, there's something called REST API, which allows the WordPress to output data. So if you hit the DuluPgSandoP V2 endpoint, you'll retrieve data from your WordPress for since about two years or three years. So all the sites that you both put in on the world now that you can hit that endpoint, and you'll be able to retrieve data. So if you want to have posts, you go on slash posts, and you will retrieve the 10 last posts. And you get a lot of data from there. You can hit users. You can hit categories. There's a lot of endpoints or URLs that you can hit in order to retrieve data. So if you want to, I'll be using a tool called Postman. And it helps us just to make some API calls and see what kind of data we retrieve from there. So if you see that at localhost, that's the name of my server. My local server, I have a basic WordPress installation and with just a team, a unit team data, the basic one. And then you hit the post URL. And as soon as you hit it, it'll retrieve the data. It's going to load the data. And then you'll get back all the data. That you'll get the ID, you'll get tons of data for all the posts that you had the 10 posts. So you get the author, the media, you'll get queries. You get tons of stuff. So in order to build your UI, what you need to build for that kind of UI here, you need to hit the post endpoint in order to retrieve the posts. But in order to retrieve the feature image, you need to hit another endpoint, which is media and with the ID of your feature image that you got from the post endpoint. Then you need to hit another endpoint in order to retrieve the user ID or user information. And the ID of the user, you got it from the post endpoint and category and the same thing or if you want other kind of data. As you can see that can be pretty much a lot of hitting endpoints in order to build all your UI. So there's a couple of disadvantages of using REST API. The first one is called overfetching. And overfetching is make your client download way too much information for your UI, what they need. So if we look at the UI we wanted to build here, you have your title, you have the category, you have your author, you have the author image, the author name and the data that it was produced. So as we saw earlier in the postman, here you got ton of data that you don't need. If we even hit, this is all the data that you get from the 10 posts. Do you need all that data? And do you need to your clients or users that are mobile that don't need to download all that data? So that's pretty a lot too much data to download. So that's overfetching. And the other problem is underfetching, it's making your user download not enough data so it needs to hit different endpoints in order to retrieve all the data that it needs to render your UI. And if you were talking about mintability and stability, scalability, it's really if your Facebook or Coursera or Google and you have an API, you might have a thousand endpoints to maintain and that's totally insane to maintain. So let's say that you retrieve the image in, I don't know, 500 endpoints and then you wanna make a different call to your image, a different function, you need to re-go in back all those endpoints and modify them. That's totally unmaintainable on the big scale. So Facebook since 2012, I started using or developing a tool called GraphQL. And in 2015, they made it open source. And what really GraphQL is, is just say an API, a query language for your API. So it's really not a replacement for MySQL, nothing that range. It's really just to query, just your API. So you'll hit one endpoint and you'll make your query and you'll retrieve the data that you ask for. Nothing more, nothing less. So for REST API, what you would need, you would need to hit the post endpoint and then the user endpoints and then the category endpoints. But with GraphQL, you just make one query, you ask for the post, you ask for your author, you ask for the name of your author, you name for your go in and you name for the category name. And just with that query, it'll return exactly that data. And that saves a lot of data. So there's three types of operation actions that you can do with GraphQL. You can do query, which that's what we're gonna see this morning. And that's just to retrieve the data. You can do mutations and mutations modify your data and subscriptions and that make your person available to subscribe to different actions. And the mud mutation and subscriptions, we won't go into that details and that could be pretty long. GraphQL really consists of two things. It's a GraphQL server and a GraphQL client. The GraphQL client will sit in your front end and your GraphQL server will sit in the different part, depending on the kind of a tool that you'll be using in order to build your GraphQL server. And the GraphQL server is responsible for building your schema for your API and is responsible for getting the data and returning the data. This is where all the function that goes in to solve the data. So if we look at here, that's a basic schema from GraphQL site. So if you go in and there's a type query and in that query you ask for a hero and a hero is a type character, then your character, you can define your own character and then you say that the name of your character is a string and the France is a, again it's a type character, then the home world, it's a type planet, you can define your own planet type character and really GraphQL is really type strict. So you cannot ask for, let's say for your character, you cannot ask for a integer for the name, you really need a string. It won't resolve the data and you won't get any data back. And for the GraphQL client, it's really responsible for making the, from the front end, it's just asking the data for it to your server, to your GraphQL server. It's just kind of a bridge between the two. So at the top here on the client side, that's the query. It looks a lot like JSON, but it's not JSON, it's really GraphQL. So here you ask for the hero, you ask for the name, the height and the mass and it'll return just that, not a bunch of data or useless data. So here you ask for hero, you get back Luke Skywalker, you get the name, the height and the mass. For building GraphQL server, GraphQL setup, there's a couple of ways. For the server, you can build everything custom, that's pretty tedious, good luck. Pretty long as well. There's a tool, the framework that can help you a lot. A little bit for advanced, it's called graph.cool. I didn't use it yet, but it's pretty really stateable and pretty awesome. Word Express, that's strictly built with WordPress. It gives you a GraphQL server and a GraphQL client. But the easiest way to get yourself up and running and we know that, you just need to install the plugin. Nothing else to do and you get a GraphQL server. It's built by a developer called Jason Baal and he does a really good work and it's really oftenly updated. So that's what I'll be using and that's what I have installed on my local machine, on my local WordPress install. It's do be GraphQL and what it does, you just need to install that and you just need to go on your local or in your URL and just hit GraphQL and you'll get your data. For a GraphQL client, there's two options. One is called Relay and it's built from Facebook. It's a little bit more complicated and a little bit for advanced. But the one that came out really strongly and it's really stable and really awesome to use. It's from a company called Apollo and it's Apollo Client. There's two, they have two tools that you can use Apollo Client or Apollo Boost. Apollo Boost is a no setup installation, pretty easy to use. It has what GraphQL and Apollo Client use and one of the main features it has built in cache. So if you query one page and it'll send 10 posts and your client or your user going to a different URL and come back to that page, it won't query your database, it won't query nothing because it knows it's in cache, it's just gonna deliver the data right away. And one little last, before we look at the demo or installation, is little detail is they have what in GraphQL, everything is a graph so you have nodes and edges. And nodes is your like your post, your author, your media idea with the content where exactly it lives. And then the edges is the relationship between the two. Let's say you have a post that is a node and then you have a author, again it's a node and what's the relationship between the two. And that's useful to understand when especially you use the GraphQL plugin in order to do pagination. That's useful to know. We won't see pagination today but again at the end of the slides there's a link to Jason Baal presentation in another word camp and it's about two hours and a half long and it shows all the process, all the thinking and build with React. So I'll be having three set up here. First I have a basic WordPress setup. I just installed a WordPress GraphQL plugin. You can extend it like you can extend a REST API. You can extend the GraphQL plugin. I won't go into the detail of that function but mainly what's important is the type. You just specify the kind of type of the function that the data you wanna retrieve and then you have the custom fields and it returns a custom field. So within the resolve function this is where you make all your retrieve the data on your server and then just output it. Then I have a React setup. So if nobody ever played with React you need to install what we call Node.js and then I'm in your command line. Sorry. I installed the Create React app. It's a Node setup installation to build a React app. It's really just, that will install it globally and then you install, you create your project, CD into your project and then that's the important part. You install packages, so libraries in order to link everything up and so I'll be using AppaloBoost, React, Appalo and GraphQL. The main part is AppaloBoost, that's the main one. The two others are just kind of a bridge in order to bridge React and GraphQL client and the GraphQL is just to make a query. I'll make sense soon and React DOM is just so that in my demo I can link on different and make different routes in the application and then you do Yarnstart and you go to your local host 3000, that's the basic setup with Create React app and you get yourself up and running. If we look, small demo. So here I got my basic website WordPress backend, WordPress and here this is my basic React app. So I'm here, I have a different component but I'm on home and if I hit post I'll retrieve and get back the 10 first posts of that site and like earlier I showed you that for REST API you can use Postman in order to play around with REST API but with GraphQL there's not a tool with just exactly the same thing, it's called Graphical and Graphical really allows you to play around with your queries in order to retrieve the data that you want and that's really a playground, it's pretty awesome to use. You can install, there's a Chrome extension, there's a app as well, you can install, you can install it by yourself, here I just installed the app and what's awesome here on this side you do your query, here you'll get the answer back and on this part and that's really awesome, it's all the documentation of that schema of that query, of that GraphQL schema, sorry. So on this part here you can see that I can do query and mutations, if you go in root query you'll get all the different things you can ask for, you can ask categories, category, you can get comments, you can post, media, so this is pretty much everywhere, all the things you can ask for and retrieve data. So here let's say that I want posts so you can pass in arguments, but let's just skip this out. So if I get, and what's nice about GraphQL is it already knows what's in the schema so it's like already asking you what do you really want so I can say posts, it's like a little bit like late Jason you open your brackets and so if I go in posts and then root connections, you got edges, again that's the part that you need to, so you got edges and then you got node inside and if you make a mistake in here, let's say I type here and already the, normally the GraphQL will tell you that it's an error and it won't be able to make the query for yourself. So you go in and nodes and in here, this is the gravy, this is exactly what you can ask for inside the node. So I say I want the author, I can get the name, the ID, again the ID won't be, it's a globally unique ID, but if you want the post ID, you just need to hit the post ID, if you want the slug, ask for the slug, I'll ask for the title, ask for the post ID and right away you get the author, the slug, the title and the post ID went pretty fast and you already got the 10 first posts. Let's say that you just want the first two posts, what you can do is put in arguments, just say first and say the five first and what it will do is just going to retrieve the files first post and again, it retrieve and send you back just the data that you ask so it get really fast. So in order to get your Apollo client set up within your React app, there's three steps to do, two of them, you just make it once and you don't deal about it. You need to import the Apollo client and you need to sign in and make a new Apollo client when you pass in your URL. Do you want where your GraphQL lives? And then you just need to wrap your application within a Apollo provider. So really in here, what are the two main lines is at the top here, you got Apollo provider and you just wrap all your application within Apollo provider and you pass in the client here, refers to the client, the variable client here. That's all that it does and so it'll know everything that's being, all actions that we'll be doing within your application, it will know. And what's awesome about Apollo client is that if you're on posts, it'll make one query but if you're on different pages and you have a lot of different queries, still it'll all gonna package all the different queries it needs to do and it will make just one query to your application, to your server. So it really loads super fast. Again, it has cache so it'll import, it will just make, just remember what are the data that has been downloaded and just make sure that it doesn't download stuff that it already done. So, and then in your components, you need to import GQL and query component. That's just, and that's the fun part. This is the GQL depot so here what you got over here is exactly what you've been playing around in your GraphQL. So what you can do is just come in here, copy this part, I can select it. You could just select that, copy that, paste it in your application and there we go, you got yourself in here, you paste it in here and you'll get yourself your query already done. And then you just need to go in and pass in the query component and the query component takes the, again, as a parameter, it takes in, as a prop, it takes in your query here and just, and then what's nice with the query component that's been provided by Apollo client is that you have a if loading. So while your data is loading, you can make a loader, you can make it all kinds of different interaction and then if something is an error, again, you can make a different component and then if everything's good, it'll render your different component that you made in the return over here. This is the return, that's the data that will be outputted. Here I made a little card and I just pass in different props, key, just react way of knowing that if there's different in the list item, it needs a specific key. Then ID, slug, title and URL, that's all the different data I'm passing between my component, the card component. There we go. This is pretty, I know it's pretty new ground, it might be a little bit fraying, but don't be scared, it's not that hard, but you gotta play around a little bit. But as you see, it's not that complicated, I have two links over here, so if I open up. So here I have my app, this is where all my app lives. So I have my provider, I am ported Apollo client and Apollo provider from Apollo Boost and React Apollo. And then over here I render my client, Apollo and I wrap it with Apollo provider. And I just, here the route is just in order to make my routes over here. So if I click on home, it knows that it needs to go into my home component, I can do whatever I want in that component. And then if I hit post, then that's the component I'll show you. And that's the component over here. And really what it does, it just import React and import the GraphQL or the GQL component and the query component. And here I got my query and it's just, again, I just copy it and paste it from my playground which is the GraphQL and then wrap it within my post and I made a query component and inside the card component. If you want to see the card component, it's just a basic component, I just output an image and an H1 and it will render, that's my card over here. And then I got an image, you got a title. But again, that's totally all the animation and everything can be done different temp. This is from here, you got, you're totally on new ground. So it's up to you to make all the different functions you need to do. So you're totally out of the scope of WordPress. But again, it renders a lot faster. And if you look here and here, it's instant. So it really doesn't load back. Let's see, let's hit. So here it loading and then it outputs. Go back to home, go back to post, no loading. All right. So not too confused. Any questions? Do I go ahead? The question is why did I choose GraphQL instead of other different methods that has been around? Especially because GraphQL diminishes the disadvantages of REST API, of using your REST API. Because REST APIs, if you have a huge website, it has a lot of traffic. Imagine Facebook having a thousand endpoints to maintain and people would hit, for one UI, you would need to hit, I don't know, 10 endpoints. Imagine for all the users that are on Facebook that need to render your post, your page or your UI. That means a lot of queries, a lot of database usage and everything, even if you have caches and everything. It's a lot, using GraphQL diminishes the use of GraphQL. There's even another tool that out there, it's been done by Netflix, it's called Filecore. It's similarly as GraphQL. So, but GraphQL kind of made it up from this underground really fast, but it's, because it's pretty fast, faster than REST API. That's, if I'm not sure, I don't, if it adds legacy, latency, between if I separate the back and the front end, no. And in fact, because it's rendering JavaScript, it really renders faster than PHP. And within the theme or normal theme, if I don't know if anybody ever opened a plugin called Simply Show Hooks, and on your front end, you'll see about 20 kinds of hooks that your WordPress page needs to render before or go in and look if there's function hooked or attached to those hooks. So, and that slows down your processor, your painting of your browser. So, it really, it's super fast, and especially because it's in JavaScript as well. So, and that's why a lot of, there's a lot of buzz around React or Vue.js. That's our, that's the main power of those tools. Yeah. Yeah, yeah. Yeah, WB GraphQL. So, the question is if the WB GraphQL, GraphQL is able to query a relationship between custom post types and custom data that are in relation. Normally, yeah, everything is done. If it's not done, you can add in the, like I put it a snippet, so you can extend the GraphQL plugin. But I think it's out of the box, it's supporting. But I'm not sure, I would have to see with the way you're making your relationship between the two. But normally it would be, it would work. The WB GraphQL made in about two, three weeks ago, they added the menu so you can query all the menus. You used to be separate. They have LCF, ACF as well coming in. And so, they're pretty intense on development as well. So, any more questions? Thank you very much. Thank you.