LocalWP
Get local from https://localwp.com/
Run the install
Once installed, in the top left corner menu you will find the option to spin up a new site.
Create a new site using the gui
You should now have you site up and running at the localhost port.
Now log-in at http://localhost:xxxx/wp-login.php where xxxx is your port number provided from the local app.
Or Select one-click admin and use the wp admin button to log in.
GO to plugins section, add a new plug in called wpgraphql.
Wait, why use a plug-in instead of the default RestAPi?
Wordpress as a content management platform can expose a Rest API to allow frontend or other services to access and manage its data. But, in doing so we get a response that contains essentially unfiltered data. To access the rest end points on your newly setup wordpress site go to this address but change example.com to your wordpress site url
http://example.com/?rest_route=/
It is helpful to get a JSON formatter for humans to use in the browser so to be able to make sense of the output. Unless you are a machine.
Graphql improves upon this. How? By improving upon how you access the data and what data is returned!
Lest break that down with an example,
if one wanted to get the post data but only cared about the description one would have to work around the extra data attributes like tags, categories ect.
In addition, you are being sent data that is not needed but taking up time and space.
We can access data much easier by specifing what Well by using a query language and returning only the specified data/attributes. Grahql allows us to delve into the exact data through an easy to use declarative description of what data we want. Thus we can lower web traffic bandwidth.
Rest works
With WPGraphQL installed you can use the IDE to create your queries.
query GetPosts {
posts {
nodes {
id
title
date
}
}
}
Now taking the desired post id one can compose a query that allows for only the retrieval of the description for this post from the sever using this code.
query GetSinglePost {
post(id: "cG9zdDox") {
id
}
}
In the query body under post we would like describe what we want back as fields. We do not want the id so we remove that from the query fields. To identify the post we pass the id as an argument.
query GetSinglePost {
post(id: "cG9zdDox") {
description
}
}
To Remove the annoying extension field add this snippet in your functions.php.
add_filter( 'graphql_request_results', function( $response ) {
if ( is_array( $response ) && isset( $response['extensions'] ) ) {
unset( $response['extensions'] );
}
if ( is_object( $response ) && isset( $response->extensions ) ) {
unset( $response->extensions );
}
return $response;
}, 99, 1 );
To get to functions.php, go to WPlocal app and find the go to folder buttoon for your wordpress site.
add this snippet to end of the file and save.
Go through app-> public-> wp-content-> themes-> twentytwentyfour
if you are using a different theme change twentytwentyfour to that theme folder.
Copy the address. Open command line and cd to that address.
Next run nvim functions.php
Add code to end of file. Save and close the file.
Restart WPLocal and test your query again.
You now have a FRESH headless Wordpress site ready to go!
Feel free to contact me if you have any questions or edits!
murfg25@gmail.com
Top comments (0)